获取 angular-cli 以通过 HTTPS 服务

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

你是对的。当前的实现不考虑 ssl 配置选项。我创建了一个 pull request 来解决这个问题。然而，在撰写本文时，它还没有被合并到 master 中。

Answer 2

Angular 命令行界面 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 的正下方添加一个 "ssl": true, 选项和 sslCert.

您可以在 Angular CLI documentation 中找到 angular.json 架构。

Angular CLI 1.0.0+ 的旧答案。

Angular-CLI 现在可以使用 SSL 选项。正如您所指出的，您可以手动 select 您想要使用命令的密钥和证书：

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 的正下方添加一个 "ssl": true, 选项和 sslCert.

Answer 3

为了补充这个解决方案，如果您想知道如何为本地主机生成密钥和证书，这里有一篇很棒的分步文章：

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

Answer 4

仅供参考，在 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 5

来自this page

的非常简单的解决方案

npm install browser-sync --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

快速大胆）刚刚在我的 angular cli 6.2.3 项目中使用它

Answer 6

Angular CLI 1.0.0+.

ng serve --ssl 1 --ssl-key {{key-path}} --ssl-cert {{cert-path}}

Angular 命令行界面 6+

ng serve --ssl true --sslKey {{key-path}} -- sslCert {{cert-path}}

将{{*-path}}中的值修改为对应的值

Answer 7

您可以使用

--ssl

或

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

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

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

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

点击certificate (invalid)
单击 Details 选项卡
点击Copy to File...
next next 完成并导出到某处。
开始->运行->inetcpl.cpl
单击 Content 选项卡
点击Certificates
单击 Trusted Root Certication Authorities 选项卡
单击 Import 按钮
导入证书
重新运行ng serve --ssl

请注意，证书只有一个月的有效期。在那个月底，你会很难找到解决方案，但我已经解决了这个问题

Answer 8

如果您想创建自己的证书并添加到 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。双击导入的证书并在信任部分中将“使用此证书时：”下拉列表更改为始终信任。

如果您到目前为止都正确地按照说明进行操作，您的证书在钥匙串访问中应该看起来像这样。

# Step 3: Domain SSL certificate

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

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

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

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

创建 v3.ext 文件以创建 X509 v3 证书。请注意我们如何在此处指定 subjectAltName。

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

[alt_names]
DNS.1 = localhost

使用 server.csr.cnf 中存储的配置设置为本地主机创建证书密钥。此密钥存储在 server.key.

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

证书签名请求是通过我们之前创建的根 SSL 证书发出的，用于为本地主机创建域证书。输出是一个名为 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"
          }
        }

清除Googlechrome中的缓存并重启浏览器，同时删除mac[=24中的缓存和临时文件=]

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

参考

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

Answer 9

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

ng serve --ssl

完美运行，它会自动为您创建一个证书。在 chrome 浏览器上测试。它说“不可信连接”，但请继续。

希望对您有所帮助

Answer 10

始终建议向服务器团队提供证书和端口。他们在服务器级别配置。这种方式总是适合生产代码。

团队将配置证书和 DNS 与域的映射。

所以它变成了 HTTPS://你的应用程序 domainname:your 选择的端口/

Answer 11

刚刚在这个 Angular -- 节点 API 上花了几天时间，你可以在这个

上看到我的解决方案

获取 angular-cli 以通过 HTTPS 服务

Get angular-cli to ng serve over HTTPS

angular

ssl

https

ssl-certificate

angular-cli

Angular 命令行界面 6+

Angular CLI 1.0.0+ 的旧答案。