Nội dung
- Yêu cầu - Bước 1 - Tạo ứng dụng React bằng create-react-app - Bước 2 - Cài đặt folder và cấu hình Nginx - Bước 3 - Cài đặt và cấu hình Webhooks - Bước 4 - Cấu hình thông báo GitHub - Bước 5 - Viết kịch bản triển khai / tái triển khai - Bước 6 - Thêm thông báo Slack - Kết luận

Thứ tư, 20/06/2018 | 00:00 GMT+7

Triển khai các ứng dụng React với Webhooks và Slack trên Ubuntu 16.04

Khi nhà phát triển áp dụng các thay đổi liên tục đối với một ứng dụng, hệ thống triển khai với webhook có thể hợp lý hóa việc phát triển, đặc biệt là cho các group . Việc tích hợp thông báo Slack về các thay đổi mã vào quy trình làm việc của group cũng có thể hữu ích nếu một phần của group dựa vào phần mềm back-end như API.

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng React với gói npm create-react-app npm create-react-app . Gói này đơn giản hóa công việc khởi động dự án React bằng cách chuyển ngữ cú pháp và hợp lý hóa công việc với các phụ thuộc và các công cụ tiên quyết. Sau khi thêm mã ứng dụng của bạn vào repository GitHub, bạn sẽ cấu hình Nginx để phục vụ các file dự án cập nhật của bạn . Sau đó, bạn sẽ download và cài đặt web server hook và cấu hình GitHub để giao tiếp với nó khi mã của bạn được sửa đổi. Cuối cùng, bạn sẽ cấu hình Slack hoạt động như một web server hook khác, server này sẽ nhận được thông báo khi một triển khai thành công được kích hoạt.

Cuối cùng, hệ thống triển khai mà bạn đang xây dựng trong bài viết này sẽ giống như sau:

Triển khai mẫu

Đoạn video ngắn này cho thấy một commit trống và đẩy đến repository GitHub, nơi kích hoạt xây dựng ứng dụng và thông báo trong Slack.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

Server Ubuntu 16.04 mà bạn có thể cài đặt theo hướng dẫn Cài đặt server ban đầu với Ubuntu 16.04 . Sau khi làm theo hướng dẫn này, bạn sẽ có một account user không phải root với các quyền sudo.
Nginx được cài đặt trên server của bạn theo hai bước đầu tiên của Cách cài đặt Nginx trên Ubuntu 16.04 .
Git được cấu hình trên cả máy local và server của bạn. Bạn có thể tìm thấy hướng dẫn cài đặt và cấu hình Git trong hướng dẫn này để bắt đầu với Git .
Node.js và npm được cài đặt trên máy local và server của bạn. Đối với server của bạn, hãy làm theo hướng dẫn về cách cài đặt Node.js từ PPA trong Cách cài đặt Node.js trên Ubuntu 16.04 . Trên máy local của bạn , bạn có thể làm theo hướng dẫn cài đặt của dự án .
Đã cài đặt sợi trên server của bạn theo hướng dẫn chính thức về cài đặt sợi .
Quyền cấu hình Slack và các kênh riêng lẻ để nhận thông báo. Bạn có thể tìm thêm thông tin về role và quyền trong tài liệu về quyền của Slack .

Bước 1 - Tạo ứng dụng React bằng create-react-app

Trước tiên, hãy xây dựng ứng dụng mà ta sẽ sử dụng để kiểm tra các webhook của ta với create-react-app react create-react-app . Sau đó, ta có thể tạo một repository GitHub và đẩy mã dự án vào đó.

Trên máy local của bạn, thêm module nút create-react-app vào repository chung của bạn và làm cho lệnh create-react-app khả dụng trong môi trường shell của bạn:

sudo npm install -g create-react-app

Tiếp theo, chạy create-react-app để tạo một dự án có tên do-react-example-app :

create-react-app do-react-example-app

Điều hướng đến folder do-react-example-app :

cd do-react-example-app

Với nano hoặc editor yêu thích của bạn, hãy mở file package.json :

nano package.json

Tệp sẽ trông như thế này:

