You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298ebd2b45
* fix security issues in react-rust-postgres sample * fix security issues in react-java-mysql sample * fix security issues in react-express-mysql sample * fix security issues in react-express-mongodb sample * fix security issues in react-nginx sample * fix security issues in angular sample * fix security issues in django sample * fix security issues in vuejs sample Signed-off-by: Guillaume Lours <guillaume.lours@docker.com> |
3 years ago | |
---|---|---|
.. | ||
.nginx | 3 years ago | |
public | 3 years ago | |
src | 3 years ago | |
.dockerignore | 3 years ago | |
.gitignore | 3 years ago | |
Dockerfile | 3 years ago | |
README.md | 3 years ago | |
compose.yaml | 3 years ago | |
output.png | 3 years ago | |
package-lock.json | 3 years ago | |
package.json | 3 years ago |
README.md
Compose sample application
An project deploy React Application with Nginx
Project structure:
├── compose.yaml
├── Dockerfile
├── .dockerignore
├── .nginx
│ └── nginx.conf
├── package.json
├── public
│ ├── ...
│ └── robots.txt
├── README.md
├── src
│ ├── ...
│ └── App.js
└── yarn.lock
services:
frontend:
build:
context: .
container_name: frontend
ports:
- "80:80"
The compose file defines an application with an services frontend
.
When deploying the application, docker compose maps port 80 of the frontend service container to port 80 of the host as specified in the file.
Deploy with docker compose
$ docker compose up -d
Building frontend
Sending build context to Docker daemon 1.49MB
Step 1/17 : FROM node:lts AS development
---> 9153ee3e2ced
Step 2/17 : WORKDIR /app
---> Using cache
---> a7909d92148a
Step 3/17 : COPY package.json /app/package.json
---> 2e690dfe99b2
Step 4/17 : COPY package-lock.json /app/package-lock.json
---> dd0132803f43
.....
Step 16/17 : COPY --from=build /app/build .
---> Using cache
---> 447488bdf601
Step 17/17 : ENTRYPOINT ["nginx", "-g", "daemon off;"]
---> Using cache
---> 6372a67cf86f
Successfully built 6372a67cf86f
Successfully tagged react-nginx_frontend:latest
Expected result
Listing containers must show containers running and the port mapping as below:
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b6d00a4974ce react-nginx_frontend "nginx -g 'daemon of…" About a minute ago Up About a minute 0.0.0.0:80->80/tcp, :::80->80/tcp frontend
After the application start, navigate to http://localhost in your browser:
Stop and remove the containers
$ docker compose down
Stopping frontend ... done
Removing frontend ... done
Removing network react-nginx_default