如何配置Angular 13使用certbot证书启用HTTPS访问

分两种场景配置，别搞混开发环境和生产环境的配置逻辑。

场景1：本地开发调试（基于ng serve启动） #

• 在Angular项目根目录新建ssl文件夹，把certbot生成的4个pem文件全部复制到该文件夹内。

  注意：privkey.pem是证书私钥，属于敏感信息，必须把ssl/目录加入.gitignore，禁止提交到公开代码仓库。

• 打开项目根目录的angular.json文件，找到对应项目的serve配置节点（路径为projects -> 你的项目名 -> architect -> serve -> options），添加SSL相关配置：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-project-name:build",
      "ssl": true,
      "sslCert": "ssl/fullchain.pem",
      "sslKey": "ssl/privkey.pem",
      "host": "你的证书绑定的域名"
    },
    // 其他原有配置保持不变
  }
  

  这里必须用fullchain.pem作为证书文件，不要单独用cert.pem，否则会出现证书链不完整的信任错误。
• 修改本地hosts文件，把证书绑定的域名指向127.0.0.1，否则本地访问时会出现域名不匹配的证书错误。
• 执行ng serve启动项目，直接通过https://你的证书绑定的域名:4200访问即可。

场景2：生产环境部署 #

Angular 13打包后是纯静态资源，不要用ng serve跑生产服务，HTTPS层由托管静态资源的Web服务器处理，以最常用的Nginx为例：

• 执行生产构建命令：ng build --configuration production，构建产物默认输出到dist/你的项目名目录下。
• 把certbot生成的证书文件复制到Nginx的证书存放目录（通常为/etc/nginx/ssl/），给privkey.pem设置600权限，避免非授权用户读取私钥。
• 修改Nginx配置，新增HTTPS服务块：

  server {
      listen 443 ssl http2;
      server_name 你的证书绑定的域名; # 必须和certbot申请时填写的域名完全一致
  
      # SSL证书配置
      ssl_certificate /etc/nginx/ssl/fullchain.pem;
      ssl_certificate_key /etc/nginx/ssl/privkey.pem;
      # 通用SSL兼容配置
      ssl_protocols TLSv1.2 TLSv1.3;
      ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
      ssl_prefer_server_ciphers off;
  
      # 指向Angular构建产物的存放路径
      root /var/www/your-project/dist/your-project-name;
      index index.html;
  
      # 解决Angular前端路由刷新404问题
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      # 静态资源长期缓存，可选配置
      location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
          expires 1y;
          add_header Cache-Control "public, immutable";
      }
  }
  
  # 可选配置：HTTP请求自动跳转HTTPS
  server {
      listen 80;
      server_name 你的证书绑定的域名;
      return 301 https://$host$request_uri;
  }
  

• 执行nginx -t检查配置语法是否正确，确认无报错后执行systemctl reload nginx重载配置，即可通过域名HTTPS正常访问项目。

常见问题排查 #

• 浏览器提示证书不安全：先核对访问域名和证书绑定域名是否一致，certbot不会给localhost签发证书，本地用localhost访问必然报错；再检查是否误用cert.pem代替fullchain.pem导致证书链缺失；最后确认证书未过期，certbot自动续期后需要重载Web服务才会加载新证书。
• 本地启动ng serve报私钥权限错误：Windows下检查是否有其他程序占用pem文件，关闭占用进程即可；Linux/macOS下执行chmod 644 ssl/privkey.pem给当前用户添加读权限。
• 生产环境刷新子路由404：检查是否配置了try_files $uri $uri/ /index.html规则，Angular为前端路由，所有路径必须回退到index.html由前端路由处理。

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