Vue/Express应用部署至Azure后出现net::ERR_CONNECTION_REFUSED连接错误

问题根源 #

你遇到的ERR_CONNECTION_REFUSED本质是前端代码的执行环境误解了localhost的指向：

• 本地运行时，前端和服务端都在你的开发机器上，浏览器里的localhost指向你的电脑，所以能正常访问localhost:2800；
• 部署到Azure后，前端代码是在用户的浏览器里执行的，此时localhost指的是用户自己的本地机器，而非Azure主机上的server容器，自然无法连接到服务端。

解决方案 #

方案1：配置前端API地址为Azure公网地址（简单直接）

1. 在Vue项目中使用环境变量管理API地址
   在Vue项目根目录创建.env.production文件，添加：

   VUE_APP_API_BASE_URL=https://<你的Azure主机公网IP或域名>:2800
   

   注意：需要在Azure的网络安全组中开放2800端口的入站规则，允许HTTP/HTTPS流量。

2. 修改前端请求代码
   将所有API请求的硬编码localhost:2800替换为环境变量：

   // 示例：原请求
   // axios.get('http://localhost:2800/citySearch?keyword=m')
   // 修改后
   axios.get(`${process.env.VUE_APP_API_BASE_URL}/citySearch?keyword=m`)
   

3. 重新构建并推送客户端镜像
   重新构建Vue应用，将新镜像推送到你的Azure容器注册表（ACR），再重新部署Docker Compose。

方案2：用Nginx反向代理统一端口（更安全，推荐）

通过Nginx将前端静态资源和API请求统一到80端口，无需暴露多个端口，同时避免跨域问题：

1. 修改docker-compose.yml
   添加Nginx服务，移除server的对外端口：

   version: '3.4'
   services:
     server:
       image: 1a4devcontain.azurecr.io/amadeus-flight-booking-node-server
       container_name: server-container
       environment:
         AMADEUS_CLIENT_ID: ${AMADEUS_CLIENT_ID:-}
         AMADEUS_CLIENT_SECRET: ${AMADEUS_CLIENT_SECRET:-}
       # 取消对外暴露端口，仅让Nginx内部访问
       # ports:
       #   - 2800:2800
     client:
       image: 1a4devcontain.azurecr.io/amadeus-flight-booking-node-client
       container_name: client-container
       environment:
         AMADEUS_CLIENT_ID: ${AMADEUS_CLIENT_ID:-}
         AMADEUS_CLIENT_SECRET: ${AMADEUS_CLIENT_SECRET:-}
       depends_on:
         - server
     nginx:
       image: nginx:alpine
       container_name: nginx-proxy
       ports:
         - 80:80  # 仅开放80端口给外部
       volumes:
         - ./nginx.conf:/etc/nginx/conf.d/default.conf
       depends_on:
         - client
         - server
   

2. 创建Nginx配置文件nginx.conf
   配置反向代理规则，将/api路径转发到server容器：

   server {
       listen 80;
       server_name localhost;
   
       # 转发前端静态资源到client容器
       location / {
           proxy_pass http://client:8080;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   
       # 转发API请求到server容器
       location /api/ {
           proxy_pass http://server:2800/;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

3. 修改Vue项目配置和请求代码

   • 更新vue.config.js，添加本地开发的代理规则，保证本地和云端行为一致：

     // vue.config.js
     module.exports = {
       publicPath: "",
       runtimeCompiler: true,
       devServer: {
         disableHostCheck: true,
         port: 8080,
         proxy: {
           '/api': {
             target: 'http://localhost:2800',
             changeOrigin: true,
             pathRewrite: { '^/api': '' }
           }
         }
       }
     }
     

   • 将前端请求改为相对路径：

     axios.get('/api/citySearch?keyword=m')
     

4. 重新构建镜像并部署
   重新构建客户端镜像推送到ACR，然后部署更新后的Docker Compose，Azure仅需开放80端口即可。

为什么之前的修改无效？ #

你调整的vue.config.js中的public配置，是用来指定前端静态资源的部署路径，和API请求的目标地址没有关系，所以无法解决连接拒绝的问题。

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