我使用创建了一个演示反应应用程序
npm create vite
我将
App.tsx
更改如下:
function App() {
console.log('!!!!!!!!!!!!!!!!!!')
console.log(JSON.stringify(import.meta.env))
console.log('!!!!!!!!!!!!!!!!!!')
return (
<h1>MY APP</h1>
)
}
export default App
我想传递几个环境变量,特别是后端 URL。 我尝试过多种方式来通过。
我的
Dockerfile
:
FROM nginx:latest AS BASE
# trying setting variable in dockerfile
ENV REACT_APP_BACKEND_URL5=http://www.five.com
# trying to take varibles from environment or args, as I have seen in different posts
ARG REACT_APP_BACKEND_URL1
ARG REACT_APP_BACKEND_URL3
ENV REACT_APP_BACKEND_URL1 $REACT_APP_BACKEND_URL1
ENV REACT_APP_BACKEND_URL3 $REACT_APP_BACKEND_URL3
#delete default welcome page
RUN rm -rf /user/share/nginx/html/*
# copying the built app
COPY ./dist /usr/share/nginx/html
# exposing the port where nginx is listening to the outside
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
我的
docker-compose.yml
:
version: '3.7'
services:
myapp:
container_name: app_front
build:
context: .
args:
- REACT_APP_BACKEND_URL3=http://www.three.com
- REACT_APP_BACKEND_URL4=http://www.four.com
ports:
- 8080:80
environment:
- REACT_APP_BACKEND_URL1=http://www.one.com
- REACT_APP_BACKEND_URL2=http://www.two.com
我如何运行应用程序:
npm run build
docker-compose up
在新创建的容器中打开终端时,
echo $REACT_APP_BACKEND_URL<NUMBER>
返回除 #4 之外的所有变量的预期值。 所以变量确实是在容器中设置的。 但是,当打开
localhost:8080
并查看控制台时,我只能看到
{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false}
我的问题是什么? 谢谢
Vite 和其他构建工具读取您的环境变量,并用其值替换代码中的引用。含义:构建时间的值已经硬编码到您的 JavaScript 构建中,并且只能通过大量努力才能更改。这是因为 JavaScript 在用户的浏览器中运行,并且用户无权访问 docker 容器中的环境变量。
你现在做什么? 您需要以某种方式从其他地方获取后端网址。 有多种方法可以实现它。 我不知道这是否可以称为最佳实践,但这是我通常如何实现可以在运行时配置的反应构建: