Mục tiêu

Trong bài viết này chúng ta sẽ tiến hành cấu hình môi trường để deploy ứng dụng React với Nginx trong Docker.

Tiến hành

1. Init project

Trước tiên để có thể deploy ứng dụng thì ta cần 1 project, ở đây mình sẽ bắt đầu với project cơ bản nhất của React.

npx create-react-app my-app

Sau khi init project xong, chúng ta sẽ có 1 cấu trúc dự án như sau

├── package.json
├── public
│ ├── ...
│ └── robots.txt
├── README.md
├── src
│ ├── ...
│ └── App.js
└── yarn.lock

2. Setup Docker

Tiếp đó ta thêm 1 vài file config sau

+ ├── docker-compose.yml
+ ├── Dockerfile
+ ├── .dockerignore
+ ├── .nginx
+ │ └── nginx.conf ├── package.json ├── public │ ├── ... │ └── robots.txt ├── README.md ├── src │ ├── ... │ └── App.js └── yarn.lock

2.1. .dockerignore

Nó sẽ ignore các file chúng ta không muốn copy vào trong image, từ đó giúp cho giảm kích thước của image tối đa.

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

2.2. Folder .nginx

Đây sẽ folder để config nginx

File nginx.conf

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; } }

• listen 80: nginx sẽ listen port 80 trong container để hiển thị app.
• try_files: Đối với React sẽ là single page, tức là chỉ có 1 route duy nhất để hiển thị toàn bộ app. Với thứ tự try_files như trên nginx sẽ duyệt lần lượt theo thứ tự $uri > /index.html > 404(not found page) để kiểm tra, nếu k hợp lệ thì sẽ chuyển đến route tiếp theo để kiểm tra và hiển thị.
• error_page: một vào route lỗi hiển thị mặc định.

2.3. File Dockerfile

 # 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;"]

2.4. Folder docker-compose.yml

Để đơn giản cho việc run Docker và tích hợp với nhiều service khác, ta sẽ viết thêm docker-compose.yml

version: "3.7" services: frontend: build: context: . container_name: frontend ports: - "3000:80" # map 80 in container => 3000 in local

3. Run Docker

• Start container

 $ 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

Sau khi run xong chúng ta xem ứng dụng ở http://localhost:3000

• Stop container

 $ docker-compose down Stopping frontend ... done Removing frontend ... done Removing network react-nginx_default

3. Tổng kết

Trên đây là hướng dẫn cấu hình để triển khai 1 ứng dụng React, Nginx trong Docker.

Các bạn có thể xem code tại đây github