[英]React app build/deploy using github actions with secrets
I am trying to accomplish build/deploy my react app that uses Firebase(for now only auth module) using github actions with secrets.我正在尝试使用带有秘密的 github 操作来完成构建/部署我的使用 Firebase(目前只有身份验证模块)的反应应用程序。 For local development I use.env file with webpack and dotenv-webpack library.对于本地开发,我使用带有 webpack 和 dotenv-webpack 库的 .env 文件。 On local machine all works fine.在本地机器上一切正常。 Dev server get environment varialbles from.env file and inject it.开发服务器从 .env 文件中获取环境变量并注入它。 But after build in github actions and deploying package on firebase hosting page return me an error:但是在构建 github 操作并在 firebase 托管页面上部署 package 后返回我一个错误:
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
After some investigation I got that environment variables aren't defined properly:经过一番调查,我发现环境变量没有正确定义:
apiKey: undefined
authDomain: undefined
databaseURL: undefined
messagingSenderId: undefined
projectId: undefined
storageBucket: undefined
The main question if i'm doing variable injection correct or maybe there is another way to do it?主要问题是我是否正确地进行了变量注入,或者是否有另一种方法可以做到这一点? My webpack config that I use in build:我在构建中使用的 webpack 配置:
webpack.build.conf.js 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 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(),
],
};
File that get variables from.env file:从 .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;
Pipeline file:管道文件:
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 }}
I found solution.我找到了解决方案。 The problem was in Webpack configuration.问题出在Webpack配置中。 It seems that Webpack need to define environment variables at compile time.看来Webpack需要在编译时定义环境变量。 For that I used webpack.DefinePlugin为此,我使用了 webpack.DefinePlugin
webpack.build.conf.js 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);
});
And don't need to append.env file.并且不需要 append.env 文件。 Variables passed down perfectly in process.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 }}
Thanks you a lot.非常感谢你。
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
...
How about moving env
section to the top level?将env
部分移到顶层怎么样? currently env
is only affected with checkout step and checkout is irrelevant since injecting env into the source is in the build phase.目前env
仅受检出步骤的影响,检出无关紧要,因为将 env 注入源代码处于构建阶段。
or you may pass the env in the build step.或者您可以在构建步骤中传递环境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.