NextJs 获取 Github Action 部署的环境变量

NextJs 获取 Github Action 部署的环境变量

设置变量

项目中需要某些私有密钥，不能直接暴露在仓库中，在编译Next.js的时候，需要将该密钥通过环境变量的形式注入到Next.js项目中，所以第一步，我们需要将这个密钥储存到当前仓库的Settings/Secrets里面，具体操作如下图所示：

image

配置变量

在Next.js中获取GitHub Actions环境变量，你可以使用process.env对象来访问在GitHub Actions中设置的环境变量。以下是一个如何在Next.js中获取GitHub Actions环境变量的例子：

首先，在GitHub Actions的工作流文件中设置环境变量，例如在 .github/workflows/ci.yml中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14
      - name: Install Dependencies
        run: npm install
      - name: Build Next.js App
        env:
          MY_ENV_VAR: ${{ secrets.MY_SECRET_ENV_VAR }}
        run: npm run build

在这个例子中，MY_ENV_VAR是一个环境变量，它可以是一个秘密值，通过GitHub Actions的秘密（secrets）功能来安全地设置。

然后，需要将环境变量添加到 Next 项目的配置文件中，在 next.config.js 中：

1
2
3
4
5
module.exports = {
  env: {
    MY_ENV_VAR: process.env.MY_ENV_VAR,
  }
}

获取变量

然后，在Next.js的应用代码中，你可以这样获取这个环境变量：

1
2
3
4
5
6
7
8
9
// pages/index.js
export default function Home() {
  const myEnvVar = process.env.MY_ENV_VAR;
  return (
    <div>
      <p>The environment variable is: {myEnvVar || 'undefined'}</p>
    </div>
  );
}

在这段代码中，process.env.MY_ENV_VAR 将会获取在 GitHub Actions 中设置的环境变量MY_ENV_VAR的值。如果环境变量存在，它将被显示在页面上；如果不存在，则会显示'undefined'。