Home / Blog / This page

GitHub Actions自动部署vite项目时使用多个环境变量

2023-07-23 中文

技术

GitHub

除了单个变量单独保存之外，还可以把多个变量一起保存，在自动部署时注入环境变量文件即可。

为什么要用环境变量

有的项目中需要配置秘钥，如果不希望把秘钥公开上传到代码仓库，可以在项目的开发文件夹中使用 .env 文件，然后在 .gitignore 文件中新增一行 .env ，这样 push 到GitHub的时候就不会上传秘钥了。

.env文件的书写和使用

.env文件内容

VITE_apiKey001 = "***"
VITE_apiKey002 = "***"
VITE_apiKey003 = "***"
VITE_apiKey004 = "***"
VITE_apiKey005 = "***"

vite 项目中调用

const config = {
  apiKey001: import.meta.env.VITE_apiKey001,
  apiKey002: import.meta.env.VITE_apiKey002,
  apiKey003: import.meta.env.VITE_apiKey003,
  apiKey004: import.meta.env.VITE_apiKey004,
  apiKey005: import.meta.env.VITE_apiKey005
};

请注意，这样只是让查看工程文件的人看不到秘钥而已，如果生成的静态文件是部署在GitHub pages上，那别人也能在静态文件里找到秘钥。

GitHub Actions和Secrets

我想用 GitHub Actions 自动生成静态文件并部署到 pages 变成静态网站，我已经有好几个这样的静态网站了，这并不难操作。

自动部署的时候需要使用GitHub账号秘钥。

在 Github 的账号设置当中找到 developer settings，再找到 Tokens(classic)，然后 generate new token，选 classic 的那个，权限范围至少要包括 repo, workflow，给这个 token 写个备注，比如是给哪个项目做什么用的，然后复制 token 的内容。

回到项目的代码仓库，点 settings，左侧菜单里找到Secrets and Variables，点开之后进入 Actions 的页面，新增一个 repository secrets，给秘钥起个名称，我看大家通常叫 API_TOKEN_GITHUB，然后把token贴入秘钥内容。

再回到此项目的 Actions ，在 workflows 的流程文件里用 ${{ secrets.API_TOKEN_GITHUB }} 来引用秘钥即可。

GitHub Actions的workflow中配置环境变量

刚才是给 workflow 文件配置了可以访问到的环境变量，但是我们的项目文件和 workflow 文件不同，项目文件无法直接访问这些变量。

想要创建项目文件可以访问到的环境变量，有三种做法。

1. 在env属性中明文写出秘钥（不推荐）

在 workflow 文件中这样写

jobs:
  my_job:
    env:
      VITE_apiKey001: "***"
      VITE_apiKey002: "***"
      VITE_apiKey003: "***"
      VITE_apiKey004: "***"
      VITE_apiKey005: "***"

如果代码仓库是公开的，那么别人也能看到这个 workflow 文件的内容，那还叫什么“秘”钥。

2. 在env属性中逐个引用secrets（麻烦）

在代码仓库的环境变量中新建五个变量，输入变量名和内容，保存，然后在 workflow 里面引用。

jobs:
  my_job:
    env:
      VITE_apiKey001: ${{ secrets.VITE_apiKey001 }}
      VITE_apiKey002: ${{ secrets.VITE_apiKey002 }}
      VITE_apiKey003: ${{ secrets.VITE_apiKey003 }}
      VITE_apiKey004: ${{ secrets.VITE_apiKey004 }}
      VITE_apiKey005: ${{ secrets.VITE_apiKey005 }}

这里只有五个，所以新建五个就行了，如果有五十个，那就太麻烦了。

3. 使用secrets注入多个环境变量到env（推荐）

我们回到代码仓库的环境变量，新建一个secret变量，变量名可以叫 ENV_FILE，变量内容输入 .env 文件里的内容

VITE_apiKey001 = "***"
VITE_apiKey002 = "***"
VITE_apiKey003 = "***"
VITE_apiKey004 = "***"
VITE_apiKey005 = "***"

然后在工作流程文件的 steps 当中新增一步

jobs:
  my_job:
    steps:
      - name: Create .env file
        run: echo "${{ secrets.ENV_FILE }}" > .env

这样会在 workflow 的部署环境下新建一个 .env 文件，那么在后面的步骤中，工程文件就能访问到 .env 里面的环境变量了。

总结

瞎凑合用吧。

Load Comments