如何为启用SSR的Angular应用配置HTTPS协议页面访问服务

@nguniversal/express-engine 生成的SSR项目默认启动的是Express HTTP服务，Angular CLI 自带的--ssl参数仅对纯客户端的ng serve生效，无法作用于SSR的Node服务，因此需要手动修改配置：

前置准备：准备SSL证书 #

可以使用自签名证书或者正规CA颁发的证书，本地开发推荐用mkcert生成受本地信任的证书，将生成的localhost-key.pem（私钥）和localhost.pem（证书）放到项目根目录。

1. 修改server.ts启动逻辑 #

打开项目根目录下的server.ts文件：

• 首先引入https和fs依赖：

import * as https from 'https';
import * as fs from 'fs';

• 找到原有HTTP服务启动的代码段，注释后替换为HTTPS启动逻辑：

// 原有HTTP启动代码，注释保留
// app.listen(PORT, () => {
//   console.log(`Node server listening on http://localhost:${PORT}`);
// });

// 新增HTTPS启动逻辑
const sslOptions = {
  key: fs.readFileSync('localhost-key.pem'),
  cert: fs.readFileSync('localhost.pem')
};

https.createServer(sslOptions, app).listen(PORT, () => {
  console.log(`SSR服务已启动，访问地址：https://localhost:${PORT}`);
});

2. （可选）同步配置客户端资源HTTPS加载 #

如果开发环境下需要客户端构建资源也走HTTPS协议，需要修改angular.json配置：
找到projects -> <你的项目名> -> architect -> serve-ssr -> options节点，新增以下配置：

"ssl": true,
"sslKey": "localhost-key.pem",
"sslCert": "localhost.pem"

3. 启动测试 #

直接运行原有启动命令即可，不需要加--ssl参数：

yarn dev:ssr

访问https://localhost:4200即可看到HTTPS访问的SSR页面。

生产环境建议 #

生产环境不推荐直接在Node SSR服务层配置HTTPS，更建议用Nginx、Caddy等反向代理服务统一处理HTTPS证书解析、静态资源托管，再将动态请求转发到本地Node服务的HTTP端口即可，性能更高，证书管理也更便捷。

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