Deploy ứng dụng NextJS sử dụng PM2, Nginx

Khác với ứng dụng ReactJS, NextJS là framework bao gồm cả frontend và backend, do đó cách build sẽ khác một chút so với ReactJS. Khi chạy yarn build, bản build sẽ bao gồm cả 3 thành phần:

1. Server: server-side renders at runtime (uses getInitialProps or getServerSideProps)

2. Static: automatically rendered as static HTML (uses no initial props)

3. SSG: automatically generated as static HTML + JSON (uses getStaticProps)

Trước hết, bạn cần cài đặt Nodejs và Nginx lên VPS của mình, bạn có thể tham khảo tại đây

1. Setup Deploy key trên Github

Để VPS có thể pull code, bạn cần cấp quyền cho ssh key sẽ dùng để pull code.

Tạo ssh key trên VPS mới nếu bạn chưa có:

ssh-keygen -t ed25519 -C "your_email@example.com"

Trên Github, trong project của bạn, vào phần Setting → Deploy keys → Add deploy key, nhập Title, phần Key bạn sẽ nhập public key bạn vừa tạo: `cat ~/.ssh/my-key.pub`

Sau đó đăng ký ssh key này với ssh-agent trên VPS:

eval `ssh-agent -s`
ssh-add ~/.ssh/my-key

2. Clone project

Clone repo bằng ssh (không phải https)

cd /root
git clone git@github.com:username/your-repo.git

Sau đó thêm biến môi trường vào project nếu bạn cần. Sau đó build project:

yarn 
yarn build

3. Chạy project với pm2

Tạo file config cho pm2 trong project của bạn, đặt tên là `ecosystem.config.js`:

module.exports = {
  apps: [
    {
      name: 'your-repo',
      script: 'npm',
      args: 'run start',
      exp_backoff_restart_delay: 100,
    },
  ],
};

Sau đó chạy project của bạn trên port 3000:

pm2 start ecosystem.config.js

Kiểm tra log pm2:

pm2 log your-repo

Nếu log có dạng này tức là project đã chạy thành công:

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /root/your-repo/.env.local

4. Config Nginx

Để có thể truy cập từ domain, bạn cần sử dụng nginx để chuyển các request từ cổng 3000 về cổng 80. Tạo file nginx config cho project của bạn

nano /etc/nginx/con.f/your-repo.conf

với nội dung:

server {
    # Listen HTTP
    listen 80;
    listen [::]:80;
    server_name your-domain.com;

    client_max_body_size 100M;

    location / {
        proxy_pass http://localhost:3000;
    }
}

Project của mình sử dụng Cloudflare để bảo mật SSL, do đó mình chỉ khai báo listen trên cổng 80.

Restart nginx và vào domain của bạn xem mọi thứ đã chạy thành công chưa :D

sudo systemctl restart nginx