react 前端项目打包成 docker 后如何灵活配置后端地址呢?

[inkWave]

不用框架的方法我知道,写个配置文件,然后引入文件去读里面的配置.
但是用了 react 之后我不知道怎么实现这个效果了.

需求:
能够在 docker run 的时候,通过环境变量或者挂入配置文件的方式来灵活配置后端地址.

我现在的办法:
docker run 的时候再去 build 项目.但是这样太慢了.
网上搜了一大圈,没找到解决办法.

劳烦各位大神帮帮忙,出出主意.

算是解决了吧.感觉不够优雅.

react 在 public 下建个 config 文件夹,放个 config.json.(vue 好像是 static,没用过,查 react 的时候看到的).
然后在 axios(或者别的 http 客户端)初始化的时候,加载静态文件 config.json.
加载完了做自己相应的处理就好.

npm run build 然后打成镜像之后,在 build 目录下会有 config 文件夹.
docker run 的时候只要把对应的 config 目录挂进去就行.

不知道各位大神还有没有别的更好的办法.

[fool079]

后端绑个域名

[xxapp]

有个办法和你的发请求获取的思路差不多, 不过不需要异步发请求, 通过 window 共享配置就好了

[inkWave]

@xxapp 能稍微展开说说嘛？发请求这个总觉得很丑陋。

[xxapp]

@inkWave 举个例子，runtime-main.js 是 webpack 打出的 bundle，runtime-config.js 是运行时的配置，可以在 build 之后修改
``` html
<script src="runtime-config.js" />
<script src="runtime-main.js" />
```

``` js
// runtime-config.js
window.HOST = 'https://v2ex.com';
```

``` js
// runtime-main.js
// ...
var host = window.HOST;
// ...
```

[inkWave]

@xxapp 我靠!懂了.之前居然没想到.太感谢了.