~ / do-react-example-app / package.json

 {   "name": "do-react-example-app",   "version": "0.1.0",   "private": true,   "dependencies": {     "react": "^16.2.0",     "react-dom": "^16.2.0",     "react-scripts": "1.0.17"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test --env=jsdom",     "eject": "react-scripts eject"   } }

Tệp package.json bao gồm các tập lệnh sau:

start : Tập lệnh này chịu trách nhiệm khởi động version phát triển của ứng dụng. Nó chạy một server HTTP phục vụ ứng dụng.
build : Tập lệnh này chịu trách nhiệm tạo version production của ứng dụng. Bạn sẽ sử dụng tập lệnh này trên server .
test : Tập lệnh này chạy các kiểm tra mặc định được liên kết với dự án.
eject : Tập lệnh này là một tính năng nâng cao của gói create-react-app . Nếu nhà phát triển không hài lòng với môi trường xây dựng mà gói cung cấp, có thể 'loại bỏ' ứng dụng, điều này sẽ tạo ra các tùy chọn không khả dụng (bao gồm những thứ như bộ chuyển mã CSS tùy chỉnh và công cụ xử lý JS).

Đóng file khi bạn kiểm tra xong mã.

Tiếp theo, hãy tạo một repository GitHub cho dự án. Bạn có thể làm theo hướng dẫn này về cách tạo repository GitHub để được hướng dẫn. Lưu ý về nguồn root của repository (tức là URL GitHub của nó).

Quay lại folder do-react-example-app , khởi tạo repository bằng git :

git init

Tiếp theo, thêm nguồn root từ xa với URL GitHub của bạn:

git remote add origin your-github-url

Giai đoạn tất cả các file trong folder dự án:

git add .

Commit với họ:

git commit -m "initial commit"

Và đẩy chúng vào repository :

git push origin master

Để biết thêm thông tin về cách tạo repository GitHub và khởi tạo các ứng dụng hiện có bằng git , hãy xem tài liệu của GitHub.

Khi ta đã hoàn thành cài đặt repository , ta có thể chuyển sang chỉ định chi tiết cấu hình trên server của bạn .

Bước 2 - Cài đặt folder và cấu hình Nginx

Với repository có sẵn, giờ đây có thể lấy mã ứng dụng từ GitHub và cấu hình Nginx để phục vụ ứng dụng.

Đăng nhập vào server của bạn, vào folder chính và sao chép repository của bạn:

cd ~ 
git clone your-github-url

Đi tới dự án nhân bản:

cd do-react-example-app

Để tạo folder xây dựng trong dự án và các file để Nginx phân phát, bạn cần chạy lệnh yarn build . Thao tác này chạy tập lệnh xây dựng cho dự án, tạo folder xây dựng. Thư mục này bao gồm, trong số những thứ khác, index.html , file JavaScript và file CSS. Lệnh yarn sẽ download tất cả các module nút cần thiết cho dự án của bạn:

yarn && yarn build

Tiếp theo, hãy tạo một softlink trong folder /var/www/ đến folder ~/do-react-example-app . Điều này sẽ giữ ứng dụng trong folder chính của ta , đồng thời cung cấp cho Nginx để phân phát từ folder /var/www :

sudo ln -s ~/do-react-example-app /var/www/do-react-example-app

Lưu ý điều này liên kết đến folder dự án thay vì folder xây dựng, folder này thay đổi thường xuyên hơn. Việc tạo liên kết này có thể đặc biệt hữu ích trong các tình huống mà bạn đang triển khai các version mới của ứng dụng: bằng cách tạo liên kết đến version ổn định, bạn đơn giản hóa quá trình swap nó sau này, khi bạn triển khai các version bổ sung. Nếu có sự cố, bạn cũng có thể hoàn nguyên về version trước đó theo cách tương tự.

Một số quyền nên được đặt trên softlink để Nginx có thể phân phối nó đúng cách:

sudo chmod -R 755 /var/www

Tiếp theo, hãy cấu hình khối server Nginx để phục vụ folder xây dựng. Tạo cấu hình server mới bằng lệnh :

sudo nano /etc/nginx/sites-available/test-server

Sao chép cấu hình sau, thay thế your_server_ip_or_domain bằng IP hoặc domain của bạn (nếu có):

/ etc / nginx / sites-available / test-server

server {         listen 80;          root /var/www/do-react-example-app/build;         index index.html index.htm index.nginx-debian.html;          server_name your_server_ip_or_domain;          location / {                 try_files $uri /index.html;         } }

Các chỉ thị trong file này bao gồm:

listen : Thuộc tính cấu hình cổng lắng nghe của server .
root : Đường dẫn đến folder mà từ đó Ngnix sẽ phân phát file .
index : Tệp mà server cố gắng phục vụ trước tiên. Nó sẽ cố gắng phân phát các file nào sau đây từ folder /var/www/ do-react-example-app /build index.nginx-debian.html /var/www/ do-react-example-app /build : index.html , index.htm , index.nginx-debian.html , với mức độ ưu tiên từ đầu tiên đến cuối cùng.
server_name : Tên domain hoặc IP của server .

Tiếp theo, tạo một softlink trong folder sites-enabled :

sudo ln -s /etc/nginx/sites-available/test-server /etc/nginx/sites-enabled/test-server

Thao tác này sẽ yêu cầu Nginx bật cấu hình khối server từ folder sites-available trên sites-available .

Kiểm tra xem cấu hình có hợp lệ không:

sudo nginx -t

Cuối cùng, khởi động lại Nginx để áp dụng cấu hình mới:

sudo systemctl restart nginx

Với các chi tiết cấu hình này, ta có thể chuyển sang cấu hình webhook.

Bước 3 - Cài đặt và cấu hình Webhooks

Webhook là các server HTTP đơn giản có các điểm cuối có thể cấu hình được gọi là hook . Khi nhận được yêu cầu HTTP, web server hook thực thi mã có thể tùy chỉnh tuân theo một tập hợp các luật có thể cấu hình . Đã có nhiều web server hook được tích hợp vào các ứng dụng trên internet, bao gồm cả Slack.

Việc triển khai web server hook được sử dụng rộng rãi nhất là Webhook , được viết bằng Go. Ta sẽ sử dụng công cụ này để cài đặt web server hook của bạn .

Đảm bảo rằng bạn đang ở trong folder chính trên server của bạn :

cd ~

Sau đó download webhook :

wget https://github.com/adnanh/webhook/releases/download/2.6.6/webhook-linux-amd64.tar.gz

Extract nó:

tar -xvf webhook-linux-amd64.tar.gz

Làm cho file binary có sẵn trong môi trường của bạn bằng cách chuyển nó vào /usr/local/bin :

sudo mv webhook-linux-amd64/webhook /usr/local/bin

Cuối cùng, xóa các file đã download :

rm -rf webhook-linux-amd64*

Kiểm tra tính khả dụng của webhook trong môi trường của bạn bằng lệnh :

webhook -version

Đầu ra sẽ hiển thị version webhook :

Output
webhook version 2.6.5

Tiếp theo, hãy cài đặt scripts folder hooks và scripts trong folder /opt , nơi thường chứa các file cho các ứng dụng của bên thứ ba. Vì folder /opt thường được sở hữu bởi root , ta có thể tạo các folder có quyền root và sau đó chuyển quyền sở hữu cho $USER local .

Đầu tiên, hãy tạo các folder :

sudo mkdir /opt/scripts 
sudo mkdir /opt/hooks

Sau đó, chuyển quyền sở hữu cho $USER của bạn:

sudo chown -R $USER:$USER /opt/scripts 
sudo chown -R $USER:$USER /opt/hooks

Tiếp theo, hãy cấu hình server webhook bằng cách tạo file hooks.json . Với nano hoặc trình soạn thảo yêu thích của bạn, hãy tạo file hooks.json trong folder /opt/hooks :

nano /opt/hooks/hooks.json

Để webhook được kích hoạt khi GitHub gửi yêu cầu HTTP, file của ta cần một mảng luật JSON. Các luật này bao gồm các thuộc tính sau:

{     "id": "",     "execute-command": "",     "command-working-directory": "",     "pass-arguments-to-command": [],     "trigger-rule": {} }

Cụ thể, các luật này xác định các thông tin sau:

id : Tên của điểm cuối mà web server hook sẽ phục vụ. Ta sẽ gọi đây redeploy-app .
execute-command : Đường dẫn đến tập lệnh sẽ được thực thi khi hook được kích hoạt. Trong trường hợp của ta , đây sẽ là tập lệnh redeploy.sh nằm trong /opt/scripts/redeploy.sh .
command-working-directory : Thư mục làm việc sẽ được sử dụng khi thực hiện lệnh. Ta sẽ sử dụng /opt/scripts vì đó là nơi chứa redeploy.sh .
pass-arguments-to-command : Các tham số được truyền tới tập lệnh từ yêu cầu HTTP. Ta sẽ chuyển một thông báo commit , tên bộ đẩy và id commit từ tải trọng của yêu cầu HTTP. Thông tin tương tự này cũng sẽ có trong tin nhắn Slack của bạn.

Tệp /opt/hooks/hooks.json phải bao gồm các thông tin sau:

/opt/hooks/hooks.json

[   {     "id": "redeploy-app",     "execute-command": "/opt/scripts/redeploy.sh",     "command-working-directory": "/opt/scripts",     "pass-arguments-to-command":     [       {         "source": "payload",         "name": "head_commit.message"       },       {         "source": "payload",         "name": "pusher.name"       },       {         "source": "payload",         "name": "head_commit.id"       }     ],     "trigger-rule": {}   } ]

Tải trọng của yêu cầu GitHub HTTP POST bao gồm các thuộc tính head_commit.message , pusher.name và head_commit.id . Khi một sự kiện được cấu hình (như PUSH) xảy ra trong repository lưu trữ GitHub của bạn, GitHub sẽ gửi một yêu cầu ĐĂNG với phần thân JSON chứa thông tin về sự kiện. Bạn có thể tìm thấy một số ví dụ về các tải trọng POST đó trong tài liệu Loại sự kiện GitHub .

Thuộc tính cuối cùng trong file cấu hình là thuộc trigger-rule , cho web server hook biết trong điều kiện nào thì móc sẽ được kích hoạt. Nếu để trống, móc sẽ luôn được kích hoạt. Trong trường hợp của ta , ta sẽ cấu hình hook được kích hoạt khi GitHub gửi yêu cầu POST tới web server hook của ta . Cụ thể, nó sẽ chỉ được kích hoạt nếu bí mật GitHub (ký hiệu ở đây là your-github-secret ) trong yêu cầu HTTP phù hợp với một trong các luật , và các commit đã xảy ra với master chi nhánh.

Thêm mã sau để xác định trigger-rule , thay thế your-github-secret bằng password bạn chọn:

...      "trigger-rule":     {       "and":       [         {           "match":           {             "type": "payload-hash-sha1",             "secret": "your-github-secret",              "parameter":             {               "source": "header",               "name": "X-Hub-Signature"             }           }         },         {           "match":           {             "type": "value",             "value": "refs/heads/master",             "parameter":             {               "source": "payload",               "name": "ref"             }           }         }       ]     }   } ]

