Github action 幫你把重複的工作自動化

Github 真的是寶藏，最近在做一個 react + nextjs 的小網頁，每次更新伺服器兩邊來回切換操作實在影響做小玩具的欲望，隨便 google 了一下，發現了竟然可以通過 GitHub action 實現自動化部署到自己的伺服器，直接開始搜索教程研究一番，最後實現的效果 ———— Vscode coding 完畢，通過 git 插件 push 到 GitHub ，GitHub 自動觸發 action ，在 GitHub 雲端打包編譯專案，然後上傳至伺服器，替換原本網頁內容，然後重啟 PM2 。整個更新過程我只需要在 coding 完畢後點一下 push ，網頁便會在幾分鐘內更新部署好！ :@(得意)

【準備工作】伺服器軟體版本#

root@VM-0-4-ubuntu:~# node -v
v16.15.1
root@VM-0-4-ubuntu:~# pm2 -v
5.2.0

開發環境 nextjs

PS F:\網頁（玩耍）\廢物回收\gabage_recycle> next -v
Next.js v12.2.3

開始操作#

本地創建一個資料夾用來存放 next 專案#

進入資料夾下執行以下命令，創建一個 nextjs 官方的模板

npx create-next-app nextjs-name --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

修改 `package.json`#

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start -p 82"
  },
  "dependencies": {
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

因為我的專案是純靜態的所以添加了 export 命令在 package.json 檔案裡面，另外修改了 start 端口，因為伺服器上已經在跑著其他專案，預設端口已經佔用了，所以修改到了 82 端口，你可以修改到你自己空閒的端口，或者留空預設在 80 端口上跑。（值得一提的是需要提前在伺服器防火牆放行你需要跑這個專案的端口）

本地跑一下創建的 nextjs 專案#

在 package.json 同級目錄下執行

npm run dev

在http://localhost:3000/看到 Welcome to Next.js! 即代表示例專案創建成功～

Vscode 打開並上傳原始碼到 GitHub#

將專案資料夾拖放在 vscode 圖示上，這樣它打開就是一個單獨的工作區

接下來左邊圖示 原始碼管理 > 發佈到 Github > Publish to GitHub private repositiry (可以修改一下倉庫名字，隨便填，我這裡發佈到了私人倉庫，你也可以選擇發佈到公開的倉庫)

貌似最近新版本的 git 需要信任資料夾才能在原始碼管理這裡正常顯示，不然一直卡在原來的沒有初始化的界面，今天遇到了這個問題，查了查才知道是因為 git 現在需要配置信任目錄。

git config --global --add safe.directory F:/next/nextjs-name

替換命令裡面目錄為你創建 nextjs 專案的目錄，運行完重新打開 vscode 發佈倉庫即可。

打包手動部署在伺服器#

未完待續。