Deploy project Reactjs bằng Docker và Nginx

Docker là một công cụ khá tuyệt vời và hữu ích trong việc triển khai các ứng dụng thông qua container, trong bài viết này mình xin chia sẻ phương pháp để deploy dự án Reactjs lên server Ubuntu sử dụng webserver nginx hoàn toàn trên docker.

Trước tiên các bạn cần chuẩn bị:

• Source code, nếu chưa có thì có thể tạo ở bước tiếp theo.
• 1 server ubuntu version 16, 18 hoặc 20 đều được, nếu chưa có thì các bạn có thể tham khảo Sunteco Cloud, đang free trial cho tài khoản đăng ký mới.
• 1 chút kinh nghiệm cơ bản về Docker và Nginx.

Bước 1: Tạo 1 project reactjs, nếu bạn đã có source code có thể bỏ qua bước này:

npx create-react-app react-deploy

cd react-deploy

Sau đó hãy thử run local:

npm start

Mở trình duyệt và bạn sẽ thấy project sẽ chạy ở port 3000 (hoặc port khác nếu như port 3000 bị ứng dụng khác chiếm dụng).

Sau khi chạy local thành công thì chúng ta sẽ build project thông qua câu lệnh:

npm run build

Npm run build sẽ thực hiện công việc chuyển đổi mã trong dự án thành mã có thể chạy được trong trình duyệt hoặc Node. js, sau khi câu lệnh trên chạy xong, bạn sẽ thấy có 1 folder mới tên “build” được tạo ra, như vậy là build thành công rồi nhé.

Bước 2: Khởi tạo và cấu hình nginx

Tại root project, chúng ta sẽ tạo 1 file với tên “nginx.conf” với nội dung như hình.

Trong file config của nginx sẽ xuất hiện khá nhiều concept, các bạn có thể search để tìm hiểu sâu hơn. Nhưng có 1 số concept cần quan tâm, đó là:

• worker_processes: Thiết lập này định nghĩa số worker processes mà NGINX sẽ sử dụng. Bởi vì NGINX là đơn luồng (single threaded), nó thường bằng với số lõi CPU.
• worker_connection: Đây là số lượng tối đa của các kết nối đồng thời cho mỗi worker process và nói cho các worker process của chúng ta có bao nhiêu người có thể được phục vụ đồng thời bởi NGINX.
• access_log & error_log: Đây là những tệp tin mà NGINX sẽ sử dụng để log bất kỳ lỗi và số lần truy cập. Các bản ghi này thường được sử dụng để gỡ lỗi hoặc sửa chữa.
• server: Là các khối block dùng để định nghĩa các server ảo để xử lý các request từ client của bạn. Mỗi client request sẽ được xử lý dựa trên cấu hình được xác định trong mỗi server. Do đó, NGINX cần quyết định server nào phù hợp nhất cho request đó. Các directive được sử dụng để quyết định server là:

* *listen: là sự kết hợp địa chỉ IP/port mà server này được thiết kế để respond. Nếu một request từ client phù hợp với các giá trị này, server này có khả năng sẽ được lựa chọn để xử lý kết nối.

* *server_name: directive này là một thành phần khác, dùng để chọn một server để xử lý. Nếu có nhiều server đáp ứng được directive listen, NGINX sẽ phân tích cú pháp header “Host” của request và lựa chọn server phù hợp.

Trong một block server, chúng ta có thể định nghĩa nhiều location context được sử dụng để quyết định cách xử lý các request từ client. Bất cứ khi nào một request đến, NGINX sẽ kiểm tra khớp URI tới một trong số các location context và xử lý nó cho phù hợp.

Có nhiều directive quan trọng có thể được sử dụng trong location context, chẳng hạn như:

• try_files: sẽ cố gắng phục vụ các tệp tin tĩnh được tìm thấy trong thư mục được trỏ tới bởi directive gốc.
• proxy_pass: sẽ gửi request tới một proxy server cụ thể.
• rewrite: sẽ viết lại URI tới dựa trên một regular expression để một khối location có thể xử lý nó.

Bước 3: Cấu hình Dockerfile

