如何让WebServer通过npm start运行Angular 5应用并解决远程代理失效问题

我来帮你搞定这个Angular代理失效的问题，刚好对应你提到的两个解决方向，咱们一步步来：

这个方案适合远程是开发/测试环境的场景，核心是确保远程启动时加载你的代理配置文件：

• 先确认你本地package.json里的start脚本已经包含代理配置，比如：

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
  

• 远程部署时，不要直接执行ng serve，而是运行npm start，这样会自动读取你的proxy.conf.json配置，和本地行为保持一致。
• 注意：一定要把proxy.conf.json文件同步到远程服务器上，路径要和本地一致，不然会找不到配置文件。

如果远程是生产环境，强烈不推荐用ng serve（它是开发服务器，性能和安全性都不适合生产），这时候我们需要用ng build生成静态文件，然后在WebServer层面配置反向代理：

示例1：Nginx配置反向代理 #

• 编辑Nginx的站点配置文件，添加以下规则：

  server {
    listen 80;
    server_name your-domain.com;
    # 指向Angular构建后的dist目录
    root /path/to/your/angular/dist/folder;
    index index.html;
  
    # 把API请求转发到后端服务
    location /api/ {
      proxy_pass http://your-api-server-address/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  
    # 处理Angular单页应用的路由跳转
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 重启Nginx生效：sudo systemctl restart nginx

示例2：Apache配置反向代理 #

• 先启用必要的模块：

  sudo a2enmod proxy proxy_http rewrite
  

• 编辑Apache的站点配置文件：

  <VirtualHost *:80>
    ServerName your-domain.com
    DocumentRoot /path/to/your/angular/dist/folder
  
    # API请求转发规则
    ProxyPass /api/ http://your-api-server-address/
    ProxyPassReverse /api/ http://your-api-server-address/
  
    # 支持Angular路由刷新
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </VirtualHost>
  

• 重启Apache生效：sudo systemctl restart apache2

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