add react-nginx (docker#121)

add react-nginx Signed-off-by: phamthainb <phamthai4643@gmail.com>
cewatkins · Oct 10, 2021 · 263ba37 · 263ba37
1 parent 30d01c2
commit 263ba37
Show file tree

Hide file tree

Showing 24 changed files with 36,390 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ application with a Node.js backend and a MySQL database.
 application with a Node.js backend and a Mongo database.
 - [`React / Rust / PostgreSQL`](https://github.com/docker/awesome-compose/tree/master/react-rust-postgres) - Sample React
 application with a Rust backend and a Postgres database.
+- [`React / Nginx`](https://github.com/docker/awesome-compose/tree/master/react-nginx) - Sample React application with Nginx.
 - [`Spring / PostgreSQL`](https://github.com/docker/awesome-compose/tree/master/spring-postgres) - Sample Java application
 with Spring framework and a Postgres database.  
 ## Single service samples

diff --git a/react-nginx/.dockerignore b/react-nginx/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+build
+.dockerignore
+**/.git
+**/.DS_Store
+**/node_modules
diff --git a/react-nginx/.gitignore b/react-nginx/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/react-nginx/.nginx/nginx.conf b/react-nginx/.nginx/nginx.conf
@@ -0,0 +1,17 @@
+server {
+
+  listen 80;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri /index.html =404;
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}
+
diff --git a/react-nginx/Dockerfile b/react-nginx/Dockerfile
@@ -0,0 +1,41 @@
+# 1. For build React app
+FROM node:lts AS development
+
+# Set working directory
+WORKDIR /app
+
+# 
+COPY package.json /app/package.json
+COPY package-lock.json /app/package-lock.json
+
+# Same as npm install
+RUN npm ci
+
+COPY . /app
+
+ENV CI=true
+ENV PORT=3000
+
+CMD [ "npm", "start" ]
+
+FROM development AS build
+
+RUN npm run build
+
+# 2. For Nginx setup
+FROM nginx:alpine
+
+# Copy config nginx
+COPY --from=build /app/.nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+WORKDIR /usr/share/nginx/html
+
+# Remove default nginx static assets
+RUN rm -rf ./*
+
+# Copy static assets from builder stage
+COPY --from=build /app/build .
+
+# Containers run nginx with global directives and daemon off
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
+
diff --git a/react-nginx/README.md b/react-nginx/README.md
@@ -0,0 +1,88 @@
+## Compose sample application
+
+### An project deploy React Application with Nginx
+
+Project structure:
+
+```
+├── 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)
+
+```
+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:
+![page](./output.png)
+
+Stop and remove the containers
+
+```
+$ docker-compose down
+Stopping frontend ... done
+Removing frontend ... done
+Removing network react-nginx_default
+```
diff --git a/react-nginx/docker-compose.yml b/react-nginx/docker-compose.yml
@@ -0,0 +1,8 @@
+version: "3.7"
+services:
+  frontend:
+    build:
+      context: .
+    container_name: frontend
+    ports:
+      - "80:80"
diff --git a/react-nginx/output.png b/react-nginx/output.png