Toàn bộ, /opt/hooks/hooks.json sẽ giống như sau:

/opt/hooks/hooks.json

[   {     "id": "redeploy-app",     "execute-command": "/opt/scripts/redeploy.sh",     "command-working-directory": "/opt/scripts",     "pass-arguments-to-command":     [       {         "source": "payload",           "name": "head_commit.message"       },       {         "source": "payload",         "name": "pusher.name"       },       {         "source": "payload",         "name": "head_commit.id"       }     ],     "trigger-rule":     {       "and":       [         {           "match":           {             "type": "payload-hash-sha1",             "secret": "your-github-secret",              "parameter":             {               "source": "header",               "name": "X-Hub-Signature"             }           }         },         {           "match":           {             "type": "value",             "value": "refs/heads/master",             "parameter":             {               "source": "payload",               "name": "ref"             }           }         }       ]     }   } ]

Một mục cấu hình cuối cùng cần kiểm tra là cài đặt firewall của server của bạn. Web server hook sẽ lắng nghe trên cổng 9000 . Điều này nghĩa là nếu một firewall đang chạy trên server , nó cần cho phép các kết nối đến cổng này. Để xem danh sách các luật firewall hiện tại của bạn, hãy nhập:

sudo ufw status

Nếu cổng 9000 không có trong danh sách, hãy bật nó:

