add configuration to use react-express-mysql sample with Docker Dev Environments feature (#270)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
This commit is contained in:
Guillaume Lours 2022-07-13 10:35:12 +02:00 committed by GitHub
parent 74317904bd
commit e45810975f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 111 additions and 2 deletions

View File

@ -132,3 +132,14 @@ __Explanation of service mongo__
:key: `If you wish to check your DB changes on your local machine as well. You should have installed MongoDB locally, otherwise you can't access your mongodb service of container from host machine.` :key: `If you wish to check your DB changes on your local machine as well. You should have installed MongoDB locally, otherwise you can't access your mongodb service of container from host machine.`
:white_check_mark: You should check your __mongo__ version is same as used in image. You can see the version of __mongo__ image in `docker-compose `file, I used __image: mongo:4.2.0__. If your mongo db version on your machine is not same then furst you have to updated your local __mongo__ version in order to works correctly. :white_check_mark: You should check your __mongo__ version is same as used in image. You can see the version of __mongo__ image in `docker-compose `file, I used __image: mongo:4.2.0__. If your mongo db version on your machine is not same then furst you have to updated your local __mongo__ version in order to works correctly.
## Use with Docker Development Environments
You can use this sample with the Dev Environments feature of Docker Desktop.
![Screenshot of creating a Dev Environment in Docker Desktop](../dev-envs.png)
To develop directly on the services inside containers, use the HTTPS Git url of the sample:
```
https://github.com/docker/awesome-compose/tree/master/react-express-mongodb
```

View File

@ -0,0 +1,64 @@
services:
backend:
build:
args:
- NODE_ENV=development
context: backend
target: dev-envs
command: npm run start-watch
environment:
- DATABASE_DB=example
- DATABASE_USER=root
- DATABASE_PASSWORD=/run/secrets/db-password
- DATABASE_HOST=db
- NODE_ENV=development
ports:
- 80:80
- 9229:9229
- 9230:9230
secrets:
- db-password
volumes:
- /var/run/docker.sock:/var/run/docker.sock
networks:
- public
- private
depends_on:
- db
db:
# We use a mariadb image which supports both amd64 & arm64 architecture
image: mariadb:10.6.4-focal
# If you really want to use MySQL, uncomment the following line
#image: mysql:8.0.27
command: '--default-authentication-plugin=mysql_native_password'
restart: always
secrets:
- db-password
volumes:
- db-data:/var/lib/mysql
networks:
- private
environment:
- MYSQL_DATABASE=example
- MYSQL_ROOT_PASSWORD_FILE=/run/secrets/db-password
frontend:
build:
context: frontend
target: dev-envs
ports:
- 3000:3000
volumes:
- /var/run/docker.sock:/var/run/docker.sock
networks:
- public
depends_on:
- backend
networks:
public:
private:
volumes:
back-notused:
db-data:
secrets:
db-password:
file: db/password.txt

View File

@ -106,5 +106,5 @@ You can use this sample with the Dev Environments feature of Docker Desktop.
To develop directly on the services inside containers, use the HTTPS Git url of the sample: To develop directly on the services inside containers, use the HTTPS Git url of the sample:
``` ```
https://github.com/docker/awesome-compose/tree/master/react-express-mongodb https://github.com/docker/awesome-compose/tree/master/react-express-mysql
``` ```

View File

@ -1,5 +1,7 @@
# syntax=docker/dockerfile:1.4
# if you're doing anything beyond your local machine, please pin this to a specific version at https://hub.docker.com/_/node/ # if you're doing anything beyond your local machine, please pin this to a specific version at https://hub.docker.com/_/node/
FROM node:lts FROM node:lts AS development
# set our node environment, either development or production # set our node environment, either development or production
# defaults to production, compose overrides this to development on build and run # defaults to production, compose overrides this to development on build and run
@ -29,3 +31,17 @@ COPY . /code
# using node here is still more graceful stopping then npm with --init afaik # using node here is still more graceful stopping then npm with --init afaik
# I still can't come up with a good production way to run with npm and graceful shutdown # I still can't come up with a good production way to run with npm and graceful shutdown
CMD [ "node", "src/index.js" ] CMD [ "node", "src/index.js" ]
FROM development as dev-envs
RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF
RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

View File

@ -4,6 +4,7 @@ services:
args: args:
- NODE_ENV=development - NODE_ENV=development
context: backend context: backend
target: development
command: npm run start-watch command: npm run start-watch
environment: environment:
- DATABASE_DB=example - DATABASE_DB=example

View File

@ -1,3 +1,5 @@
# syntax=docker/dockerfile:1.4
FROM node:lts AS development FROM node:lts AS development
ENV CI=true ENV CI=true
@ -15,6 +17,21 @@ FROM development AS builder
RUN npm run build RUN npm run build
FROM development as dev-envs
RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF
RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD [ "npm", "start" ]
FROM nginx:1.13-alpine FROM nginx:1.13-alpine
COPY --from=builder /code/build /usr/share/nginx/html COPY --from=builder /code/build /usr/share/nginx/html