Bạn có 1 trang web NextJs, bạn để nó ở local, nhưng bạn muốn deploy lên server nào đó cho mọi người cùng chiêm ngưỡng mà không biết làm thế nào. Bài viết sau sẽ cho bạn cái nhìn tổng quan và tiến trình cài đặt để đưa 1 trang web lên server

NVM, PM2, Nginx

• Đầu tiên thì chúng ta cùng đi qua 1 số thứ cần cài để chuẩn bị cho việc deploy
  • NVM: Node Version Manager là một công cụ, phần mềm dùng để quản lý các version Node.js cài đặt trên máy.

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    

    source ~/.bashrc
    

  • PM2: Là một daemon process manager, nó giúp bạn quản lý các tiến trình trong ứng dụng của bạn, giúp cho application của bạn luôn chạy, mình thì hay gọi là luôn ở trạng trái "sống".

    npm i pm2 -g
    

  • Nginx: Phát âm là "engine-ex" là một phần mềm mã nguồn mở dùng để phục vụ web, reverse proxy, caching, cân bằng tải, và nhiều hơn nữa

    sudo apt-get install -y nginx
    

Setup

• Đối với phía local , nơi chứa code trên máy bạn
• Đầu tiên thì ta cần tạo mới 1 ứng dụng Nextjs và đẩy code lên Github repo

  npx create-next-app
  cd my-app
  

• Tiếp theo thì ta cần generate pm2 ecosystem file

  pm2 ecosystem
  

• Sau khi generate thì ta sẽ thay thế các giá trị tương ứng của mình vào nhé và sau khi xong thì đẩy nó lên github

  module.exports = {
  apps: [{
      script: 'npm start'
  }],
  
  deploy: {
      production: {
      key: 'key.pem',
      user: 'ubuntu',
      host: 'SSH_HOSTMACHINE',
      ref: 'origin/main',
      repo: 'GIT_REPOSITORY',
      path: '/home/ubuntu',
      'pre-deploy-local': '',
      'post-deploy': 'source ~/.nvm/nvm.sh && npm install && npm run build && pm2 reload ecosystem.config.js --env production',
      'pre-setup': '',
      'ssh_options': 'ForwardAgent=yes'
      }
  }
  };
  

SSH to server

• Đầu tiên thì ta cần thay đổi quyền pem rồi coppy tệp pem vào thư mục gốc của dự án.

  chmod 400 key.pem
  

• SSH to server

  ssh -i key.pem ubuntu@[IP_ADDRESS]
  

• Trên server
  • Cài Node, PM2, Nginx

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    source .bashrc
    nvm install --lts
    npm i -g pm2
    sudo apt-get update
    sudo apt-get install -y nginx
    sudo service nginx restart
    

  • Cấu hình Nginx

    sudo vim /etc/nginx/conf.d/my-app.conf
    

  • Chèn cấu hình

    server {  
        listen 80;  
        server_name IP_ADDRESS;
        
        location / {  
            proxy_pass http://127.0.0.1:3000/;
        }  
    }
    

  • Restart Nginx

    sudo service nginx restart
    

Deployment Options

• SSH Agent Forwarding
  • Trên local:
    • Chỉnh sửa cấu hình SSH

      vim ~/.ssh/config
      

    • Chèn IP_ADDRESS vào

      Host [IP_ADDRESS]
          ForwardAgent yes
      

    • Chạy ssh-add

      ssh-add
      

    • SSH to server

      ssh -i key.pem ubuntu@[IP_ADDRESS]
      

  • Trên server
    • Xác thực kết nối với github

      ssh -T git@github.com
      

Deployment

• Trên local:
  • Chạy pm2 setup

  pm2 deploy production setup
  

  • Chạy deployment

  pm2 deploy production
  

Kết luận

Hy vọng, nó sẽ là 1 thông tin bổ ích giúp mọi người trong quá trình làm việc.

Cảm ơn mọi người đã đọc bài viết, hẹn gặp lại !

Tài liệu tham khảo

• https://www.fullstackbook.com/guides/how-to-deploy-nextjs-with-pm2