请求Angular Universal部署至AWS Lightsail Ubuntu服务器的分步指南

1. 服务器环境初始化 #

• 登录服务器：通过SSH连接到你的Lightsail Ubuntu实例，执行ssh ubuntu@[你的服务器公网IP]
• 更新系统包：sudo apt update && sudo apt upgrade -y
• 安装Node.js与npm：
  1. 安装nvm版本管理器：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  2. 刷新终端环境：source ~/.bashrc
  3. 安装LTS版本Node.js：nvm install --lts
  4. 验证安装：node -v、npm -v
• 安装PM2进程管理器：npm install -g pm2
• 安装Nginx反向代理：sudo apt install nginx -y，设置开机自启并启动：sudo systemctl enable nginx && sudo systemctl start nginx

2. 上传本地构建文件 #

• 从本地项目根目录，将dist文件夹传输至服务器：scp -r ./dist ubuntu@[你的服务器公网IP]:/home/ubuntu/
• 也可使用SFTP工具（如FileZilla）可视化完成文件上传，目标路径设为/home/ubuntu/

3. 配置Angular Universal服务端 #

• 进入服务器上的服务端代码目录：cd /home/ubuntu/dist/server
• 安装生产依赖：npm install --production
• 测试服务启动：node main.js，确认无报错后按Ctrl+C停止临时进程

4. 用PM2托管服务 #

• 启动服务并命名：pm2 start main.js --name angular-ssr
• 设置PM2开机自启：执行pm2 startup ubuntu，按照终端提示运行生成的sudo命令完成配置
• 保存当前PM2进程配置：pm2 save
• 查看服务状态：pm2 status，确保服务处于online状态

5. 配置Nginx反向代理 #

• 备份默认配置：sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
• 编辑Nginx配置文件：sudo nano /etc/nginx/sites-available/default
• 将默认server块替换为以下内容（注意替换服务器IP/域名，端口需与Angular Universal配置一致，默认是4000）：

server {
    listen 80;
    server_name [你的服务器IP/域名];

    root /home/ubuntu/dist/browser;
    index index.html index.htm;

    # 优先处理静态资源
    location / {
        try_files $uri $uri/ @ssr;
    }

    # 反向代理至SSR服务
    location @ssr {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

• 验证配置合法性：sudo nginx -t，输出test is successful则继续
• 重启Nginx生效配置：sudo systemctl restart nginx

6. 防火墙规则配置 #

• 启用UFW防火墙（若未启用）：sudo ufw enable
• 允许必要端口流量：sudo ufw allow 80/tcp && sudo ufw allow 22/tcp
• 验证规则：sudo ufw status，确认80（HTTP）和22（SSH）端口已开放

7. 验证部署效果 #

• 在浏览器访问服务器IP/域名，确认项目正常加载
• 查看页面源代码，若能看到渲染后的完整HTML内容，说明SSR功能生效
• 排查问题可查看PM2日志：pm2 logs angular-ssr

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