![](/img/trans.png)
[英]Accesing github secrets on GitHub Actions for a React App
[英]React app build/deploy using github actions with secrets
我正在尝试使用带有秘密的 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 }}
我找到了解决方案。 问题出在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 }}
非常感谢你。
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 注入源代码处于构建阶段。
或者您可以在构建步骤中传递环境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.