根路径静态着陆页+子路径Angular 12部署方案咨询（AWS EC2）

1. 配置Angular应用基础路径 #

构建Angular应用时指定根路径作为基础路径，确保路由能正确识别/profile和/dashboard：

ng build --prod --base-href "/"

同时确认Angular路由模块中已配置/profile、/dashboard的路由规则。

2. 部署文件到EC2 #

• 将静态着陆页的所有文件（HTML、CSS、图片等）上传至Nginx默认静态目录，例如/usr/share/nginx/html/
• 将Angular构建后dist目录下的所有文件，同样上传到上述同一目录下（无需单独存放）

3. 配置Nginx路由规则 #

修改Nginx站点配置文件（通常路径为/etc/nginx/sites-available/default），更新server块内容如下：

server {
    listen 80;
    server_name example.com;

    root /usr/share/nginx/html;
    index index.html;

    # 转发API请求到Nest后端
    location /api {
        proxy_pass http://localhost:3000; # 替换为你的Nest服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 让Angular接管/profile和/dashboard路由
    location ~ ^/(profile|dashboard) {
        try_files $uri $uri/ /index.html;
    }

    # 根路径返回静态着陆页，其他静态资源正常加载
    location / {
        try_files $uri $uri/ =404;
    }
}

4. 实现无缝切换体验 #

• 在静态着陆页的导航链接中直接使用绝对路径，比如<a href="/profile">个人中心</a>，确保跳转路径正确
• 统一静态着陆页与Angular应用的全局样式（如导航栏、字体、配色），保证视觉上的无缝过渡
• 开启Angular的代码分割优化，减少首次加载体积，提升跳转后的加载速度

5. 生效配置 #

验证Nginx配置无误后重启服务：

nginx -t
systemctl restart nginx

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