使用帶有秘密的 github 操作反應應用程序構建/部署

Question

我正在嘗試使用帶有秘密的 github 操作來完成構建/部署我的使用 Firebase（目前只有身份驗證模塊）的反應應用程序。 對於本地開發，我使用帶有 webpack 和 dotenv-webpack 庫的 .env 文件。 在本地機器上一切正常。 開發服務器從 .env 文件中獲取環境變量並注入它。 但是在構建 github 操作並在 firebase 托管頁面上部署 package 后返回我一個錯誤：

code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."

經過一番調查，我發現環境變量沒有正確定義：

apiKey: undefined
authDomain: undefined
databaseURL: undefined
messagingSenderId: undefined
projectId: undefined
storageBucket: undefined

主要問題是我是否正確地進行了變量注入，或者是否有另一種方法可以做到這一點？ 我在構建中使用的 webpack 配置：

webpack.build.conf.js

const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const buildWebpackConfig = merge(baseWebpackConfig, {
  //!!!
  //CAUTION Production config
  //!!!
  mode: 'production',
});

module.exports = new Promise((resolve, reject) => {
  resolve(buildWebpackConfig);
});

webpack.base.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.min.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@constants': path.resolve(__dirname, './src/constants'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@styles': path.resolve(__dirname, './src/style'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
    new Dotenv(),
  ],
};

從 .env 文件中獲取變量的文件：

//Firebase config
export const FB_API_KEY = process.env.REACT_APP_API_FB_KEY;
export const FB_AUTH_DOMAIN = process.env.REACT_APP_FB_AUTH_DOMAIN;
export const FB_DATABASE_URL = process.env.REACT_APP_FB_DATABASE_URL;
export const FB_PROJECT_ID = process.env.REACT_APP_FB_PROJECT_ID;
export const FB_STORAGE_BUCKET = process.env.REACT_APP_STORAGE_BUCKET;
export const FB_MESSAGING_SENDER_ID = process.env.REACT_APP_FB_MESSAGING_SENDER_ID;

管道文件：

name: Firebase Deploy
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
        env:
          REACT_APP_API_FB_KEY: ${{ secrets.REACT_APP_API_FB_KEY }}
          REACT_APP_FB_AUTH_DOMAIN: ${{ secrets.REACT_APP_FB_AUTH_DOMAIN }}
          REACT_APP_FB_DATABASE_URL: ${{ secrets.REACT_APP_FB_DATABASE_URL }}
          REACT_APP_FB_PROJECT_ID: ${{ secrets.FB_PROJECT_ID }}
          REACT_APP_FB_STORAGE_BUCKET: ${{ secrets.FB_STORAGE_BUCKET }}
          REACT_APP_FB_MESSAGING_SENDER_ID: ${{ secrets.FB_MESSAGING_SENDER_ID }}
      - name: Variable to dotenv
          uses: CallePuzzle/envvar-to-dotenv-action@0.1.0
          with:
            variableNamesByFilter: ^REACT_(APP.*)
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Answer 1

我找到了解決方案。 問題出在Webpack配置中。 看來Webpack需要在編譯時定義環境變量。 為此，我使用了 webpack.DefinePlugin

webpack.build.conf.js

const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const webpack = require('webpack');

const buildWebpackConfig = merge(baseWebpackConfig, {
  //!!!
  //CAUTION Production config
  //!!!
  mode: 'production',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        REACT_APP_API_FB_KEY: JSON.stringify(process.env.REACT_APP_API_FB_KEY),
        REACT_APP_FB_AUTH_DOMAIN: JSON.stringify(process.env.REACT_APP_FB_AUTH_DOMAIN),
        REACT_APP_FB_DATABASE_URL: JSON.stringify(process.env.REACT_APP_FB_DATABASE_URL),
        REACT_APP_FB_PROJECT_ID: JSON.stringify(process.env.REACT_APP_FB_PROJECT_ID),
        REACT_APP_STORAGE_BUCKET: JSON.stringify(process.env.REACT_APP_STORAGE_BUCKET),
        REACT_APP_FB_MESSAGING_SENDER_ID: JSON.stringify(process.env.REACT_APP_FB_MESSAGING_SENDER_ID),
      },
    }),
  ],
});

module.exports = new Promise((resolve, reject) => {
  resolve(buildWebpackConfig);
});

並且不需要 append.env 文件。 在 process.env 中完美傳遞的變量：

name: Firebase Deploy
on:
  push:
    branches:
      - master
env:
  REACT_APP_API_FB_KEY: ${{ secrets.REACT_APP_API_FB_KEY }}
  REACT_APP_FB_AUTH_DOMAIN: ${{ secrets.REACT_APP_FB_AUTH_DOMAIN }}
  REACT_APP_FB_DATABASE_URL: ${{ secrets.REACT_APP_FB_DATABASE_URL }}
  REACT_APP_FB_PROJECT_ID: ${{ secrets.FB_PROJECT_ID }}
  REACT_APP_FB_STORAGE_BUCKET: ${{ secrets.FB_STORAGE_BUCKET }}
  REACT_APP_FB_MESSAGING_SENDER_ID: ${{ secrets.FB_MESSAGING_SENDER_ID }}
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Debug Action
        uses: hmarr/debug-action@v1.0.0
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

非常感謝你。

Answer 2

name: Firebase Deploy
on:
  push:
    branches:
      - master

env:
  REACT_APP_API_FB_KEY: ${{ secrets.REACT_APP_API_FB_KEY }}
  REACT_APP_FB_AUTH_DOMAIN: ${{ secrets.REACT_APP_FB_AUTH_DOMAIN }}
  REACT_APP_FB_DATABASE_URL: ${{ secrets.REACT_APP_FB_DATABASE_URL }}
  REACT_APP_FB_PROJECT_ID: ${{ secrets.FB_PROJECT_ID }}
  REACT_APP_FB_STORAGE_BUCKET: ${{ secrets.FB_STORAGE_BUCKET }}
  REACT_APP_FB_MESSAGING_SENDER_ID: ${{ secrets.FB_MESSAGING_SENDER_ID }}

obs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
...

將env部分移到頂層怎么樣？ 目前env僅受檢出步驟的影響，檢出無關緊要，因為將 env 注入源代碼處於構建階段。

或者您可以在構建步驟中傳遞環境。