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

【问题标题】：Add .env Secrets to Nuxt App Deploying on Firebase Hosting with Github Actions使用 Github 操作将 .env 机密添加到在 Firebase 托管上部署的 Nuxt 应用程序
【发布时间】：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'
                },
                ssr: 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 毫无希望。很高兴你让它工作????

标签： firebase vue.js nuxt.js github-actions firebase-hosting

【解决方案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 前缀，只需要在生成之前就可以了