sudo ufw allow 9000

Để biết thêm thông tin về ufw , hãy xem phần giới thiệu này về các yếu tố cần thiết của ufw .

Tiếp theo, hãy cài đặt repository GitHub của ta để gửi các yêu cầu HTTP đến điểm cuối này.

Bước 4 - Cấu hình thông báo GitHub

Hãy cấu hình repository GitHub của ta để gửi các yêu cầu HTTP khi một commit chính xảy ra:

1. Đi tới repository của bạn và nhấp vào Cài đặt .
2. Sau đó, truy cập Webhooks và nhấp vào Thêm Webhook , nằm ở góc trên cùng bên phải.
3. Đối với URL tải trọng , hãy nhập địa chỉ server của bạn như sau: http:// your_server_ip :9000/hooks/ redeploy-app . Nếu bạn có một domain , bạn có thể sử dụng domain đó thay cho your_server_ip . Lưu ý tên điểm cuối trùng với thuộc tính id trong định nghĩa hook. Đây là chi tiết về triển khai webhook: tất cả các hook được xác định trong hooks.json sẽ xuất hiện trong URL dưới dạng http:// your_server_ip :9000/hooks/ id , trong đó id là id trong file hooks.json .
4. Đối với loại Nội dung , chọn ứng dụng / json .
5. Đối với Bí mật , hãy nhập bí mật ( your-github-secret ) mà bạn đã đặt trong định nghĩa hooks.json .
6. Đối với những sự kiện nào bạn muốn kích hoạt webhook này? chọn Chỉ đẩy sự kiện .
7. Nhấp vào nút Thêm webhook .

