让angular-cli在HTTPS上运行ng serve

Question

以下代码似乎没有任何作用。

ng serve --ssl true --ssl-key <key-path> --ssl-cert <cert-path>

创建证书和密钥并将它们提供到默认的ssl目录中仍然没有作用。

看起来 `ng server` 完全忽略了 `--ssl` 参数，并且一直显示 `NG Live Development Server is running on http://localhost:4200.`。

- grim_i_am

---

尝试运行 ng serve --ssl 1 --ssl-key "ssl/local.brianflove.com.key" --ssl-cert "ssl/local.brianflove.com.crt"。 - Andreas

我在这里写了一个简短的文档（仅适用于本地开发环境）：https://github.com/webia1/Frontend-Ecosystem/tree/main/Angular/Documentation/HTTPS - undefined

Answer 1

Angular CLI 6+

我已经更新了自己的项目，所以我想现在也可以更新这个答案。

现在，您需要在angular.json文件中按以下方式设置密钥和证书的路径：

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "projects": {
       "<PROJECT-NAME>": {
           "architect": {
               "serve: {
                   "options": {
                       "sslKey": "<relative path from angular.json>/server.key",
                       "sslCert": "<relative path from angular.json>/server.crt",
                       ...
                   }, ...
               }, ...
           }, ...
       }, ...
   }, ...
}

接着你可以运行：

ng serve --ssl

如果您想默认启用 SSL，则应在 sslKey 和 sslCert 下方立即添加 "ssl": true, 选项。

您可以在Angular CLI文档中找到angular.json模式。

对于 Angular CLI 1.0.0+ 版本的旧答案：

Angular-CLI 现在支持 SSL 选项。如您所见，您可以使用以下命令手动选择要使用哪个密钥和证书：

ng serve --ssl --ssl-key <key-path> --ssl-cert <cert-path>

如果您想设置默认路径来存储您的密钥和证书，则可以进入您的.angular-cli.json文件并相应地调整“Defaults”部分：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "defaults": {
        "serve": {
            "sslKey": "<relative path from .angular-cli.json>/server.key",
            "sslCert": "<relative path from .angular-cli.json>/server.crt",
            ...
        }, ...
    }, ...
}

然后你可以运行：

ng serve --ssl

如果您希望默认启用SSL，则应在sslKey和sslCert下方立即添加一个"ssl": true,选项。

- Taul

---

"ssl": "true" 将默认启动 SSL。 - JustRandom

@Dominik，请问在哪里写入 "ssl" : "true"？你能告诉我是在 ng serve 命令中还是在 angular-cli.json 文件中吗？谢谢。 - Mahi

@Ahmadmnzr 它将是 serve 对象内的另一个键值对。因此，它将位于“sslCert”下面的行上：“<.angular-cli.json 相对路径>/server.crt”。 - Taul

Answer 2

你可以使用。

--ssl

或者

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "someapp:build",
            "ssl": true
          },

并且会为您自动生成SSL证书。

然后，要使Chrome接受本地主机的自签名证书，请设置此标志：chrome://flags/#allow-insecure-localhost

您还需要将证书导入到可信根证书中。为此，请在Chrome顶部单击证书错误，然后：

1. 点击证书（无效）
2. 点击详细信息选项卡
3. 点击复制到文件...
4. 下一步，完成并将其导出到某个位置。
5. 开始 -> 运行 ->inetcpl.cpl
6. 点击内容选项卡
7. 点击证书
8. 点击受信任的根证书颁发机构选项卡
9. 点击导入按钮
10. 导入证书
11. 重新运行ng serve --ssl

请注意，该证书仅有效期为一个月。在那一个月结束时，您将难以找到解决方案，但我已经经历过这种情况，这里有解决方法

- Post Impatica

---

在 Mac 上使用 --ssl 时，我还需要将 --port 标志留空并以管理员身份运行 ng serve。sudo ng serve --ssl --host localdeveloper.whatever.com。在 Mac 上解析 localdeveloper.whatever.com（即添加另一个 localhost hosts 文件条目）需要进行别名设置，这是另一个 s.o. 问题的主题。 - Brian Bobek

如果没有起作用，移除现金。 - Abdullah Tahan

需要更新的代码片段位于您项目的 angular.json 文件中。希望这能帮助许多新的 Angular 开发人员。 - Heike

只是提醒一下，Chrome在119版本中移除了allow-insecure-localhost标志。 - undefined

Answer 3

如果您不想进行配置，只需添加--ssl。

ng serve --ssl

工作正常，它将自动为您创建证书。在Chrome浏览器上进行了测试。它会显示“不受信任的连接”，但只需继续即可。

希望这可以帮助到您

- Akitha_MJ

---

注意，这个证书只有一个月的有效期。当它过期时，您将会四处奔波寻找解决方法。我曾经也遇到过这个问题，所以请参考这个链接：https://dev59.com/sb3pa4cB1Zd3GeqPYiaU#63814027。 - Post Impatica

chrome://flags/#allow-insecure-localhost FTW - Rubens Farias

@RubensFarias 英雄 - user1998096

@RubensFarias 英雄 - undefined

@PostImpatica 你是说证书只能持续一个月？难道每次我重新启动应用程序时它不会更新吗？ - undefined

Answer 4

提醒一下，在Angular6中，您需要将配置放在选项中（即angular.json文件中）：

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "app:build",
        "ssl": true,
        "sslKey": "path to .key",
        "sslCert": "path to .crt"
    },
    ...
}

- Cyril Blanchet

Answer 5

