如何构建Angular项目并上传至服务器？Angular Universal部署疑问

1. 确认服务器基础环境 #

• 服务器需安装与本地开发环境兼容的Node.js（优先选LTS版本）
• 确保服务器具备Node应用运行权限，开放对应端口（默认常用4000，可自定义）

2. 上传构建产物 #

• 将dist目录下的browser和server两个文件夹完整上传至服务器的目标部署目录（例如/var/www/angular-universal-app）
• 无需保留之前单独的assets文件夹，构建后的browser目录已包含所有静态资源（含原assets内容）

3. 配置启动脚本 #

在服务器的项目根目录（即存放browser和server的目录）创建server.js启动文件，内容示例：

const express = require('express');
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const path = require('path');

const app = express();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [provideModuleMap(LAZY_MODULE_MAP)]
}));

app.set('view engine', 'html');
app.set('views', path.join(__dirname, 'browser'));

// 处理静态资源
app.get('*.*', express.static(path.join(__dirname, 'browser'), { maxAge: '1y' }));
// 处理所有路由请求
app.get('*', (req, res) => res.render('index', { req }));

const port = process.env.PORT || 4000;
app.listen(port, () => console.log(`应用运行在 http://localhost:${port}`));

4. 安装依赖 #

• 在服务器项目目录执行npm install，确保安装所有生产环境依赖；若本地已执行npm ci --only=production，可直接上传生成的node_modules文件夹，避免服务器安装时的网络问题

5. 启动并守护应用 #

• 直接启动：执行node server.js，测试访问http://服务器IP:4000
• 后台持续运行（推荐）：使用pm2进程管理工具
  • 安装pm2：npm install pm2 -g
  • 启动应用：pm2 start server.js --name angular-universal-app
  • 查看状态：pm2 status
  • 停止应用：pm2 stop angular-universal-app

6. 反向代理配置（可选） #

若用Nginx做反向代理，配置示例如下：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

配置后可通过域名直接访问，无需携带端口号

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