Deploy Front-end

Set up nginx

Nginx hoạt động như một máy chủ web chịu trách nhiệm phản hồi các yêu cầu HTTP/HTTPS từ khách hàng (trình duyệt web) và cung cấp nội dung web. Bạn có thể sử dụng Nginx để phục vụ các trang web tĩnh (ví dụ: HTML, CSS, JavaScript) hoặc động (ví dụ: kết hợp với các ứng dụng web như Ruby on Rails, Django).

Để set up nginx thực hiện các bước sau:

• Kết nối vào VPS của dự án. (Có thể xem lại bài trước)
• Install nginx ở VPS bằng cách chạy câu lệnh sau:
  shellCopy

  sudo apt install nginx

  Nếu nó hỏi [Y/n] cứ chọn Y hết nha
• Để check version của nginx đã tải về chạy lệnh
  shellCopy

  nginx -v

• Set up nơi chứa code Front end
  shellCopy

  mkdir /var/www/becode

• Cấp quyền truy cập cho tất cả mọi người
  shellCopy

  chmod 755 -R /var/www/becode

• Đinh danh quyền sở hữu cho user
  shellCopy

  chown -R root /var/www/becode

• Config nginx cho dự án bằng chạy câu lệnh sau:
  shellCopy

  code ~/etc/nginx/sites-available/becode

  Đổi becode thành tên dự án của các bạn. Sau khi chạy câu lệnh sẽ hiển thị ra 1 file mới. Mình sẽ config trong file này
• Copy đoạn code này vào file vừa mở lên.
  luaCopy

  server {
  	listen 80;
  	listen [::]:80;
  
  	root /var/www/becode;
  	index index.html;
  }

• Gỡ bỏ config mặc định
  shellCopy

  unlink /etc/nginx/sites-enabled/default

• Config nginx mới
  shellCopy

  ln -s /etc/nginx/sites-available/becode /etc/nginx/sites-enabled

  Nhớ đổi becode thành tên dự án của các bạn.
• Restart nginx để apply config mới
  shellCopy

  systemctl reload nginx

Truy cập vào source code Front-end của dự án các bạn và làm theo các bước sau:

• Ở root directory, tạo 1 file có tên deploy.sh
• Trong file deploy.sh tạo đoạn code sau:
  shellCopy

  echo "Building app..."
  npm run build
  echo "Deploy files to server..."
  scp -r -i ~/Desktop/becode.vn dist/* root@143.198.214.247:/var/www/becode/
  echo "Done!"

• Cấp quyền chạy script
shellCopy

chmod u+x deploy.sh

• Và sau này mỗi lần cần deploy chỉ cần chạy câu lệnh sau ở termial
  shellCopy

  ./deploy.sh