diff --git a/react-express-mongodb/.docker/docker-compose.yaml b/react-express-mongodb/.docker/docker-compose.yaml new file mode 100644 index 0000000..0adf162 --- /dev/null +++ b/react-express-mongodb/.docker/docker-compose.yaml @@ -0,0 +1,43 @@ +services: + frontend: + build: + context: frontend + target: dev-envs + ports: + - 3000:3000 + stdin_open: true + volumes: + - /var/run/docker.sock:/var/run/docker.sock + restart: always + networks: + - react-express + depends_on: + - backend + + backend: + restart: always + build: + context: backend + target: dev-envs + volumes: + - /var/run/docker.sock:/var/run/docker.sock + depends_on: + - mongo + networks: + - express-mongo + - react-express + expose: + - 3000 + mongo: + container_name: mongo + restart: always + image: mongo:4.2.0 + volumes: + - ./data:/data/db + networks: + - express-mongo + expose: + - 27017 +networks: + react-express: + express-mongo: diff --git a/react-express-mongodb/backend/Dockerfile b/react-express-mongodb/backend/Dockerfile index 2b39211..a4767ea 100644 --- a/react-express-mongodb/backend/Dockerfile +++ b/react-express-mongodb/backend/Dockerfile @@ -1,4 +1,6 @@ -FROM node:lts-buster-slim +# syntax=docker/dockerfile:1.4 + +FROM node:lts-buster-slim AS development # Create app directory WORKDIR /usr/src/app @@ -12,3 +14,18 @@ COPY . /usr/src/app EXPOSE 3000 CMD [ "npm", "run", "dev" ] + +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", "run", "dev" ] \ No newline at end of file diff --git a/react-express-mongodb/compose.yaml b/react-express-mongodb/compose.yaml index 652294e..7c591fb 100644 --- a/react-express-mongodb/compose.yaml +++ b/react-express-mongodb/compose.yaml @@ -1,6 +1,8 @@ services: frontend: - build: frontend + build: + context: frontend + target: development ports: - 3000:3000 stdin_open: true @@ -17,7 +19,9 @@ services: backend: container_name: backend restart: always - build: backend + build: + context: backend + target: development volumes: - ./backend:/usr/src/app - /usr/src/app/node_modules diff --git a/react-express-mongodb/frontend/Dockerfile b/react-express-mongodb/frontend/Dockerfile index 476a385..d36d44b 100644 --- a/react-express-mongodb/frontend/Dockerfile +++ b/react-express-mongodb/frontend/Dockerfile @@ -1,5 +1,7 @@ +# syntax=docker/dockerfile:1.4 + # Create image based on the official Node image from dockerhub -FROM node:lts-buster +FROM node:lts-buster AS development # Create app directory WORKDIR /usr/src/app @@ -22,3 +24,18 @@ EXPOSE 3000 # Serve the app CMD ["npm", "start"] + +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" ] diff --git a/react-express-mysql/README.md b/react-express-mysql/README.md index 66fad57..3db38a9 100644 --- a/react-express-mysql/README.md +++ b/react-express-mysql/README.md @@ -97,3 +97,14 @@ Removing react-express-mysql_db_1 ... done Removing network react-express-mysql_default ``` + +## Use with Docker Development Environments + +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: +``` +https://github.com/docker/awesome-compose/tree/master/react-express-mongodb +```