Tại root project, chúng ta sẽ tạo 1 file với tên “Dockerfile” với nội dung như ảnh bên dưới, cũng như file nginx.conf, bạn không cần quan tâm quá nhiều đến các concept. Mình đã comment các nội dung chính ở trong Dockerfile, nếu còn có thắc mắc, bạn có thể comment bên dưới bài viết nhé.

Sau khi tạo xong nginx.conf và Dockerfile thì bạn có thể chạy thử dưới local thông qua Docker để xem thử kết quả nhé.

Đầu tiên cần phải build Dockerfile thành image với câu lệnh cmd (mở cmd tại root project) theo cú pháp:

docker build -t [image name]:[tag version] [path to dockerfile]

“docker build -t react-deploy .”

Với câu lệnh trên thì chúng ta sẽ tạo 1 image với tên “react-deploy”, tag version để null nên tag mặc định sẽ là “latest” hoặc có thể sửa tag thành react-deploy:0.1 nếu muốn gắn tag 0.1 và path to dockerfile sẽ để “.” do cmd đang đứng tại project.

Lưu ý: Nếu các bạn dùng linux/ubuntu có thể sẽ gặp lỗi liên quan đến permission docker (như ảnh bên dưới).

Gặp lỗi này thì chúng ta chỉ cần cấp quyền cho docker theo câu lệnh bên dưới là được:

sudo chown -R 1000 /var/run/docker.sock

Sau khi build image xong thì hãy kiểm tra trong list image:

docker images

Ở đây chúng ta sẽ thấy có 1 image tên react-deploy với tag là latest.

Tiếp theo chúng ta sẽ run image:

docker run -d -p 80:80 — name react-deploy-container react-deploy:latest

Với câu lệnh trên thì chúng ta sẽ run 1 container từ image “react-deploy:latest” với các option:

• -d: Chạy container ở background, có nghĩa là khi chúng ta tắt cửa sổ cmd thì container vẫn sẽ chạy bình thường.
• -p: Bind port của container vào port của host theo cú pháp: [port host]:[port container]
• -–name: Tên của container, cụ thể ở đây là “react-deploy-container”.

Sau khi run image xong thì chúng ta sẽ kiểm tra xem container đã run thành công chưa nhé:

docker ps

Nếu thành công thì bạn sẽ thấy 1 container như hình và project sẽ run ở http://localhost mà không cần port 3000 nữa.

Nếu đến bước này mà các bạn không thấy container thì có thể comment dưới bài viết để mình support nhé.

Bước 4: Triển khai lên server ubuntu Đến bước này là chúng ta đã chạy thành công ở local, tiếp theo sẽ phải đưa mọi thứ lên server ubuntu. Có nhiều cách như push code lên git, copy file lên server thông qua SCP… Ở bài viết này thì mình sẽ sử dụng Docker Hub nhé.

Docker Hub là một dịch vụ do Docker cung cấp, cho phép tìm kiếm và chia sẻ các container images.

Nếu chưa có tài khoản thì bạn có thể đăng ký tài khoản tại đây: https://hub.docker.com/

Sau khi tạo tài khoản xong thì chúng ta sẽ tạo 1 repository:

Tiếp theo cần phải login docker để push image vừa build từ local lên Docker hub:

docker login -u [username] -p [password]

Gắn tag cho image cần push:

docker tag [image name]:[tag] [repository]:[tag repository]

Cụ thể ở project chúng ta vừa build sẽ là:

docker tag react-deploy:latest manhlh231/deploy-nginx:0.2

Tiếp theo sẽ push tag lên Docker hub:

docker push manhlh231/deploy-nginx:0.2

Với câu lệnh trên, chúng ta vừa push image react-deploy với tag latest ở local lên repository manhlh231/deploy-nginx với tag 0.2 trên Docker hub.

Các bạn check trên repository sẽ thấy tag 0.2 vừa push lên.

Sau khi push image thành công lên Docker hub thì chúng ta sẽ remote vào server ubuntu và pull image vừa push lên.

ssh ubuntu@103.9.211.66

Pull image:

docker pull manhlh231/deploy-nginx:0.2

Run image giống như ở bước 3:

docker run -d -p 80:80 — name reactv0.2 manhlh231/deploy-nginx:0.2

Kiểm tra kết quả tại địa chỉ của server!! http://103.9.211.66/

Nếu có thắc mắc trong quá trình triển khai, comment bên dưới để mình giải đáp thêm nhé!