Bây giờ khi ai đó đẩy một commit vào repository của bạn, GitHub sẽ gửi một yêu cầu ĐĂNG với trọng tải chứa thông tin về sự kiện commit . Trong số các thuộc tính hữu ích khác, nó sẽ chứa các thuộc tính mà ta đã xác định trong luật kích hoạt, vì vậy web server hook của ta có thể kiểm tra xem yêu cầu POST có hợp lệ hay không. Nếu đúng như vậy, nó sẽ chứa các thông tin khác như pusher.name .

Danh sách đầy đủ các thuộc tính được gửi cùng với trọng tải có thể được tìm thấy trên trang GitHub Webhooks .

Bước 5 - Viết kịch bản triển khai / tái triển khai

Đến đây, ta đã trỏ webhook tới tập lệnh redeploy.sh , nhưng ta chưa tạo tập lệnh đó. Nó sẽ thực hiện công việc kéo nhánh chính mới nhất từ repository của ta , cài đặt các module nút và thực hiện lệnh xây dựng.

Tạo tập lệnh:

nano /opt/scripts/redeploy.sh

Đầu tiên, hãy thêm một hàm vào đầu script để xóa mọi file mà nó đã tạo. Ta cũng có thể sử dụng nó như một nơi để thông báo cho phần mềm của bên thứ ba như Slack nếu quá trình triển khai lại không thành công:

/opt/scripts/redeploy.sh

#!/bin/bash -e  function cleanup {       echo "Error occoured"       # !!Placeholder for Slack notification } trap cleanup ERR

Điều này cho trình thông dịch bash biết rằng nếu tập lệnh kết thúc đột ngột, nó sẽ chạy mã trong chức năng cleanup .

Tiếp theo, extract các tham số mà webhook chuyển cho tập lệnh khi thực thi nó:

/opt/scripts/redeploy.sh

...  commit_message=$1 # head_commit.message pusher_name=$2 # pusher.name commit_id=$3 # head_commit.id   # !!Placeholder for Slack notification

Lưu ý thứ tự của các tham số tương ứng với thuộc tính pass-arguments-to-command từ file hooks.json .

Cuối cùng, hãy gọi các lệnh cần thiết để triển khai lại ứng dụng:

