Vite构建React应用：Docker部署下替换硬编码IP为外部变量

完全可行，针对Vite+Docker的场景，有几种成熟的方案可以实现构建后动态读取外部配置，避免硬编码服务器IP：

方案1：静态资源目录存放配置文件，运行时异步加载 #

这是最直接的方式，利用Vite对public目录的处理特性，将配置文件放在该目录下，构建后会被完整复制到dist根目录，运行时通过HTTP请求读取：

• 在项目根目录的public文件夹中创建config.json：

  {
    "serverIp": "http://your-default-ip:8080"
  }
  

• 在应用代码中封装配置加载函数：

  // src/utils/config.js
  export async function loadConfig() {
    const res = await fetch('/config.json');
    return res.json();
  }
  

• 在需要使用服务器IP的地方调用：

  import { loadConfig } from '@/utils/config';
  
  async function fetchServerData() {
    const { serverIp } = await loadConfig();
    const response = await fetch(`${serverIp}/api/data`);
    // 处理业务逻辑
  }
  

• Docker部署时，通过挂载文件动态替换配置：

  docker run -v /host/path/your-custom-config.json:/app/dist/config.json your-app-image
  

方案2：Nginx反向代理结合环境变量注入 #

如果用Nginx作为容器内的Web服务器，可以通过sub_filter模块在响应阶段替换页面中的占位符：

• 代码中使用占位符代替硬编码IP：

  // src/api/index.js
  const BASE_API_URL = '__SERVER_IP_PLACEHOLDER__';
  
  export async function getApiData() {
    return fetch(`${BASE_API_URL}/api/list`);
  }
  

• 编写Nginx配置，开启sub_filter：

  server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
  
    sub_filter '__SERVER_IP_PLACEHOLDER__' '$dynamic_server_ip';
    sub_filter_once off;
  
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 编写Docker启动脚本，替换Nginx配置中的变量：

  #!/bin/sh
  sed -i "s/\$dynamic_server_ip/$SERVER_IP/g" /etc/nginx/conf.d/default.conf
  nginx -g 'daemon off;'
  

• Docker运行时传入环境变量：

  docker run -e SERVER_IP=http://your-new-ip:8080 your-nginx-app-image
  

方案3：Vite环境变量占位符+启动时全局替换 #

利用Vite的import.meta.env特性，先设置占位符，再在Docker启动时批量替换构建后的文件内容：

• 在.env文件中定义占位符：

  VITE_SERVER_IP=__DYNAMIC_IP__
  

• 代码中直接使用该变量：

  const serverIp = import.meta.env.VITE_SERVER_IP;
  

• 编写Docker启动脚本，替换构建产物中的占位符：

  #!/bin/sh
  sed -i "s/__DYNAMIC_IP__/$SERVER_IP/g" /app/dist/**/*.js
  nginx -g 'daemon off;'
  

• 启动容器时传入动态IP：

  docker run -e SERVER_IP=http://your-target-ip:8080 your-app-image
  

内容的提问来源于stack exchange，提问作者Aleks