如何在Ubuntu 18.04.5上用Angular CLI搭配自签名SSL证书在localhost启用HTTPS

生成适配localhost的自签名SSL证书 #

• Ubuntu 18.04 系统已默认预装OpenSSL，无需额外安装依赖，直接在终端执行以下命令生成有效期1年的证书与私钥：
  openssl req -x509 -newkey rsa:4096 -keyout localhost.key -out localhost.crt -days 365 -nodes -subj "//CN=localhost"
• 踩坑提醒：该版本Ubuntu自带的OpenSSL对-subj参数格式校验严格，必须用双斜杠开头的//CN=localhost，单斜杠写法会直接报“no objects specified”的生成错误，不要照搬其他操作系统的命令直接运行。
• 在Angular项目根目录新建ssl文件夹，把生成的localhost.key和localhost.crt两个文件放进去，同时把这两个文件路径加入.gitignore，避免私钥被提交到代码仓库。

配置Angular CLI启动HTTPS服务 #

临时单次启动（无需修改配置文件） #

• 直接在项目根目录执行带SSL参数的启动命令：
  ng serve --ssl true --ssl-key ./ssl/localhost.key --ssl-cert ./ssl/localhost.crt --host localhost
• 启动完成后访问https://localhost:4200即可，此时浏览器会弹出证书不受信任的提示，属于自签名证书的正常表现。

永久默认启用HTTPS（无需每次输入长参数） #

• 打开项目根目录的angular.json配置文件，定位到对应项目的服务配置路径：
  projects -> 你的项目名称 -> architect -> serve -> options
• 在options字段下追加如下配置，保存后直接执行ng serve就会默认以HTTPS协议启动服务：

  "ssl": true,
  "sslKey": "ssl/localhost.key",
  "sslCert": "ssl/localhost.crt"
  

• 注意所有路径都是相对于项目根目录的相对路径，不要写绝对路径，避免配置迁移后失效。

消除浏览器的“不安全连接”警告 #

自签名证书默认不被系统信任，要在Ubuntu 18.04环境下将证书加入本地信任根库：

• 把生成的证书文件复制到系统CA证书存储目录：
  sudo cp ./ssl/localhost.crt /usr/local/share/ca-certificates/
• 刷新系统本地证书信任列表：
  sudo update-ca-certificates
• 完全重启浏览器后再访问本地HTTPS地址，就不会再弹出证书无效的安全提示。

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