通过HTTPS获取angular-cli到ng服务

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.

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, option .

您可以在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文件,相应地调整默认值部分:

{
    "$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, option .

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. 点击 certificate (invalid)
2. 单击Details选项卡
3. 点击 Copy to File...
4. next next 完成并将其导出到某个地方。
5. 开始->运行-> inetcpl.cpl
6. 单击Content选项卡
7. 点击 Certificates
8. 单击Trusted Root Certication Authorities选项卡
9. 单击Import按钮
10. 导入证书
11. 重新运行 ng serve --ssl

请注意，该证书仅持续一个月。在那个月底你会很难找到解决方案，但我已经解决了这个问题，这里是解决方案

Answer 3

JFYI,在Angular6中你必须把conf放在选项中(在angular.json中):

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

Answer 4

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

npm安装浏览器同步--save-dev

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

快速粗体）只是在我的角度cli 6.2.3项目中使用过

Answer 5

为了补充这个解决方案,如果你想知道如何为localhost生成密钥和证书,这里有一篇很好的分步文章:

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

Answer 6

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

ng serve --ssl

完美运行它会自动为您在 chrome 浏览器上测试创建一个证书它说不可信的连接只是继续

希望这可以帮助 ！！！

Answer 7

如果您想创建自己的证书并添加到 MAC 中的受信任钥匙串中

\n\n

我们\xe2\x80\x99 将使用 OpenSSL 生成所有证书。

\n\n

第 1 步：根 SSL 证书

\n\n

步骤 2：信任根 SSL 证书

\n\n

步骤3：域名SSL证书

\n\n

第 4 步：使用新的 SSL 证书

\n\n

# Step 1: Root SSL certificate\n\n    openssl genrsa -des3 -out rootCA.key 2048\n    openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem\n

\n\n

\n\n

# Step 2: Trust the root SSL certificate\n

\n\n

在使用新创建的根 SSL 证书开始颁发域证书之前，还需要执行一个步骤\xe2\x80\x99。您需要告诉您的 Mac 信任您的根证书，以便由它颁发的所有单独证书也受到信任。

\n\n

Mac 上的“钥匙串访问”并转到系统钥匙串中的“证书”类别。到达那里后，使用“文件”>“导入项目”导入 rootCA.pem。双击导入的证书，然后将信任部分中的 \xe2\x80\x9c 使用此证书时：\xe2\x80\x9d 下拉列表更改为始终信任。

\n\n

如果到目前为止您\xe2\x80\x99 已经正确遵循了说明，那么您的证书在钥匙串访问中应该看起来像这样。

\n\n

\n\n

# Step 3: Domain SSL certificate\n

\n\n

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

\n\n

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

\n\n

[req]\ndefault_bits = 2048\nprompt = no\ndefault_md = sha256\ndistinguished_name = dn\n\n[dn]\nC=US\nST=RandomState\nL=RandomCity\nO=RandomOrganization\nOU=RandomOrganizationUnit\nemailAddress=hello@example.com\nCN = localhost\n

\n\n

创建 v3.ext 文件以创建 X509 v3 证书。注意我们\xe2\x80\x99如何在这里指定subjectAltName。

\n\n

authorityKeyIdentifier=keyid,issuer\nbasicConstraints=CA:FALSE\nkeyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment\nsubjectAltName = @alt_names\n\n[alt_names]\nDNS.1 = localhost\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\n\n

# Step 4 Use your new SSL certificate\n

\n\n

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

\n\n

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

\n\n

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

\n\n

现在我们可以使用ng serve -o

\n\n

参考

\n\n

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

\n