非常简单的解决方案来自此页面

npm install browser-sync --save-dev

然后

ng serve --ssl true --ssl-key ./node_modules/browser-sync/certs/server.key --ssl-cert ./node_modules/browser-sync/certs/server.crt

快速而大胆） 刚在我的Angular CLI 6.2.3项目中使用它

- Alexander Poshtaruk

---

FYI，这在angular.json文件中仍然非常有效，但路径已更改："ssl": true, "sslKey": "/node_modules/browser-sync/certs/server.key", "sslCert": "/node_modules/browser-sync/certs/server.crt", - James Hancock

关于最新的Angular版本：12.0.5，Node.js版本为v14.17.1，browser-sync版本为^2.26.14。更新命令如下：ng serve --ssl true --ssl-key ./node_modules/browser-sync/certs/server.key --ssl-cert ./node_modules/browser-sync/certs/server.crt。 - ChinaHelloWorld

它不起作用。我们必须“接受风险”，而https始终为红色！ - Anh-Thi DINH

Answer 6

为了补充这个解决方案，如果你曾经想知道如何为本地主机生成密钥和证书，那么这是一篇非常好的逐步介绍文章：https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec。

- wawka

---

首先需要先解释清楚，然后提供链接，这是推荐的做法。如果链接失效，那么你只会得到负面评价，而人们也无法获得所需的知识。 - Satish Patro

虽然这个链接可能回答了问题，但最好在这里包含答案的关键部分，并提供链接作为参考。仅有链接的答案可能会因为链接页面的更改而失效。- 来自评论 - undefined

Answer 7

如果您想创建自己的证书并将其添加到MAC的受信任密钥链中，我们将使用OpenSSL生成所有证书。

步骤1：根SSL证书

步骤2：信任根SSL证书

步骤3：域SSL证书

步骤4：使用您的新SSL证书

# Step 1: Root SSL certificate

    openssl genrsa -des3 -out rootCA.key 2048
    openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

# Step 2: Trust the root SSL certificate

在您可以使用新创建的根SSL证书开始发放域证书之前，还有一步。您需要告诉您的Mac信任您的根证书，以便由它颁发的所有个人证书也都受信任。

在Mac上的钥匙串访问器中，转到系统钥匙串中的证书类别。一旦在那里，使用“文件>导入项目”导入rootCA.pem。双击导入的证书，并在信任部分中将“使用此证书时：”下拉菜单更改为始终信任。

如果您已正确按照说明执行操作，则您的证书应在Keychain Access中如下所示。

# Step 3: Domain SSL certificate

根SSL证书现在可以用于为位于localhost的本地开发环境专门发行证书。

创建一个名为server.csr.cnf的新OpenSSL配置文件，以便在创建证书时导入这些设置，而不是在命令行上输入它们。

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

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=[e-mail]
CN = localhost

在创建X509 v3证书时，需要创建一个v3.ext文件。请注意，这里我们正在指定subjectAltName。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

使用存储在server.csr.cnf中的配置设置为localhost创建证书密钥。该密钥存储在server.key中。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

通过之前创建的根SSL证书，发出证书签名请求以创建localhost的域证书。输出结果是一个名为server.crt的证书文件。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

# Step 4 Use your new SSL certificate

现在，您已经准备好使用HTTPS来保护本地主机。将server.key和server.crt文件移动到服务器上的可访问位置，并在启动服务器时包含它们。

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-falcon:build",
            "ssl": true,
            "sslKey": "src/assets/sslcertificate/server.key",
            "sslCert": "src/assets/sslcertificate/server.crt"
          }
        }

清除Google Chrome缓存并重新启动浏览器，同时删除Mac中的缓存和临时文件。

现在我们可以使用ng serve -o 参考资料

https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

- San Jaisy

Answer 8

您是正确的。当前实现未考虑ssl配置选项。我已经创建了一个pull request 来解决这个问题。但是，在撰写本文时，它还没有被合并到主分支。

- Stefan Baramov

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Jason Yost

最新版本的angular-cli已经修复了这个问题。因此，要解决这个问题，您只需要升级到最新的angular-cli即可。 - Stefan Baramov

Answer 9

Angular CLI 1.0.0+.

使用ng serve --ssl 1 --ssl-key {{key-path}} --ssl-cert {{cert-path}}命令。

Angular CLI 6+

使用ng serve --ssl true --sslKey {{key-path}} --sslCert {{cert-path}}命令。

将{{*-path}}中的值更改为相应的值。

- Charles Silva

Answer 10

我觉得我实际上找到了一个更简单的方法来使用office-addin-dev-certs生成、信任和使用一些新的证书，适用于使用angular进行本地开发！不要被名称所迷惑，它们适用于任何本地开发！

1. 运行以下命令生成证书，并在提示时点击"Yes"来信任它们： - `npx office-addin-dev-certs install --days 365`

2. 生成的证书（`localhost.crt`和`localhost.key`）将位于您的主文件夹`~\.office-addin-dev-certs`中。 - 将它们复制到您的angular项目中：`cp ~\.office-addin-dev-certs\localhost.* .`

3. 将证书提供给angular： - 运行命令`ng serve --ssl --ssl-key localhost.key --ssl-cert localhost.crt` - 或者将它们添加到您的`angular.json`中，这样您就可以像平常一样运行`ng serve`。

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
        "development": {
            "browserTarget": "blank16:build:development",
            "ssl": true,
            "sslKey": "localhost.key",
            "sslCert": "localhost.crt"
        }
    },
    "defaultConfiguration": "development"
},

- Brad C