adelorenzo/awesome-compose
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit README.md follow template

Browse Source 
Signed-off-by: phamthainb <phamthai4643@gmail.com>
This commit is contained in:
phamthainb 2021-10-10 21:30:03 +07:00
parent 9c19075d6e
commit 372a91163c
1 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
react-nginx/README.md
View File

@ -1,10 +1,44 @@
## Details ## Compose sample application
An project deploy a React Application with Nginx ### An project deploy React Application with Nginx
### Command Project structure:
#### Build image and run container ```
├── docker-compose.yml
├── Dockerfile
├── .dockerignore
├── .nginx
│   └── nginx.conf
├── package.json
├── public
│   ├── ...
│   └── robots.txt
├── README.md
├── src
│   ├── ...
│   └── App.js
└── yarn.lock
```
[_docker-compose.yaml_](docker-compose.yaml)
```
version: "3.7"
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 $ docker-compose up -d
@ -31,8 +65,13 @@ Successfully built 6372a67cf86f
Successfully tagged react-nginx_frontend:latest Successfully tagged react-nginx_frontend:latest
``` ```
#### Expected result ## Expected result
Listing containers must show containers running and the port mapping as below:
``` ```
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 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 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
``` ```
@ -40,7 +79,7 @@ b6d00a4974ce react-nginx_frontend "nginx -g 'daemon of…" About a minute
After the application start, navigate to http://localhost in your browser: After the application start, navigate to http://localhost in your browser:
![page](./output.png) ![page](./output.png)
#### Stop and remove the container Stop and remove the containers
``` ```
$ docker-compose down $ docker-compose down
@ -48,37 +87,3 @@ Stopping frontend ... done
Removing frontend ... done Removing frontend ... done
Removing network react-nginx_default Removing network react-nginx_default
``` ```
### Structure
This base project created with [Create React App](https://github.com/facebook/create-react-app).
```
├── docker-compose.yml
├── Dockerfile
├── .dockerignore
├── .gitignore
├── .nginx
│   └── nginx.conf
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── node_modules
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock
```