/opt/scripts/redeploy.sh

...  cd ~/do-react-example-app/ git pull origin master yarn && yarn build  # !!Placeholder for Slack notification

Tập lệnh đầy đủ sẽ trông như thế này:

/opt/scripts/redeploy.sh

#!/bin/bash -e  function cleanup {       echo "Error occoured"       # !!Placeholder for Slack notification } trap cleanup ERR  commit_message=$1 # head_commit.message pusher_name=$2 # pusher.name commit_id=$3 # head_commit.id  # !!Placeholder for Slack notification  cd ~/do-react-example-app/ git pull origin master yarn && yarn build  # !!Placeholder for Slack notification

Tập lệnh sẽ đi đến folder , kéo mã từ nhánh chính mới nhất, cài đặt các gói mới và xây dựng version production của ứng dụng.

Lưu ý !!Placeholder for Slack notification . Đây là trình giữ chỗ cho bước cuối cùng trong hướng dẫn này. Nếu không có thông báo, không có cách nào thực sự để biết liệu tập lệnh có được thực thi đúng hay không.

Làm cho tập lệnh có thể thực thi để hook có thể thực thi nó:

chmod +x /opt/scripts/redeploy.sh

Vì Nginx được cấu hình để phân phát file từ /var/www/ do-react-example-app /build , khi tập lệnh này thực thi, folder bản dựng sẽ được cập nhật và Nginx sẽ tự động phân phát các file mới.

Bây giờ ta đã sẵn sàng để kiểm tra cấu hình. Hãy chạy web server hook:

webhook -hooks /opt/hooks/hooks.json -verbose

Tham số -hooks cho webhook biết vị trí của file cấu hình.

Bạn sẽ thấy kết quả này:

Output
[webhook] 2017/12/10 13:32:03 version 2.6.5 starting [webhook] 2017/12/10 13:32:03 setting up os signal watcher [webhook] 2017/12/10 13:32:03 attempting to load hooks from /opt/hooks/hooks.json [webhook] 2017/12/10 13:32:03 os signal watcher ready [webhook] 2017/12/10 13:32:03 found 1 hook(s) in file [webhook] 2017/12/10 13:32:03   loaded: redeploy-app [webhook] 2017/12/10 13:32:03 serving hooks on http://0.0.0.0:9000/hooks/{id}

Điều này cho ta biết rằng mọi thứ đã được tải đúng cách và server của ta hiện đang phục vụ hook redeploy-app qua URL http://0.0.0.0:9000/hooks/ redeploy-app . Điều này cho thấy một đường dẫn hoặc móc nối trên server có thể được thực thi. Nếu bây giờ bạn thực hiện một cuộc gọi REST đơn giản (như GET) với URL này, sẽ không có gì đặc biệt xảy ra vì các luật hook không được thỏa mãn. Nếu ta muốn hook được kích hoạt thành công, ta phải thực hiện trigger-rule mà ta đã xác định trong hooks.json .

Hãy kiểm tra điều này với một commit trống trong folder dự án local . Để web server hook của bạn đang chạy, hãy chuyển trở lại máy local của bạn và nhập như sau:

git commit --allow-empty -m "Trigger notification"

Đẩy commit đến nhánh chính:

git push origin master

Bạn sẽ thấy kết quả như thế này trên server của bạn :

