V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
inkWave
V2EX  ›  编程

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

  •  
  •   inkWave · 2019-09-02 12:44:50 +08:00 · 6495 次点击
    这是一个创建于 1669 天前的主题,其中的信息可能已经有所发展或是发生改变。
    不用框架的方法我知道,写个配置文件,然后引入文件去读里面的配置.
    但是用了 react 之后我不知道怎么实现这个效果了.

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

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

    劳烦各位大神帮帮忙,出出主意.
    第 1 条附言  ·  2019-09-02 17:38:55 +08:00
    算是解决了吧.感觉不够优雅.

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

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

    不知道各位大神还有没有别的更好的办法.
    5 条回复    2019-09-04 10:29:06 +08:00
    fool079
        1
    fool079  
       2019-09-02 15:04:27 +08:00
    后端绑个域名
    xxapp
        2
    xxapp  
       2019-09-03 22:37:19 +08:00 via Android
    有个办法和你的发请求获取的思路差不多, 不过不需要异步发请求, 通过 window 共享配置就好了
    inkWave
        3
    inkWave  
    OP
       2019-09-03 23:39:09 +08:00
    @xxapp 能稍微展开说说嘛?发请求这个总觉得很丑陋。
    xxapp
        4
    xxapp  
       2019-09-04 09:19:08 +08:00
    @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
        5
    inkWave  
    OP
       2019-09-04 10:29:06 +08:00
    @xxapp 我靠!懂了.之前居然没想到.太感谢了.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3484 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:53 · PVG 18:53 · LAX 03:53 · JFK 06:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.