框架 › Next.js

在 Next.js 中使用 GitHub Actions 進行 CI/CD

在 GitHub Actions 中使用加密的 .env.vault 檔案執行 Next.js CI/CD

在此指南中尋找完整的 GitHub 程式碼範例。

初始設定

建立 Next.js 應用程式。

npx create-next-app@latest --example hello-world .

這會建立一些檔案。

ls -1
README.md
next-env.d.ts
node_modules
package-lock.json
package.json
pages
tsconfig.json

編輯 pages/index.tsx 以包含 process.env.NEXT_PUBLIC_HELLO。

pages/index.tsx

export default function IndexPage() {
  return (
    <div>
      Hello {process.env.NEXT_PUBLIC_HELLO}.
    </div>
  )
}

建立 .github/worksflows/ci.yml 檔案。

.github/workflows/ci.yml

name: npm run build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 16
    - run: npm install
    - run: npm run build && cat .next/server/pages/index.html
      env:
        DOTENV_KEY: ${{ secrets.DOTENV_KEY }}

將其提交到程式碼並推送至 GitHub。

推送後，GitHub actions 建置內容會顯示 'Hello .'，因為它還沒有辦法存取環境變數。接下來我們就來處理這個問題。

github.com/you/app/actions

預先載入 dotenv

安裝 dotenv。

npm install dotenv --save # Requires dotenv >= 16.1.0

在您的專案根目錄中建立一個 .env 檔案。

.env

# .env
NEXT_PUBLIC_HELLO="World"

使用 dotenv 預先載入 Next.js 指令碼。這會在 Next.js 之前注入環境變數。

package.json

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/next",
  "build": "node -r dotenv/config ./node_modules/.bin/next build",
  "start": "node -r dotenv/config ./node_modules/.bin/next start"
},

嘗試在本地執行它。

npm run dev
# Visit https://127.0.0.1:3000

它會顯示「Hello World」。

太棒了！process.env 現在有您在 .env 檔案中定義的金鑰和值。

這涵蓋了 CI 的本機模擬。接下來，讓我們解決真實 CI 環境的問題。

建置 .env.vault

推送您最新的 .env 檔案變更並編輯您的 CI 機密。了解更多關於同步的資訊

npx dotenv-vault@latest push
npx dotenv-vault@latest open ci

使用 UI 設定 CI 環境機密。

dotenv.org

然後建置您加密的 .env.vault 檔案。

npx dotenv-vault@latest build

其內容應如下所示。

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# ci
DOTENV_VAULT_CI="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_CI_VERSION=2

設定 DOTENV_KEY

擷取您的 CI DOTENV_KEY。

npx dotenv-vault@latest keys ci
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=ci

在 GitHub Actions 上設定 DOTENV_KEY。

建置 CI

將這些變更安全地提交到程式碼並重新執行建置。

就這樣！重新執行時，您的 .env.vault 檔案將被解密，其 CI 機密將作為環境變數注入，恰到好處。

當您在記錄中看到 'Loading env from encrypted .env.vault' 時，您就會知道事情運作正常。如果未設定 DOTENV_KEY（例如，在您的本機電腦上開發時），它會回退到標準的 dotenv 功能。

github actions 建置

您已成功使用新的 .env.vault 標準來加密和部署您的機密。這比將機密散落在多個第三方平台和工具中安全得多。每當您需要新增或變更機密時，只需重建您的 .env.vault 檔案並重新部署即可。