Auto deploy projects với GitHub Actions – sử dụng ssh-action

GitHub Actions release phiên bản đầu tiên vào ngày 13 tháng 11 năm 2019, trước thời gian đó các bản beta được liên tục cập nhật.

GitHub Actions là gì?

GitHub Actions là event-driven(theo hướng sự kiện), có nghĩa là bạn có thể chạy một loạt lệnh sau khi một sự kiện cụ thể đã xảy ra. GitHub Actions giúp bạn tự động hóa các tác vụ trong vòng đời phát triển phần mềm của mình. 

Bạn có thể xem chi tiết về GitHub Actions tại đây: https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions

Trong bài viết này mình sử dụng một project NextJS nhỏ để demo auto deploy với github actions. Việc sử dụng GitHub Actions là một trong nhiều cách để auto deploy projects lên server của bạn.

Yêu cầu

1. Đầu tiên là có server đã nhé (lưu ý ssh-action chỉ hỗ trợ Linux)

Các bạn có thể đăng ký sử dụng server ở Vultr hoặc DigitalOcean bằng link dưới đây và nhận 100$ miễn phí, sử dụng trong thời gian 30 ngày để trải nghiệm.

Mình hiện tại cũng đang sử dụng Vultr.

Vultr Referral Badge
DigitalOcean Referral Badge

2. Cài đặt Git, NodeJs, Nginx cho server và chúng ta sử dụng pm2 để quản lý ứng dụng NodeJS.

3. Nên sử dụng connect với SSH để trong trường hợp bạn để repo của bạn private thì vẫn có thể pull, clone bình thường.

Các bước để connect với SSH tại đây:

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh

Cấu hình Github action cho projects

GitHub Actions sử dụng cú pháp YAML để xác định các sự kiện, công việc và các step. Các tệp YAML này được lưu trữ trong project của bạn, trong thư mục có tên: /.github/workflows/

  1. Trong repo của bạn, hãy tạo thư mục .github/workflows/ để lưu trữ các tệp quy trình làm việc của bạn
  2. Trong thư mục .github/workflows/, hãy tạo một tệp mới bất kỳ với đuôi .yml, ở đây mình đặt tên là auto-deploy-action.yml và thêm đoạn mã sau:
name: Auto deploy

on:
  push:
    branches:
      - main
      - master

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }} #hostname of server
          username: ${{ secrets.USERNAME }} #username login to server
          password: ${{ secrets.PASSWORD }} #password login to server
          port: ${{ secrets.PORT }} #port of server - often port is 22
          script: | # run with multiple script
            cd /home/
            git clone [email protected]:trongcong/demo-auto-deploy.git
            cd demo-auto-deploy
            git pull
            printf "${{ secrets.ENV }}" > .env.production
            yarn
            yarn build
            pm2 start app-pm2.json

Trong đoạn code trên:

  • name: Đây là tên của công việc khi nó sẽ xuất hiện trong tab Actions của kho lưu trữ GitHub.
  • on: Đây là chỉ định sự kiện tự động kích hoạt tệp công việc. Ví dụ này sử dụng sự kiện push, để các công việc chạy mỗi khi ai đó push một thay đổi vào kho lưu trữ. Và chỉ thực hiện khi push lên branch main hoặc master.
  • jobs: Đây là nhóm tất cả các công việc chạy trong file auto-deploy-action.yml
    • deploy: Định nghĩa tên của job được lưu trữ trong phần jobs.
    • runs-on: Định cấu hình công việc để chạy trên Ubuntu Linux. Điều này có nghĩa là công việc sẽ thực thi trên một máy ảo mới do GitHub lưu trữ.
    • steps: Nhóm lại tất cả các bước với nhau trong job deploy. Mỗi mục được lồng trong phần này là một hành động hoặc lệnh shell riêng biệt.
      • uses: appleboy/[email protected] – Bước này sử dụng appleboy/[email protected] action để thực hiện các hành động được chỉ định.
      • host, password, username, port: Đây là các biến được yêu cầu bởi ssh-action, các biến này được dấu trong phần secrets settings của repo.
      • script: Đây là các lệnh được thực thi bởi cmd/terminal

Ở dòng git clone [email protected]:trongcong/demo-auto-deploy.git các bạn có thể comment lại ở những lần push sau nhé, vì trong lần chạy đầu tiên thì đã clone repo về và tạo folder rồi. Nên lúc chạy ở những lần sau nó sẽ báo lỗi: 'demo-auto-deploy' already exists and is not an empty directory.

Các bạn có thể tìm hiểu thêm về ss-action tại đây.

Actions secrets

Cũng trong đoạn code trên các bạn có thể thấy các biến như ${{ secrets.HOST }}, ${{ secrets.USERNAME }}, ${{ secrets.PASSWORD }}.

Secrets là các biến môi trường được mã hóa mà bạn không muốn public cho người khác thấy. Bạn có thể thêm các biến này trong mục Settings của repository.

Để sử dụng Secrets trong file .yml actions, bạn gọi nó bằng cú pháp như sau:

${{ secrets.NAME_SECRET }}

NAME_SECRET chính là tên bạn đặt cho secret trong phần cài đặt.

Cấu hình cho Nginx để chạy web server

Mình sẽ sử dụng Nginx proxy reverse để làm web server cho project này.

Mặc định project NextJs sẽ chạy port 3000 (localhost:3000), bạn cũng có thể thay đổi port này trong file package.json.

Config của Nginx như sau:

Ở chỗ server_name bạn có thể thay đổi theo domain hoặc ip server của bạn


server {
	listen 80;
	listen [::]:80;

	server_name example.com;

	location / {
		proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
	}
}

Project NextJS này mình sử dụng pm2 để quản lý, bạn có thể xem thêm chi tiết về pm2 tại đây.

Sau khi setup ban đầu xong, bạn push lên rồi vào tab Actions sẽ thấy các jobs đang chạy như hình dưới.

Auto deploy projects với GitHub Actions - sử dụng ssh-action
Auto deploy projects với GitHub Actions – sử dụng ssh-action

Đây là giao diện demo của project

Auto deploy projects với GitHub Actions - sử dụng ssh-action
Auto deploy projects với GitHub Actions – sử dụng ssh-action

Bạn có thể tham khảo repo của mình tại đây: https://github.com/trongcong/demo-auto-deploy

WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block Gutenberg Block Attributes Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn 9 ứng dụng hữu ích cho Developers CSS Gap Space với Flexbox

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.