框架 › Next.js

使用 GitHub Actions 在 Next.js 中实现 CI/CD

使用加密的 .env.vault 文件在 GitHub Actions 中运行 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 脚本。这将提前注入环境变量。

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 机密将作为环境变量注入，恰逢其时。

当你在日志中看到 '从加密的 .env.vault 加载环境' 时，你就知道操作成功了。如果 DOTENV_KEY 未设置（例如，在本地机器上开发时），它将回退到标准 dotenv 功能。

GitHub Actions 构建

你已成功使用新的 .env.vault 标准来加密和部署你的机密。这比将你的机密散布到多个第三方平台和工具中安全得多。每当你需要添加或更改机密时，只需重新构建你的 .env.vault 文件并重新部署即可。