Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and IP Address

前言

之前就写过 angular cli, vs code liveserver, vs 2019 iis express 10, vs code kestrel 使用 https + ip. 但写的很乱. 这篇作为整理版.

默认情况下, 本地开发的 URL 是 localhost, ASP.NET Core 会有 build-in 的 Https, 游览器也会 trust 好好.

但是 localhost 不方便用手机链接. 所以改用 IP 会比较理想. 但是 IP 默认是没有 Https 的.

虽然没有 Https 也是可以跑, 但是会很不方便, 比如游览器的 address bar 会一直出现 (在手机), 因为它要提示你网站没有运行在 Https 上.

所以呢, 最好的办法就是支持 IP 同时支持 Https.

原理

和 production 的 SSL 类似, 但不是用 domain 而是 IP address, 还有 SSL 不是 CA 认证机构颁发的, 是 Self-signed 的.

2 个关键点.

第 1 是 Server 需要 Certificate, 不管是 Webpack, Angular, Live Server, ASP.NET Core (IIS / Kestrel), 我们都需要把 self-signed certificate 搞进去.

第 2 是游览器要 trust self-signed certificate.

Create Self-signed Certificate

首先需要有指定 IP 的 certificate. 按照这篇做就可以了. .key, .crt, .pfx 3 个 file 都要哦.

Trust Self-signed Certificate

PC端

游览器必须相信这个自签名证书. 通过 OS 的 MMC 去设置.

打开 start -> mmc

File -> Add/Remove Snap-in...

Certificates > Add > My user account

去 Trusted Root import 证书 .crt 就可以了.

记得要重启 Chrome 才有效果哦.

Mobile端

IOS trust: Installing an SSL Certificate on an iOS Device (Manually)

Android trust: setting > Passwords & security > Privacy > More security settings > Encryption and credentials > Install a certificate > CA certificate 和 Certificate > 去 google drive 选 .crt > 输入手机密码 > 安装成功后可以去 Trusted credentials 和 User credentials 看到。

Malaysia Unifi 5G Problem

有时候手机会突然连不上 IP Address (不管是 Live Server, Webpack Server, ASP.NET Core IIS Express 都会连不上), 原因不明. 这个时候可以试试 off on Wi-Fi, 或者换成不是 5G, 然后重新链接.

Live Server

打开 settings.json 配置就可以了.

设置 IP and 链接 certificate (其它 Server 也是这个套路)

"liveServer.settings.host": "192.168.1.152",

"liveServer.settings.port": 4200,

"liveServer.settings.https": {

    "enable": true,

    "cert": "C:\\self-signed-certificate\\192.168.1.152.crt",

    "key": "C:\\self-signed-certificate\\192.168.1.152.key",

    "passphrase": ""

},

Angular

在 angular.json 添加设置

或者在启动 command 加上 parameters

ng serve --open --host=192.168.1.152 --port=4200 --ssl --ssl-key=C:\\self-signed-certificate\\192.168.1.152.key --ssl-cert=C:\\self-signed-certificate\\192.168.1.152.crt

IIS localhost Certificate

安装 IIS/Kestrel (通常是安装 Visual Studio 时一起装的) 的时候, 它自带了 localhost 的 certificate. 同时也 trust 了.

所以不用烦. 但如果某些原因不小心搞丢了. 可以通过 control panel -> programs -> iis express -> repair 来修复 (注意是 control panel 而不是 add/remove 哦)

然后通过 dotnet command trust

dotnet dev-certs https --trust

dotnet dev-certs https --clean // 这样是清空

注: 有时候要重启才生效哦

VS Code & Visual Studio 2022 IIS / Kestrel

设置 IP

Kestrel 链接 certificate

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.ConfigureKestrel((context, serverOptions) =>

{

    serverOptions.ConfigureHttpsDefaults(options =>

    {

        options.ServerCertificate = new System.Security.Cryptography.X509Certificates.X509Certificate2(

            "C:\\self-signed-certificate\\192.168.1.152.pfx",

            "password"

        );

    });

});

IIS 链接 certificate

这个步骤多了一些,

先把 certificate (.pfx) import to MMC Certificate Computer account (local machine)

这个和上面的 trust 不同, 这个是为了让 IIS 能用到证书. Live Server 和 Angular 是直接通过 path 链接到 certificate file. 但是 IIS 很麻烦, 它是通过 Windows 的 Certificate Store 才能拿到 certificate 的.

然后链接 certificate 需要 run iis command

打开 cmd, run as admin

cd 到 iis express 的 folder

cd C:\Program Files (x86)\IIS Express

执行 setupssiurl

IisExpressAdminCmd.exe setupsslUrl -url:https://192.168.1.152:44300/ -CertHash:00c3c0bbd89d011e0750e3497bfa4bac39d1ccb6

CertHash 是证书指纹, 到 MMC 证书查看.

这样 IIS 就知道, 当 192.168.1.152:44300 时, 使用这个 self-signed certificate.

Visual Studio 2022

以前 Visual Studio 2019 很麻烦 setup 的, 不过现在我测试 Visual Studio 2022 完全不需要 setup, 用回上面的 VS Code file 直接开 run 就可以了. 也不需要 run as admin.

不知道是不是进步了.