【Workflow】自動化工作流程如初見
前言
話說，筆者為什麼要學Workflows的，絕對不是因為要CI / CD，因為基本上，手機APP都是單人作業的，除非是很大型的專案，不然不太會有使用它的機會 (其實是筆者不會啦)，主要還是在學Tauri製作小桌面APP，想要打包成各平台的執行檔，但是…筆者只有mac mini，那要怎麼辦呢？就可以使用GitHub Workflows，來自動打包成各平台的執行檔，雖然說，還是要實際上到各平台測一下才知道能不能用…
想做一個這樣子的功能
建立專案
- 因為現在Github都是使用Token登入使用的，所以要先把該workflows的功能先
打勾才能使用…
- 先在Github上建立一個名叫
github-workflows-first的倉庫
- 然後下載下來使用…
- 我們使用VSCode工具，建立
.github/workflows資料夾，上面建立linux-x86.yml檔案… - 這資料夾位置是固定的，當然，設定檔也可以有多個，如
windows-x86_64.yml/macOS-arm64.yml
安裝系統
- 現在，就把下面的程式碼貼到
linux-x86.yml檔案上吧… - 除了安裝
ubuntu系統之外，我們也順道取得它的系統名稱跟CPU架構來顯示…
name: Linux x86 Workflow
on:
push:
branches:
- debug
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 取得系統名稱
id: get_os
run: echo "OS_NAME=$(uname -s)" >> $GITHUB_OUTPUT
- name: 取得CPU架構
id: get_arch
run: echo "CPU_ARCH=$(uname -m)" >> $GITHUB_OUTPUT
- name: 列印系統名稱和CPU架構
run: |
echo "系統名稱: ${{ steps.get_os.outputs.OS_NAME }}"
echo "CPU架構: ${{ steps.get_arch.outputs.CPU_ARCH }}"
上傳檔案
- 這裡我們使用Source-Tree來把檔案push到
github上，當然…直接用指令也是可以的…
- 上傳之後，可以到github專案上的
actions查看一下… - 聰明如你，身為軟體打字工的各位，應該對它不陌生吧？
解譯程式碼
- 主要
jobs就是執行工作的區塊，而build則是工作項目的名字 (可自訂)… steps就是工作步驟，就一步一步的去執行…- 當然也可以把中間過程的值
存下來，以便之前去使用，大部分都是存在$GITHUB_OUTPUT之中…
- 我們就按下
Run workflow來取得OS / CPU的值，照著影片一步步去做就可以了…
安裝軟體
- 我們來安裝
node.js吧，因為每個系統安裝軟體的方式各有不同，而就有好心人撰寫腳本來整合，而actions/setup-node@v4就是別人寫好的功能，我們就直接拿來使用吧… - 記得要
git push，然後再跟之前的影片一樣，手動執行Run workflow，去看看結果…
name: Linux x86 Workflow
on:
...
jobs:
build:
runs-on: ubuntu-latest
steps:
...
- name: 安裝 Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: 驗證 Node.js 版本
run: node -v
執行檔案
- 如果我們要執行上傳程式碼的話呢？這是一個一定會用到的功能，所以就有好心人寫好了功能，就是
actions/checkout@v4，它可以讓workflow下載已上傳程式碼到我們安裝的系統中… - 先在
根目錄下新增app.js，寫個Hello World，然後上傳… - 可以看到設定檔內容，其實就是在執行
系統指令，所以也可以自己在實機上先試試…
console.log('安安你好嗎 !!!');
name: Linux x86 Workflow
on:
push:
branches:
- debug
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 將你的 Git 儲存庫的程式碼下載（checkout）到工作流程執行器（runner）的檔案系統中。
uses: actions/checkout@v4
...
- name: 驗證 Node.js 版本
run: node -v
- name: 執行JavaScript檔案
run: node 'app.js'
- 可以在
Actions可以看到很多執行過的記錄，可以一一查詢…
設定可輸入變數
- 接著我們來設定一個可輸入的變數，雖然
全自動也是不錯的，但是有時候還是手動輸入的好，能完整查看過程，不用重新一直push… - 我們來設定安裝nodejs的版本為
22吧… - 在
workflow_dispatch -> inputs的地方可以輸入變數名稱跟設定值… - 取值時為
github.event.inputs.<變數名稱>的格式，但是因為在自動跑的時候，我們並沒有輸入值，所以還是要自己加入一個預設值才行…
name: Linux x86 Workflow
on:
push:
branches:
- debug
workflow_dispatch:
inputs:
jsName:
description: '要執行的 JavaScript 檔案名稱'
required: true
default: 'app.js'
nodeVersion:
description: 'Node.js 版本'
required: true
default: '20'
jobs:
build:
runs-on: ubuntu-latest
steps:
...
- name: 安裝 Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ github.event.inputs.nodeVersion || '20' }}
...
- name: 執行JavaScript檔案
run: node ${{ github.event.inputs.jsName || 'app.js' }}
執行指令
- 接下來我們就來
執行指令 - 壓縮檔案 (zip)，就可以說是打包檔案，然後順道查看一下目錄內容… - 檔案更新完成後，可以去看看有沒有壓縮成功，檔案名稱有沒有跟我們設定的一樣…
name: Linux x86 Workflow
on:
push:
branches:
- debug
jobs:
build:
runs-on: ubuntu-latest
steps:
...
- name: 壓縮 app.js 成 app.zip
run: zip app.zip app.js
- name: 列印目前目錄內容
run: ls -al
環境變數
- 除了之前介紹的存在
$GITHUB_OUTPUT的值之外，還有一個叫環境變數的功能… - 它的功能就是在步驟之內使用的，也就是
<步驟名稱> -> env中設定… - 使用的方式就很簡單啦，就是
env.<變數名稱>，這樣子可以一次改多個變數，而且VSCode還支援，自動填充變數名呢… - 其實它就是存在
$GITHUB_ENV內的變數啦…
name: Linux x86 Workflow
on:
push:
branches:
- debug
workflow_dispatch:
inputs:
jsName:
description: '要執行的 JavaScript 檔案名稱'
required: true
default: 'app.js'
nodeVersion:
description: 'Node.js 版本'
required: true
default: '20'
jobs:
build:
runs-on: ubuntu-latest
env:
OS: ubuntu
steps:
...
- name: 設定壓縮檔案名稱
run: echo "FILE_NAME=app-${{ env.OS }}.zip" >> $GITHUB_ENV
- name: 壓縮 app.js 成 app.zip
run: zip ${{ env.FILE_NAME }} app.js
- name: 列印目前目錄內容
run: ls -al
上傳檔案到 GitHub Release
- 最後，我們來
自動執行workflow…
- 在
on -> push，可以看到有branches跟tags的字樣，可以分別設定在某個分支名稱或某個版本號，上傳之後自動執行…
- 當然，也可以加上定時執行的功能，就是
on -> schedule -> cron，這裡就不細說了… - 記得上傳後要馬上去看看，因為它是
自動執行的…
- 最後在專案的
Releases下，也看看壓縮好的檔案有沒有順利上傳上去…
name: Linux x86 Workflow
on:
push:
branches:
- debug
tags:
- 'v*'
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: write
env:
OS: ubuntu
steps:
...
- name: 上傳 app.zip 到 GitHub Release
uses: softprops/action-gh-release@v1
with:
files: ${{ env.FILE_NAME }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- 最後也附上macOS / Windows版本執行的版本…
- 其實也可以把各系統的yml整合成一個的，大家有興趣的話也可以去查查看…