如何为我的 Angular 17 应用程序生成本地主机 SSL 证书？

Question

我想生成一个本地主机证书，以便在我的 Angular 17 应用程序中使用 SSL。 Angular 通过在开发服务器 (Vite) 中配置 SSL 来提供 SSL：

{
  "ssl": true,
  "sslKey": "./path_to_your_key.key",
  "sslCert": "./path_to_your_certificate.crt"
}

为了生成本地主机密钥和证书，我找到了使用 mkcert 的解决方案。然而，mkcert 需要在每个开发人员的计算机上安装，这很不方便，特别是对于使用 Windows 的开发人员。而且，我有多个不需要 HTTPS 的项目，所以我不想使用 mkcert。

ChatGPT 建议的另一个解决方案涉及运行以下 OpenSSL 命令：

openssl genpkey -algorithm RSA -out localhost.key -pkeyopt rsa_keygen_bits:2048
openssl req -new -key localhost.key -out localhost.csr -subj "/C=US/ST=State/L=City/O=Organization/OU=OrgUnit/CN=localhost"
openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt

我在 Angular 应用程序中配置了生成的文件，如下所示：

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

但是，当我在 https://localhost:4300 打开浏览器时，遇到错误：“您的连接不是私有的。”

我还发现了一个要点here建议使用以下命令来创建 RootCA：

openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Example-Root-CA"
openssl x509 -outform pem -in RootCA.pem -out RootCA.crt

生成 RootCA 文件并在 Angular 中设置它们后，我仍然遇到同样的问题：“您的连接不是私有的。”

我不确定还需要做什么或如何解决这个问题。任何指导将不胜感激。

Answer 1

今天我也不得不做同样的事情。经过一番反复安装和删除证书，并在 https://www.youtube.com/watch?v=OWjVXb7-mSU 和他相应的 git 存储库 https://gist 的帮助下。 github.com/arundhaj/d1ee3ca087208e843c4cff20a5d0a8df 我能够获得运行在我的 Angular 应用程序（当前为 v18）。

您需要安装/使用 OpenSSL 来生成证书。我没有安装 OpenSSL，但是，之前安装了 Git，我在 C:\Program Files\Git\usr 文件夹中找到了 openssl.exe。

1. 为了简单起见，我以管理员身份运行 Powershell 并导航到 Git bin 目录：

cd C:\"Program Files"\Git\usr\bin

2. 在此文件夹中创建一个certificate.cnf 文件，其中包含类似于以下代码的内容（从我之前提到的 git 存储库中获取并调整）。您可以随意更改组织详细信息，但不要更改本地主机设置：

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn

[dn]
C = UK
ST = United Kingdom
L = United Kingdom
O = My Organisation
OU = My Organisational Unit
emailAddress = [email protected]
CN = localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

3. 通过在 OpenSSL.exe 和新创建的certificate.cnf 文件所在的同一文件夹中运行以下命令，生成有效期为 10 年的 localhost.crt 和 localhost.key 文件（这应该足够了！）：

./openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3650 -out localhost.crt -config certificate.cnf

4. 将 localhost.crt 和 localhost.key 文件移至您的 Angular 项目。就我而言，我将它们放在 src\ssl 文件夹中。如果您需要重复此过程，您可以删除certificate.cnf或将其放在某个地方妥善保管。

5. 修改 angular.json 文件的serve -> options 部分以使用ssl：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "ssl": true,
    "sslKey": "src/ssl/localhost.key",
    "sslCert": "src/ssl/localhost.crt"
  },
  ..etc

6. 从 Windows 开始菜单启动管理用户证书（键入 cert 并从结果中选择它）
7. 转到“受信任的根证书”->“证书”，右键单击“证书”，然后单击“所有任务”->“导入”。浏览移动到 Angular 项目中的 localhost.crt 文件，单击“下一步”并确保它将证书放置在“受信任的根证书颁发机构”证书存储中。单击下一步并完成。
8. 关闭所有打开的浏览器并从 Angular 应用程序运行

   ng serve -o

   。它现在应该启动 https://localhost:4200 而不会出现证书警告，但是，它很可能会缓存您以前的不安全证书信息，因此，如果您仍然看到警告，请确保通过以下方式清除 localhost 站点数据转到开发人员工具 (F12) -> 应用程序选项卡 -> 存储，然后单击清除站点数据按钮。就我而言，为了证明它正在被缓存，我打开了一个新的隐身窗口，并且能够在没有证书警告的情况下访问 https://localhost:4200，这证明我需要清除站点数据。

我希望这会有所帮助，而且不会太长。这只是我关于堆栈溢出的第三篇文章，所以我可能需要简洁一点！