Bài này mình chia riêng cho jenkins CI-CD nhưng mà về cơ bản nó vẫn để có kiến thức phục vụ cho jenkins mà thôi. Nên chủ đích muốn bạn biết config nginx với pm2 và letsencrypt để ssl

Cách thiết lập - triển khai ứng dụng Next.js trên Nginx + PM2 với letsencrypt

2022-05-08 404 lượt xem

cài pm2

Trước khi cài pm2 thì kiểm tra bạn có cài chưa? 

$ pm2 -v 
# xem nodejs cài chưa
$ node -v 
# nginx cài chưa
$ nginx -v

Nếu chưa cài thì cài bằng lệnh sau: 

cd ~ # go to the current user's home directory
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

sudo apt update
sudo apt install nginx nodejs certbot python3-certbot-nginx

Đồng thời kích hoạt Nginx trong tường lửa ufw.

sudo ufw allow 'OpenSSH' # needed for SSH connections
sudo ufw allow 'Nginx Full' # after installing Nginx!
sudo ufw enable

Cài đặt pm2 cho cái nextjs chạy

vào thư mục share của nhà nginx 😄 

cd /var/www/html

Clone repo về:

git clone git@github.com:ThanhHungDev/FRONTEND_ESTATE.git FRONTEND_ESTATE

Tiếp cận bên trong thư mục ứng dụng:

cd FRONTEND_ESTATE

Bây giờ bạn cần cài đặt các dependency và build ứng dụng:

npm install # Install dependencies
npm run build # build our app for production

Start app của bạn với PM2

pm2 start npm --name "nextapp" -- start # start next app
# ví dụ edit port
pm2 start npm --name "FE_ESTATE" -- start -- --port 6000

Để kiểm tra trạng thái PM2, hãy chạy lệnh.

pm2 status

Lưu ý để sau này jenkins muốn cập nhật: Để cập nhật ứng dụng của bạn, hãy chạy lệnh:

npm run build # Rebuild app for production
pm2 restart nextapp # Here nextapp is your app name

 

Cài http cho web

Bạn sẽ cần trỏ miền của mình tới IP của máy chủ bằng cách sử dụng bản ghi A trong cài đặt DNS của bạn.

Chỉnh sửa tệp cấu hình Nginx.

ví dụ web mình sắp tới sẽ đưa lên sub-domain : frontend.topbds.vn thì mình giả định cấu hình như sau: 

tạo 1 file frontend.conf nội dung như sau:

server {
        listen 80;
        listen [::]:80;
        server_name frontend.topbds.vn;

    location / {
        proxy_pass http://127.0.0.1:6000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    
    # Allow location for Acme challenge - you also might need to allow 'dotfiles' in Express (see next section)
    location ~ /.well-known {
        allow all;
        proxy_pass http://127.0.0.1:6000;
        proxy_http_version 1.1;
    }    
}

Nhớ là để file này trong : /etc/nginx/sites-enabled để nginx đọc được nha.

Kiểm tra xem cú pháp nginx có đúng không:

nginx -t

nếu ok thì Khởi động lại nginx

# restart
systemctl restart nginx
# hoặc nhẹ hơn là reload 
systemctl reload nginx 

Lúc này xem được web bạn đã chạy được chưa rồi đó: gõ lên trình duyệt cái web nhà bạn:

http://frontend.topbds.vn

nếu ra được thì là chạy được http rồi! cài thêm ssl thôi

Thiết lập letsencrypt với certbot

Chạy lệnh sau để certbot tạo chứng chỉ cho miền của bạn:

certbot certonly --nginx -d frontend.topbds.vn

Khúc này nếu bạn nào cài đặt theo hướng letsencrypt cũ thì cứ làm theo cách của bạn nhé. Mình chỉ gợi ý cách làm thôi.

Nếu bạn cần cài ssl với nodejs express thì có thể dùng lệnh này: 

certbot certonly --manual

Tham khảo link này: Node + Express + LetsEncrypt : Generate a free SSL certificate and run an HTTPS server in 5 minutes or less .

được file thế này:

Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/frontend.topbds.vn/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/frontend.topbds.vn/privkey.pem

Sửa lại file nginx: 

upstream frontend.topbds.vn {
    server 127.0.0.1:6000;
}
server {
    #listen 80;
    #listen [::]:80;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    
    ssl_certificate     /etc/letsencrypt/live/frontend.topbds.vn/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/frontend.topbds.vn/privkey.pem;
    
    include snippets/ssl-params.conf;

    server_name frontend.topbds.vn;
    # Log files for Debugging
    access_log /var/log/nginx/frontend-topbds-access.log;
    error_log /var/log/nginx/frontend-topbds-error.log;

    location / {
        proxy_pass http://127.0.0.1:6000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

sau đó kiểm tra chạy ok chưa:

nginx -t 
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful 
# nếu thấy chữ ok như trên thì gọi lệnh reload như sau: 
systemctl restart nginx 

Nãy giờ chả liên quan gì đến jenkins cả. Vậy chúng ta sẽ setting 1 project jenkins freestyle để build tự động nextjs. Let's go!

Tạo Jenkins

Trong các 2 bài viết trước về jenkins mình đã nói khá kỹ về freestyle nên bài này mình hướng dẫn nhanh thôi. 

Tạo project:

Ở phần ‘General’, bạn có thể khỏi điền cũng được.

thêm github action hook khi bạn push code và xoá đi những thứ không cần thiết khi được trigger build.

Thêm 1 cái command để mình có thể execute code ví dụ như test, build thử, đưa code lên deploy qua ssh, ....  ở đây. Nói chung khúc này rất là quan trọng. và bạn phải rành về terminal thì mới tự giải quyết tốt được.

Khúc này sẽ viết command mà khi mình push code lên thì tự động jenkins sẽ clone về server cho mình. Mình thoả sức muốn làm gì làm 😄 y như quá trình tiền sử lý về testing unit hay là build code chẳng hạn, cuối cùng nếu thấy ok rồi mới cho đưa qua server deploy chính.

Thì ở đây quá trình  testing unit hay là build code mình ngắn gọn là không làm gì hết mà chỉ có ssh qua server khác để clone về source về rồi build thôi 😄 

Đầu tiên để ssh được thì trong linux có 1 trò : 

ssh -i <file> <user>@<your_ip>
# Ví dụ: 
ssh -i ~/.ssh/id_rsa ubuntu@109.63.126.160  

Vậy: Tại tab Build, paste đoạn code sau:

ssh -i /home/jenkins/<file_id_rsa>.pem <user_edit_pls>@x.x.x.x << EOF
cd /var/www/<FOLDER_YOUR_PROJECT>
git pull origin release/staging
yarn install
yarn run build
pm2 reload nextapp # nextapp là tên bạn đặt khi bạn tạo app với pm2 start ... 
# ví dụ: pm2 reload FE_ESTATE
 

cuối cùng bấm save

Xong! Chúc các bạn thành công!

Cuối cùng, Note: 
dành cho bạn nào muốn tạo file .env vì gitignore nó chặn đẩy lên thì đọc bài này: 

https://stackoverflow.com/questions/63250979/how-to-store-env-file-in-jenkins-workspace

chủ đề