如何为Angular SSR的TypeScript版Express服务器添加SSL支持？

我来帮你梳理下在Angular SSR的TypeScript server.ts中配置SSL的具体方法，另外也聊聊你最后采用的反向代理方案：

一、直接在server.ts中配置SSL #

首先你需要准备好SSL证书文件（比如cert.pem和key.pem），测试环境可以用OpenSSL生成自签名证书：

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

接下来修改你的server.ts，核心是引入Node.js的https模块，用HTTPS服务器替代原来的HTTP服务器启动方式，完整修改后的代码如下：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import * as https from 'https'; // 新增导入https模块
import { join } from 'path';
import { readFileSync } from 'fs';

enableProdMode();
const app = express();
const PORT = process.env.PORT || 443; // HTTPS默认端口为443，也可自定义
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

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

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// 新增SSL配置
const sslOptions = {
  key: readFileSync(join(process.cwd(), 'key.pem')), // 替换为你的密钥文件路径
  cert: readFileSync(join(process.cwd(), 'cert.pem')) // 替换为你的证书文件路径
};

// 用HTTPS服务器启动服务，替代原有的app.listen
https.createServer(sslOptions, app).listen(PORT, () => {
  console.log(`Node server listening on https://localhost:${PORT}`);
});

注意事项 #

• 如果使用非443的自定义端口，访问时需要明确加上端口号，比如https://localhost:4000
• 生产环境建议使用可信CA颁发的正式证书，避免浏览器弹出不安全提示

二、反向代理方案（你最终采用的方案） #

在生产环境中，更推荐用反向代理（比如Nginx、Apache）来处理SSL，这种方式更灵活且性能更优——你的Express服务器可以继续运行在HTTP模式下，由反向代理负责SSL终止和请求转发。

以Nginx为例，配置示例如下：

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    location / {
        proxy_pass http://localhost:4000; // 转发到你的Express服务器端口
        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;
    }
}

# 可选：将所有HTTP请求重定向到HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

这种方案的优势：

• 反向代理在SSL处理上更成熟，支持更多加密套件和性能优化
• 可轻松扩展负载均衡、静态资源缓存等高级功能
• Angular SSR代码无需修改，专注于业务逻辑即可

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