ciao-deploy

2020/06/02

專案連結：https://github.com/ciao-chung/ciao-deploy

專案狀態：2018年至今，持續開發演進中

開發動機

過去我在Web(Vue.js/Laravel)的環境佈署上

總是要執行一堆複雜又重複的事情

從基本的安裝php環境安裝php相關套件、安裝composer、安裝設定MySQL Server

接著專案要從local或Jenkin rsync到Server上

Laravel專案rsync上去後還要做資料夾的權限設定

有時候還要設定Cron Job、設定Laravel Queue Worker

最後Apache Server安裝到Virtual Host設定、接著還有Let't Encrypt設定

這些事情複雜又很多重複性

最一開始我都是再每個環節都做筆記

然後照著筆記一步一步做

麻煩又容易出錯

雖然Docker能夠解決上述的問題

但其實以個人小專案

或是公司的小專案

其實主機投入Docker成本有點高

因此當時希望透過Node.js建立一個CLI工具

一個可能將上述重複的事情簡化成建議指令的CLI工具

只要透過幾個變數就能快速佈署不同的專案

而不是一直重複看著筆記操作

而且這個指令工具後續即使我要將環境、專案容器化

也是能在Container內使用

此外這個工具我除了拿來佈署之外

其實也能拿來快速安裝我的開發機

裡面包含了自動安裝我常用的工具

像是Fish Shell、phpStorm、甚至一些多媒體播放器、圖形工具等等

核心概念

其實很簡單

就是將過去重複操作的一堆shell script

透過這個CLI工具去幫你執行

只要把需要做差異化的部份抽除來做成CLI參數、選項即可

因此主要使用shelljs來執行這些shell script

有些如果是需要設定的檔案功能(像是nginx/apache/php-fpm的設定檔)

就使用mustache.js設定檔案的樣板

透過CLI帶入的參數替換檔案樣板變數

並使用node.js的file system相關功能

將檔案建立出來放到指定路徑

主要功能

基本環境安裝(php/php extension/composer)
Fish Shell: 我個人長使用的開發工具
MySQL Server：包含安裝、及一些常用的指令像是User/DB的操作
Apache/Nginx：包含安裝、設定Virtual Host
Certbot：安裝Certbot或是使用Certbot幫網站加上SSL
Vue.js佈署：透過Yaml設定檔, 做webpack打包, 並提供一些發佈流程的hook能在各階段自行決定要執行的shell script, 最後rsync到Server上
Laravel佈署：透過Yaml設定檔, 做composer install, 並rsync上Server, 接著設定資料夾權限、甚至可依照專案需求設定Cron Job、Queue Worker

使用範例

常用功能

# 安裝php
ciao-deploy --command=base --php --composer

# 安裝nginx
ciao-deploy --command=nginx

# 安裝certbot
ciao-deploy --command=ssl

# 設定Web Nginx Virutal Host, 並自動使用certbot設定SSL
ciao-deploy --command=nginx-domain-sign --email=foobar@gmail.com --domain=foobar.com --path=/path/to/project --ssl

Vuejs專案佈署

建立一個佈署設定檔(/foobar-frontend.yml)

設定遠端server的host、user讓佈署工具能夠透過ssh執行指令及rsync

before_build hook可以做一些webpack build之前要做的事情

例如設定Server Side Render的服務路徑、設定Google Search的驗證HTML檔案

info:
    label: 'Vue.js專案(Stage)'
deploy:
    source:
        branch: release
        repo: git@github.com:foobar/foobar.git
    target:
        frontend:
            folder: frontend
            user: site
            host: foobar.com
            path: /site/foobar/frontend
            apibase: https://service.foobar.com
            before_build:
                - "sed -i \"s/ssrHost: '.*'/ssrHost: 'https:\\/\\/ssr.foobar.com'/g\" static/config/config.js"
                - "echo 'google-site-verification: googlea34396af043a64e.html' > copyfile/base/googlea34396af043a64e.html"
            build_script: 'yarn build'

接著透過ciao-deploy執行web-deploy指令帶入設定檔路徑即可

ciao-deploy --command=web-deploy --config=/foobar-frontend.yml

Laravel專案

大致跟Vuejs的佈署設定檔差不多

但backend設定底下多了env、cron(選用)、queue(選用)的設定

env主要可以拿來設定Laravel專案的.env設定

cron是來拿自動設定Laravel的Task Scheduling的Cron Job

queue則是建立一個pm2的yaml設定檔, 並透過pm2啟動laravel worker

info:
    label: 'Laravel專案(Stage)'
deploy:
    source:
        branch: release
        repo: git@git.foobar/foobar.git
    target:
        backend:
            folder: backend
            user: site
            host: foobar
            path: /site/foobar/backend
            env:
                APP_NAME: FOOBAR
                CORS: "'https://foobar.com'"
                DB_DATABASE: foobar
                DB_USERNAME: username
                DB_PASSWORD: password
                FILESYSTEM_DRIVER: s3
                AWS_ACCESS_KEY_ID: AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: us-east-1
                AWS_BUCKET: AWS_BUCKET
            cron:
                name: foobar
                user: site
            queue:
                appName: foobar-state-queue

這篇僅簡單介紹ciao-deploy這個佈署工具

更詳細的操作請參考我的Github Repo