Configure NGINX để host cả Backend và Frontend servers trong một con AWS EC2

Đặt vấn đề: mình muốn dùng wordpress để tận dụng giao diện CMS đã rất tối ưu cho người sử dụng, nhưng lại dùng Nextjs để build tầng Frontend.

Sơ đồ:

Một số thứ nên có để thực hành:

• Kiến thức căn bản để SSH và một con AWS Ec2, kiến thức căn bản về các câu lệnh Ubuntu, hoặc khả năng đọc tài liệu về các câu lệnh Ubundu
• Đã mua một tên miền, ví dụ mydomain.com
• Đã mua ssl dạng wildcard cho tên miền: *.mydomain.com
• Đã setup ssl cho tên miền: *.mydomain.com 
• Đã tạo thủ công một con Ec2 cho mục đích test.
• Đã có một server chạy wordpress và có REST api ở port 8000
• Đã có CMS cũng chạy ở port 8000
• Đã có frontend app chạy ở port 3001

*Lưu ý rằng bạn có thể chọn bất kì port nào mình muốn.

Ở đây mình chọn Nginx như là reverse proxy để điều phối traffic.

Chuẩn bị xong các điều kiện tiên quyết, bây giờ là bước chính để config Nginx

Bước 0:

• CD vào `/etc/nginx/sites-enabled/` và sửa file default dùng câu lệnh  sudo vim default
• Nên bảo lưu file detault hiện tại bằng câu lệnh mv default defaultbk

Bước 1: Config Nextjs Frontend webapp tại port 3001

#Nextjs FE app: remove www to avoid canonnical issue
server {
       listen 80;
       listen 443 ssl;

       # Certificate
       ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

       # Private Key
       ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

       server_name http://mydomain.com www.mydomain.com;
       return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
        listen 80;
        server_name http://mydomain.com mydomain.com www.mydomain.com;
        return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
       listen 443 ssl;
       listen [::]:443 ssl;
 
       server_name mydomain.com;
       # Certificate
       ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

       # Private Key
       ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
       location / {
               proxy_pass http://localhost:3001;
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
       }
}

Bước 2: Config REST API:

#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
        listen 80;
        server_name api.mydomain.com;
        return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
        listen 443 ssl;
        listen [::]:443 ssl;

        server_name api.mydomain.com http://api.mydomain.com;
        # Certificate
        ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

        # Private Key
        ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
        location / {
               proxy_pass http://localhost:8000;
        }
}

Bước 3: Config CMS

#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
        listen 80;
        server_name cms.mydomain.com http://cms.mydomain.com;
        return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
        listen 443 ssl;
        listen [::]:443 ssl;

        server_name cms.mydomain.com;
        # Certificate
        ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

        # Private Key
        ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
        location / {
               proxy_pass http://localhost:8000;
               proxy_set_header Host $http_host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
        }
}

File default hoàn chỉnh

#Nextjs FE app: remove www to avoid canonnical issue
server {
       listen 80;
       listen 443 ssl;

       # Certificate
       ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

       # Private Key
       ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

       server_name http://mydomain.com www.mydomain.com;
       return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
        listen 80;
        server_name http://mydomain.com mydomain.com www.mydomain.com;
        return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
       listen 443 ssl;
       listen [::]:443 ssl;
 
       server_name mydomain.com;
       # Certificate
       ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

       # Private Key
       ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
       location / {
               proxy_pass http://localhost:3001;
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
       }
}

#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
        listen 80;
        server_name api.mydomain.com;
        return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
        listen 443 ssl;
        listen [::]:443 ssl;

        server_name api.mydomain.com http://api.mydomain.com;
        # Certificate
        ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

        # Private Key
        ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
        location / {
               proxy_pass http://localhost:8000;
        }
}

#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
        listen 80;
        server_name cms.mydomain.com http://cms.mydomain.com;
        return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
        listen 443 ssl;
        listen [::]:443 ssl;

        server_name cms.mydomain.com;
        # Certificate
        ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

        # Private Key
        ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
        location / {
               proxy_pass http://localhost:8000;
               proxy_set_header Host $http_host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
        }
}

Bước cuối cùng:

• Reload và restart Nginx bằng câu lệnh sudo systemctl reload nginx và sudo systemctl restart nginx

Mình hy vọng bài viết này sẽ giúp bạn đọc hiểu cách config Nginx cho cả backend và frontend hay nhiều app trên cùng một EC2 server.