问题描述
我正在尝试使用带有秘密的github动作来完成我的使用Firebase的react应用的构建/部署(目前仅用于auth模块)。 对于本地开发,我将.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/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 }}
解决方法
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注入源中处于构建阶段。
或者您可以在构建步骤中通过环境。
,我找到了解决方案。问题出在 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);
});
并且不需要附加.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 }}
非常感谢您。