我正在尝试使用带有秘密的 github 操作来完成构建/部署我的使用 Firebase(目前仅身份验证模块)的 React 应用程序。
对于本地开发,我将 .env 文件与 webpack 和 dotenv-webpack 库一起使用。在本地机器上一切正常。开发服务器从 .env 文件获取环境变量并注入它。但是在 github 操作中构建并在 firebase 托管页面上部署包后,我返回一个错误:
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/[email protected] /cdn-cgi/l/email-protection
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 }}