[英]How do I get the docker environment variables available to me in the docker file? (using React/JS/webpack)
[英]How to access environment variables in react from docker and webpack
我有一個通過Webpack構建並使用Docker容器化的React前端應用程序。
目標 :能夠在docker中定義環境變量,並能夠在我的reactjs應用程序中訪問環境變量。
泊塢窗,compose.yml
version: '3'
services:
portal:
build:
context: .
dockerfile: Dockerfile
environment:
- NODE_ENV=production
- PORT=8080
- API_URL=http://test.com
ports:
- "8080:8080"
例如我想在我的reactjs應用程序中訪問此api_url
變量
webpack.prod.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const WebpackShellPlugin = require('webpack-shell-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv');
console.log(process.env);
module.exports = [{
entry: {
app1: ["./src/public/app1/index.tsx"],
},
mode: NODE_ENV,
watch: NODE_ENV === 'development',
output: {
filename: "[name]/bundle.js",
path: path.resolve(__dirname, 'build/public/'),
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json", ".css", ".scss"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{ test: /\.scss$/, use: [
{ loader: "style-loader" }, // to inject the result into the DOM as a style block
{ loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" }, // to convert SASS to CSS
] },
]
},
"plugins": [
// new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify(process.env.API_URL)
}),
new CopyWebpackPlugin([
{
from: "src/public/app1/index.html",
to: "app1"
},
]),
],
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
// "react": "React",
// "react-dom": "ReactDOM"
}
}]
您可以看到我正在嘗試使用以下插件在webpack中設置環境變量
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify(process.env.API_URL)
}),
問題 :您可以在我的webpack配置中看到控制台登錄了process.env,但沒有顯示我在docker中設置的環境變量。
語境:
DockerFile
FROM node:10.16.0-alpine
# Bundle APP files
WORKDIR /app
COPY ./ /app/
# Install app dependencies
ENV NPM_CONFIG_LOGLEVEL warn
RUN npm ci
RUN npm run build
NPM
"build": "webpack --config webpack.prod.js",
docker-compose.yml文件中的環境變量僅在容器啟動時可用。
如果您希望它們在構建期間也可用,則可以使用build args:
version: '3'
services:
portal:
build:
context: .
dockerfile: Dockerfile
args:
- NODE_ENV=production
- PORT=8080
- API_URL=http://test.com
ports:
- "8080:8080"
然后,在您的Dockerfile中 ,使用ARG
命令聲明build args,然后聲明ENV
變量,將其設置為build args的值:
FROM node:10.16.0-alpine
# Build args
ARG NODE_ENV
ARG PORT
ARG API_URL
# Environment vars
ENV NODE_ENV=$NODE_ENV
ENV PORT=$PORT
ENV API_URL=$API_URL
# Bundle APP files
WORKDIR /app
COPY ./ /app/
# Install app dependencies
ENV NPM_CONFIG_LOGLEVEL warn
RUN npm ci
RUN npm run build
我希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.