使用 Github 操作将 .env 机密添加到在 Firebase 托管上部署的 Nuxt 应用程序

Posted 2023-03-28

【中文标题】使用 Github 操作将 .env 机密添加到在 Firebase 托管上部署的 Nuxt 应用程序

【英文标题】：Add .env Secrets to Nuxt App Deploying on Firebase Hosting with Github Actions

【发布时间】：2021-04-23 08:50:21

【问题描述】：

我正在尝试使用 github 操作将 Nuxt 应用部署到 Firebase 托管...

部署工作正常，直到我将我的 firebase 配置添加到 .env - 它在 localhost 上运行良好，但部署时 api 密钥和其他配置似乎没有注册。

.env

FIREBASE_APIKEY=mykey
FIREBASE_AUTHDOMAIN=mydomain
FIREBASE_DATABASEURL=mydburl
FIREBASE_PROJECTID=projectid
FIREBASE_STORAGEBUCKET=bucket
FIREBASE_MESSAGINGSENDERID=senderid
FIREBASE_APPID=appid
FIREBASE_MEASUREMENTID=measurementid

nuxt.config.js

// Nuxt-Fire Module Options
    firebase: 
        config: 
            apiKey: process.env.FIREBASE_APIKEY,
            authDomain: process.env.FIREBASE_AUTHDOMAIN,
            databaseURL: process.env.FIREBASE_DATABASEURL,
            projectId: process.env.FIREBASE_PROJECTID,
            storageBucket: process.env.FIREBASE_STORAGEBUCKET,
            messagingSenderId: process.env.FIREBASE_MESSAGINGSENDERID,
            appId: process.env.FIREBASE_APPID,
            measurementId: process.env.FIREBASE_MEASUREMENTID
        ,
        onFirebaseHosting: true,
        services: 
            auth: 
                persistence: 'local', // default
                initialize: 
                    // onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
                    onAuthStateChangedAction: 'onAuthStateChanged'
                ,
                s-s-r: true
            ,
            firestore: true,
            storage: true,
            performance: true
            // analytics: true,
        
    ,

部署.yml

name: Firebase Continuous Deployment

on:
    push:
        branches: [master]

jobs:
    firebase-deploy:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@master
            - uses: actions/setup-node@master
              with:
                  node-version: '12'
            - run: yarn install
              env:
                  FIREBASE_APIKEY: $ secrets.FIREBASE_APIKEY 
                  FIREBASE_AUTHDOMAIN: $ secrets.FIREBASE_AUTHDOMAIN 
                  FIREBASE_DATABASEURL: $ secrets.FIREBASE_DATABASEURL 
                  FIREBASE_PROJECTID: $ secrets.FIREBASE_PROJECTID 
                  FIREBASE_STORAGEBUCKET: $ secrets.FIREBASE_STORAGEBUCKET 
                  FIREBASE_MESSAGINGSENDERID: $ secrets.FIREBASE_MESSAGINGSENDERID 
                  FIREBASE_APPID: $ secrets.FIREBASE_APPID 
                  FIREBASE_MEASUREMENTID: $ secrets.FIREBASE_MEASUREMENTID 
            - run: yarn generate
            - uses: w9jds/firebase-action@master
              with:
                  args: deploy --only hosting
              env:
                  FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 

【问题讨论】：

看起来您在yarn install 步骤上设置了env 变量。他们不应该在下面的yarn generate 步骤吗？

是的，就是这样-感谢@Phil 拯救了我的早晨；）

对我来说，这真是一个幸运的猜测，我对 Nuxt 毫无希望。很高兴你让它工作????

【参考方案1】：

环境变量在 yarn install 上运行，而不是在 yarn generate...

部署.yml

name: Firebase Continuous Deployment

on:
    push:
        branches: [master]

jobs:
    firebase-deploy:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@master
            - uses: actions/setup-node@master
              with:
                  node-version: '12'
            - run: yarn install
            - run: yarn generate
              env:
                  FIREBASE_APIKEY: $ secrets.FIREBASE_APIKEY 
                  FIREBASE_AUTHDOMAIN: $ secrets.FIREBASE_AUTHDOMAIN 
                  FIREBASE_DATABASEURL: $ secrets.FIREBASE_DATABASEURL 
                  FIREBASE_PROJECTID: $ secrets.FIREBASE_PROJECTID 
                  FIREBASE_STORAGEBUCKET: $ secrets.FIREBASE_STORAGEBUCKET 
                  FIREBASE_MESSAGINGSENDERID: $ secrets.FIREBASE_MESSAGINGSENDERID 
                  FIREBASE_APPID: $ secrets.FIREBASE_APPID 
                  FIREBASE_MEASUREMENTID: $ secrets.FIREBASE_MEASUREMENTID 
            - uses: w9jds/firebase-action@master
              with:
                  args: deploy --only hosting
              env:
                  FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 

【参考方案2】：

我添加了同样的问题，它是你的环境变量的名称。

如果你想让 Nuxt 注入你的 env 变量，它们必须在你的 .env 文件中以NUXT_ENV_（例如NUXT_ENV_FIREBASE_APIKEY=mykey）开头。

请参阅：Automatic injection of environment variables 来自 Nuxt 文档表单的更多详细信息

然后在您的代码中使用 process.env.NUXT_ENV_FIREBASE_APIKEY 之类的变量

【讨论】：

嗯，虽然我正在生成一个静态站点，但看起来是正确的，所以我不需要 nuxt_env 前缀，只需要在生成之前就可以了