Angular 5双项目AWS EC2部署：如何对外提供dist文件访问？

嘿，我来给你梳理几种简单靠谱的方式，不用折腾复杂配置就能搞定你的需求：

1. 先搞定你之前尝试的pm2 + http-server方案（大概率是配置细节没到位） #

你之前用pm2启动http-server没成功，可能是命令参数或者路径没写对，按下面的步骤来肯定能行：

• 先确保http-server已经全局安装：

  npm install -g http-server
  

• 分别给两个dist文件夹启动服务，用pm2管理进程（记得替换成你服务器上的实际路径）：

  # 启动InputService的dist，端口用你本地开发的6060
  pm2 start http-server --name "input-service" -- -p 6060 -d false /home/ubuntu/projectX/InputService/dist
  
  # 启动WebClient的dist，端口用4200
  pm2 start http-server --name "web-client" -- -p 4200 -d false /home/ubuntu/projectX/WebClient/dist
  

  这里的参数解释：
  • --name 给进程起个好记的名字，方便用pm2管理
  • -p 指定服务端口，和你本地开发的保持一致就行
  • -d false 关闭目录浏览功能，避免暴露文件结构
  • 最后跟上dist文件夹的绝对路径，这很重要，相对路径容易出问题
• 启动完后用pm2 status检查进程状态，要是显示online就没问题了
• 最后确认EC2安全组已经开放了6060和4200端口，现在就能通过http://你的EC2公网IP:4200和http://你的EC2公网IP:6060访问两个项目了

2. 更稳定的生产级方案：用Nginx #

如果你的项目打算长期运行，Nginx是更优选择，配置也没想象中复杂：

• 先安装Nginx（以Ubuntu为例）：

  sudo apt update && sudo apt install nginx
  

• 编辑Nginx的配置文件，比如修改默认站点配置：

  sudo nano /etc/nginx/sites-available/default
  

• 把里面的内容替换成下面的配置（同样替换成实际的dist路径）：

  # 配置WebClient，监听4200端口
  server {
      listen 4200;
      server_name _; # 如果有域名可以换成你的域名，比如web-client.example.com
      root /home/ubuntu/projectX/WebClient/dist;
      index index.html;
  
      # Angular单页应用必须加这个，解决刷新页面404的问题
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  
  # 配置InputService，监听6060端口
  server {
      listen 6060;
      server_name _;
      root /home/ubuntu/projectX/InputService/dist;
      index index.html;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

• 测试配置是否正确：

  sudo nginx -t
  

• 没问题就重启Nginx生效：

  sudo systemctl restart nginx
  

• 同样确认安全组开放端口，之后就能通过公网IP+端口访问了，Nginx比http-server更稳定，还能轻松扩展域名、HTTPS等功能

3. 关于Express：其实没必要（除非你需要额外后端逻辑） #

如果只是单纯托管静态的dist文件夹，完全没必要用Express，上面两种方式足够简单。但如果你之后需要加API转发、用户认证等后端功能，用Express也可以：

• 新建一个小项目，安装依赖：

  cd /home/ubuntu/projectX
  mkdir express-server && cd express-server
  npm init -y && npm install express
  

• 创建server.js文件，写入以下内容：

  const express = require('express');
  const path = require('path');
  
  // 实例化两个Express应用，分别对应两个项目
  const webClientApp = express();
  const inputServiceApp = express();
  
  // 托管WebClient的静态文件
  webClientApp.use(express.static(path.join(__dirname, '../WebClient/dist')));
  // 处理Angular单页应用的路由刷新
  webClientApp.get('*', (req, res) => {
      res.sendFile(path.join(__dirname, '../WebClient/dist/index.html'));
  });
  
  // 托管InputService的静态文件
  inputServiceApp.use(express.static(path.join(__dirname, '../InputService/dist')));
  inputServiceApp.get('*', (req, res) => {
      res.sendFile(path.join(__dirname, '../InputService/dist/index.html'));
  });
  
  // 启动服务
  webClientApp.listen(4200, () => {
      console.log('WebClient running on http://localhost:4200');
  });
  inputServiceApp.listen(6060, () => {
      console.log('InputService running on http://localhost:6060');
  });
  

• 用pm2启动这个服务：

  pm2 start server.js --name "angular-express-servers"
  

• 同样开放端口后就能访问了

总结 #

• 最快搞定：把pm2 + http-server的配置弄对，按第一步的命令来肯定能成
• 长期运行首选：Nginx，稳定、功能强
• Express仅在需要额外后端逻辑时考虑

内容的提问来源于stack exchange，提问作者Divide by Zero