Github Actions 部署 NuxtHub 项目使用环境变量
事情经过
最近在研究 NuxtHub 惹出来的事,部署过 introxd.com 之后爽到了,所以就想把我的简介 imba97.me 也部署到上面
但我的页面会用到加密环境变量,我在 NuxtHub 添加了环境变量,实际 NuxtHub 是调用 Cloudflare 接口,环境变量会互相同步
在本地直接跑部署命令是可以的,但用 Github Actions 部署后,环境变量就没了,打印 process.env
是个空对象 {}
尝试解决
命名规则
使用 NUXT_
开头的命名规则,但无效
官方方法
使用 Cloudflare 文档 中写的方法,可以拿到
但这种写法只能在 defineEventHandler
中使用
1 | export default defineEventHandler(({ context }) => { |
但我是写了个配置,类似
1 | const commonConfig = { |
改成函数式,用的时候调用函数传值虽然可以,但不优雅
runtimeConfig
网上有说需要在 nuxt.config.ts
的 runtimeConfig
里面添加
1 | export default defineNuxtConfig({ |
但我试了,最终使用 useRuntimeConfig
会取到空字符串,因为 process.env
还是空对象
也试了把 useRuntimeConfig
从顶层放在函数中,也不行
解决方法
本地的打的包部署上去,process.env
是有值的,runtimeConfig
也能正常取到,所以考虑是 Github Actions 环境没有环境变量
测了一下,在打包的命令下加了,确实能拿到 TEST
1 | env: |
所以就取了个巧,直接在 Github Actions 里面设置加密字段,直接把本地 .env.local
的内容复制进去
再在 Workflow 加个步骤,在打包之前写进 .env
文件里
1 | - name: Write NUXT_PROJECT_ENV to .env |
然后在配置 runtimeConfig
1 | export default defineNuxtConfig({ |
最后在用的地方使用
1 | const runtimeConfig = useRuntimeConfig() |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 怠惰のコエ - imba久期 BLOG!
评论