Output
[webhook] 2018/06/14 20:05:55 [af35f1] incoming HTTP request from 192.30.252.36:49554 [webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app got matched [webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app hook triggered successfully [webhook] 2018/06/14 20:05:55 200 | 726.412µs | 203.0.113.0:9000 | POST /hooks/redeploy-app [webhook] 2018/06/14 20:05:55 [af35f1] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "82438acbf82f04d96c53cd684f8523231a1716d2"] and environment [] using /opt/scripts as cwd

Bây giờ ta hãy thêm thông báo Slack và xem điều gì sẽ xảy ra khi hook kích hoạt xây dựng thành công với thông báo.

Bước 6 - Thêm thông báo Slack

Để nhận thông báo từ Slack khi ứng dụng của bạn được triển khai lại, bạn có thể sửa đổi tập lệnh redeploy.sh để gửi các yêu cầu HTTP đến Slack. Cũng cần phải cấu hình Slack để nhận thông báo từ server của bạn bằng cách bật Tích hợp Webhook trong bảng cấu hình Slack. Khi bạn có URL Webhook từ Slack, bạn có thể thêm thông tin về web server hook của Slack vào tập lệnh của bạn .

Để cấu hình Slack, hãy thực hiện các bước sau:

1. Trên màn hình chính của ứng dụng Slack, hãy nhấp vào menu thả xuống ở trên cùng bên trái và chọn Customize Slack .
2. Tiếp theo, chuyển đến phần Cấu hình ứng dụng nằm ở Menu bên trái.
3. Trong bảng Quản lý , chọn Tích hợp Tùy chỉnh từ danh sách tùy chọn bên trái.
4. Tìm kiếm tích hợp WebHooks Đến .
5. Nhấp vào Thêm cấu hình .
6. Chọn một kênh hiện có hoặc tạo một kênh mới.
7. Nhấp vào Thêm tích hợp WebHooks đến .

Sau đó, bạn sẽ thấy một màn hình hiển thị cài đặt Slack webhook. Lưu ý URL Webhook , là điểm cuối được tạo bởi web server hook Slack. Khi bạn ghi chú xong URL này và thực hiện bất kỳ thay đổi nào khác, hãy nhớ nhấn nút Lưu Cài đặt ở cuối trang.

Quay lại server của bạn và mở tập lệnh redeploy.sh :

nano /opt/scripts/redeploy.sh

Ở bước trước, ta đã để chỗ dành sẵn trong tập lệnh cho thông báo Slack, được ký hiệu là !!Placeholder for Slack notification . Bây giờ ta sẽ thay thế các lệnh này bằng các lệnh gọi curl thực hiện các yêu cầu POST HTTP đến server Slack webhook. Slack hook mong đợi nội dung JSON, sau đó nó sẽ phân tích cú pháp, hiển thị thông báo thích hợp trong kênh.

Thay thế phần !!Placeholder for slack notification bằng các lệnh gọi curl sau. Lưu ý bạn cần thay your_slack_webhook_url bằng URL Webhook mà bạn đã lưu ý trước đó:

/opt/scripts/redeploy.sh

#!/bin/bash -e  function cleanup {       echo "Error occoured"       curl -X POST -H 'Content-type: application/json' --data "{               \"text\": \"Error occoured while building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",               \"username\": \"buildbot\",               \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"       }" your_slack_webhook_url } trap cleanup ERR  commit_message=$1 # head_commit.message pusher_name=$2 # pusher.name commit_id=$3 # head_commit.id  curl -X POST -H 'Content-type: application/json' --data "{         \"text\": \"Started building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",         \"username\": \"buildbot\",         \"icon_url\": \"https://i.imgur.com/JTq5At3.png\" }" your_slack_webhook_url  cd ~/do-react-example-app/ git pull origin master yarn && yarn build  curl -X POST -H 'Content-type: application/json' --data "{         \"text\": \"Build and deploy finished with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",         \"username\": \"buildbot\",         \"icon_url\": \"https://i.imgur.com/JTq5At3.png\" }" your_slack_webhook_url

Ta đã thay thế mỗi trình giữ chỗ bằng một lệnh gọi curl hơi khác:

Đầu tiên đảm bảo ta nhận được thông báo về bất kỳ lỗi nào xảy ra trong khi thực thi tập lệnh.
Thứ hai gửi thông báo rằng quá trình xây dựng ứng dụng đã bắt đầu.
Thứ ba gửi thông báo rằng quá trình xây dựng đã kết thúc thành công.

Bạn có thể tìm thấy thêm về bot và tích hợp Slack trong tài liệu webhooks của Slack .

, ta có thể kiểm tra hook của bạn với một commit trống trong folder local project. Để web server hook đang chạy, chuyển trở lại folder này và tạo commit trống:

git commit --allow-empty -m "Trigger notification"

Đẩy commit đến nhánh chính để kích hoạt bản dựng:

git push origin master

Đầu ra, bao gồm thông tin bản dựng, sẽ giống như sau:

Output
[webhook] 2018/06/14 20:09:55 [1a67a4] incoming HTTP request from 192.30.252.34:62900 [webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app got matched [webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app hook triggered successfully [webhook] 2018/06/14 20:09:55 200 | 462.533µs | 203.0.113.0:9000 | POST /hooks/redeploy-app [webhook] 2018/06/14 20:09:55 [1a67a4] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "5415869a4f126ccf4bfcf2951bcded69230f85c2"] and environment [] using /opt/scripts as cwd [webhook] 2018/06/14 20:10:05 [1a67a4] command output:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current                                  Dload  Upload   Total   Spent    Left  Speed 100   228    0     2  100   226     11   1324 --:--:-- --:--:-- --:--:--  1329 okFrom https://github.com/sammy/do-react-example-app  * branch            master     -> FETCH_HEAD    82438ac..5415869  master     -> origin/master Updating 82438ac..5415869 Fast-forward yarn install v1.7.0 [1/4] Resolving packages... success Already up-to-date. Done in 1.16s. yarn run v1.7.0 $ react-scripts build Creating an optimized production build... Compiled successfully.  File sizes after gzip:    36.94 KB  build/static/js/main.a0b7d8d3.js   299 B     build/static/css/main.c17080f1.css  The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:    "homepage" : "http://myname.github.io/myapp",  The build folder is ready to be deployed. You may serve it with a static server:    yarn global add serve   serve -s build  Find out more about deployment here:    http://bit.ly/2vY88Kr  Done in 7.72s.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current                                  Dload  Upload   Total   Spent    Left  Speed 100   233    0     2  100   231     10   1165 --:--:-- --:--:-- --:--:--  1166 ok [webhook] 2018/06/14 20:10:05 [1a67a4] finished handling redeploy-app

Trong Slack, bạn sẽ nhận được tin nhắn đến kênh bạn chọn để thông báo rằng quá trình xây dựng ứng dụng đã bắt đầu và khi nào quá trình xây dựng kết thúc.

Kết luận

Bây giờ ta đã hoàn tất việc cài đặt hệ thống triển khai bằng cách sử dụng webhooks, Nginx, shell scripts và Slack. Đến đây bạn có thể:

Cấu hình Nginx để hoạt động với các bản dựng động của ứng dụng của bạn.
Cài đặt web server hook và viết các móc kích hoạt các yêu cầu ĐĂNG GitHub.
Viết tập lệnh kích hoạt các bản dựng ứng dụng và thông báo.
Cấu hình Slack để nhận các thông báo này.

Hệ thống từ hướng dẫn này có thể được mở rộng, vì web server hook là module và có thể được cấu hình để hoạt động với các ứng dụng khác như GitLab . Nếu cấu hình web server hook thông qua JSON là quá nhiều, bạn có thể xây dựng một cài đặt tương tự bằng Hookdoo . webhook có thể tìm thêm thông tin về cách cấu hình luật kích hoạt cho webhook trên trang hooks ví dụ của dự án webhook.

Tags:

Các tin liên quan

Cách đảm bảo chất lượng mã bằng SonarQube trên Ubuntu 16.04
2018-06-14
Cách cài đặt Webmin trên Ubuntu 18.04
2018-05-17
Cách thiết lập chia sẻ Samba cho tổ chức nhỏ trên Ubuntu 16.04
2018-05-11
Cách tự động hóa triển khai Elixir-Phoenix với Distillery và edeliver trên Ubuntu 16.04
2018-05-03
Cách thiết lập khóa SSH trên Ubuntu 18.04
2018-04-27
Cách nâng cấp lên Ubuntu 18.04 Bionic Beaver
2018-04-26
Có gì mới trong Ubuntu 18.04 Bionic Beaver
2018-04-26
Cách cài đặt và cấu hình Ghost trên Ubuntu 16.04
2018-04-13
Cách lưu trữ một trang web với Caddy trên Ubuntu 16.04
2018-04-12
Cách thiết lập khóa SSH trên Ubuntu 16.04
2018-04-12