Deploy React App với Apache Httpd Server Container (Dockerize)

Mở đầu

Chào mọi người, chuyện là ở công ty, mình được giao deploy 1 dự án có thành phần Front end module được code bằng React App. Thông thường mình sẽ deploy nó với Nginx container như cách truyền thống, tuy nhiên lần này, dự án được 1 anh Senior của công ty (hiện đã out project) đề xuất trước với khách hàng dùng Apache Server để triển khai. Và đến hạn release bọn mình cũng không thể đề xuất thay đổi được.

Để giảm effort cho việc tạo tài liệu Deployment Guideline cho khách, cũng như giảm độ phức tạp trong quá trình deploy thông thường (cài đặt NodeJS, cài đặt Apache Server, npm install, npm build.... ). Mình đã đề xuất deploy system dưới dạng containers nhưng vẫn dùng apache server để host React App dưới dạng static web app.

Cấu trúc dự án

Dự án gồm 4 modules chính:

Microsoft SQL Server (customer side DB).
MySQL (local DB).
Spring Boot API Server.
ReactJS Application.

Files

Phần source code của dự án, mình chia các modules thành các folder riêng để quản lí:

└── PROJECT
	├── frontend-demo
	├── backend	
	├── db
		├── mysql
		└── mssql
	├── docker-compose.yml
	└── .....

React App File structures

Bên trong thư mục frontend-demo, mình tạo riêng 2 file cấu hình phục vụ cho việc triển khai Apache Httpd Server.

httpd.conf
.htaccess

└── frontend-demo
	├── public
	├── src
	├── index.html
	├── package.json
	├── vite.config
	├── Dockerfile
	├── httpd.conf
	├── .htaccess
	└── .....

httpd.conf

Tương đối giống với nginx.conf file, nếu bạn đã làm việc với Nginx rồi thì với Apache cũng tương tự. Chúng ta custom cấu hình Apache server bằng việc overwrite file httpd.conf này. Cụ thể, mọi người có thể overwrite lại các phần quan trọng như sau:

Bên trong httpd.conf, tìm đến và uncomment dòng LoadModule sau để enable mod_rewrite, mặc định mod_rewrite được disable bởi Apache.

#LoadModule rewrite_module modules/mod_rewrite.so 			#xóa dấu '#' đi

Tiếp tục chỉnh sửa dòng AllowOverride sau, đổi từ None sang chế độ All để cho phép ta override cấu hình.

DocumentRoot "/usr/local/apache2/htdocs"
<Directory "/usr/local/apache2/htdocs">
	Options Indexes FollowSymLinks
	AllowOverride All #None -> All
	Require all granted
</Directory>

Save cấu hình này lại, để dành lúc chạy docker build, file này sẽ ghi đè nội dung xuống file httpd.conf của Apache container.

.htaccess

.htaccess (hypertext access) được dùng để cấu hình thêm các tính năng mà bạn mong muốn cho Apache Server. Với nó, bạn có thể cấu hình rewrite URL, password-protect directories, enable hotlink protection, disallow 1 IP nào đó, thay đổi website zone hoặc path đến file index.html ở directiory khác và còn nhiều hơn thế nữa.

Save file với nội dung sau:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

Đố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 cấu hình như trên apache sẽ tự động truyền path cũng như param đến React App theo logic router đã code. Nếu không config mục này, Apache sẽ đi tìm các pages tương xứng với url và hiển thị trang trắng - error mặc định.

Dockerfile

Sau khi đã chuẩn bị 2 files: httpd.conf và .htaccess xong xuôi. Chúng ta cần soạn thảo lại nội dung Dockerfile bên trong folder Frontend code như sau:

FROM node:18-alpine as build-stage
WORKDIR /app
COPY package.json /app/package.json
RUN npm i

COPY . /app/
ARG VITE_BASE_URL
ENV VITE_BASE_URL $VITE_BASE_URL
RUN npm run build

# production stage with Apache httpd
FROM httpd:2.4.57-alpine as production-stage
COPY --from=build-stage /app/httpd.conf /usr/local/apache2/conf/httpd.conf
COPY --from=build-stage /app/dist /usr/local/apache2/htdocs/
COPY --from=build-stage /app/.htaccess /usr/local/apache2/htdocs/

Giải thích: Với cấu hình trên ta đã thực hiện

Copy ghi đè httpd.conf của ta vào file cấu hình của Apache tại directory: /usr/local/apache2/conf/httpd.conf
Copy file .htaccess vào directory /usr/local/apache2/htdocs/

File index.html sau khi build code cũng ở tại directory này, Apache sẽ đọc trực tiếp file index.html và truy cập các file trong thư directory trên.

VITE_BASE_URL là biến môi trường được thiết lập dynamic, tại đây nó là giá trị backend API server endpoint dùng để fetch API.

Apache container mặc định đã được thiết lập start Apache server ngay khi khởi chạy container qua lệnh httpd -D FOREGROUND . Chúng ta không cần chỉ dẫn thêm run command trong Dockerfile như Nginx.

docker-compose.yml

Cuối cùng, để khởi chạy quá trình deploy cả hệ thống, ta biên soạn 1 file docker-compose.yml để start cùng lúc các services với nhau, tại file trên mình khai báo trực tiếp URL backend, folder source code, port mapping,...

version: '3.8'
services:
	mysql: ...
	mssql: ...
	backend: ...
	frontend:
		container_name: frontend
		build:
			context: ./frontend-demo
			args:
				- VITE_BASE_URL=http://localhost:8080
		ports:
			- 80:80
		depends_on:
			- backend

Deploy commands

Để deploy cả system gồm 4 servies, ta mở terminal tại thư mục PROJECT - nơi chứa file docker-compose.yml và nhập lệnh cmd sau: docker compose up -d hoặc docker-compose up -d

docker-compose đã được thiết lập để khởi chạy theo thứ tự MSSQL -> MySQL -> Backend-> Frontend

Để deploy chạy từng service một (ex: only frontend), ta nhập lệnh: docker compose up frontend -d hoặc mở terminal tại folder frontend, chạy lệnh docker build -t frontend --build-arg VITE_BASE_URL=http://localhost:8080 . sau đó docker run --name frontend -p 80:80 -d frontend