如何共享本地前后端联动的全栈WebApp？

针对前后端不同端口无法同时共享的问题，有以下几种可行方案：

方案一：Angular代理配置+单端口转发 #

通过Angular的代理功能，让前端请求自动转发到后端，统一使用前端端口后再用ngrok/localtunnel转发：

1. 在Angular项目根目录创建proxy.conf.json文件，写入以下配置：

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "changeOrigin": true
  }
}

（假设后端接口均以/api开头，可根据实际接口路径调整）

2. 修改angular.json中的serve配置项，添加代理文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 重启Angular服务：ng serve，此时前端发起的/api开头的请求会自动转发到后端localhost:8000。

4. 用ngrok转发前端端口：ngrok http 4200，测试人员访问ngrok生成的域名即可同时使用前后端服务。

方案二：双端口转发+修改前端API地址 #

分别用ngrok转发前后端端口，修改前端API请求地址为后端的ngrok域名：

1. 启动ngrok转发后端端口：ngrok http 8000，复制生成的HTTPS域名（比如https://abc123.ngrok.io）。

2. 修改Angular环境配置文件src/environments/environment.ts中的API地址：

export const environment = {
  production: false,
  apiUrl: "https://abc123.ngrok.io"
};

3. 重启Angular服务，再用ngrok转发前端端口：ngrok http 4200，测试人员访问前端的ngrok域名即可。

方案三：Nginx反向代理统一端口 #

用Nginx将前后端服务映射到同一个端口，再转发这个端口：

1. 安装Nginx：sudo apt install nginx

2. 创建Nginx配置文件/etc/nginx/sites-available/local-app，写入：

server {
  listen 80;

  # 转发前端请求
  location / {
    proxy_pass http://localhost:4200;
    proxy_set_header Host $host;
  }

  # 转发后端API请求
  location /api {
    proxy_pass http://localhost:8000;
    proxy_set_header Host $host;
  }
}

3. 启用配置并重启Nginx：

sudo ln -s /etc/nginx/sites-available/local-app /etc/nginx/sites-enabled/
sudo systemctl restart nginx

4. 用ngrok转发80端口：ngrok http 80，测试人员访问ngrok域名即可访问整个全栈应用。

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