保姆级教程: 前端本地开发指定域名以及 HTTPS 配置方案

如果你对上面的步骤已经觉得 OK 了，符合需求了，那么下面的内容可以不看了，因为很少有前端业务场景会使用 https 来进行本地开发，但是巧了，笔者在实际开发过程中就遇到了这种场景，比如：

总之就是，可能对大部分人没什么用，但是一旦你遇到了需要 HTTPS 进行本地开发的场景，这里会对你有很大的帮助，至少可以节约你2小时的时间。

通用方案

这里说的通用方案，其实有很多种，我这边就简单列举两种来实现吧，毕竟最后实现出来的效果都是一样的，会一种就可以了。

同理，不做过多介绍，我们只需要知道如果想做 HTTPS 需要浏览器信任的机构提供签名即可，市面上很多工具帮助我们生成签名，这里只是其中一种。根据步骤来做：

# 安装过程省略了，Github 仓库里就有各种系统的安装方法
# 这里直接生成 https 证书
mkcert luffyZh.handsome.com

如上图所示，非常简单的就生成完了，那么应该怎么使用呢？我这边以 umijs 为例子，官方文档支持配置 HTTPS 本地开发 —— :

如上图所示，我们将生成的证书内容放到工程目录下，修改一下启动的配置文件，就可以看到，UmiJs 已经支持了 https 本地开发，浏览器访问一下看看：

可以看到，我们心心念念的小锁头出来了，本地开发至此就可以使用 https 域名来访问了，我这里使用的是 UmiJS，并不是给他们打广告，其实其他框架也都是支持的，比如：

const https = require('https');
const fs = require('fs');
// 这里替换成你们的路径即可
const options = {
  key: fs.readFileSync('{path/luffyZh.handsome.com-key}.pem'),
  cert: fs.readFileSync('{path/luffyZh.handsome.com}.pem'),
};
https
  .createServer(options, function (req, res) {
    // server code
  })
  .listen({PORT});

到这里，你是不是以为就结束了？当然没有，既然要做就做到位，我们 https 的情况依然需要端口号才能访问，如果把端口号移除还是访问不了，作为一个极致的完美主义者，当然不行了，因此继续来搞。

进阶版，移除端口号

同样，方法千千万，我这里只展示一种，会一个配置成功就够用了，我们来配置一下：

# 进入 nginx 文件夹
cd /usr/local/etc/nginx
# 创建一个 ssl 文件夹并进入
mkdir ssl && cd ssl
# 使用 openssl 生成 CA 文件
# 1 - 生成一个 server.key，我这边之前生成过了，因此重新命名了
# 此命令是基于des3算法生成的rsa私钥，在生成私钥时必须输入至少4位的密码。
openssl genrsa -des3 -out luffy-server.key 2048
# 2 - 生成一个没密码的 server.key，经过验证，没密码的流程比较容易
openssl rsa -in server.key -out server.key
# 3 - 根据 server.key 生成 ca.crt
# 这一步会经历如下过程
# -> 输入上面的四位密码
# -> 输入国家编号 CN
# -> 依次输入省市公司，参考：ZheJiang - HangZhou
# -> 输入个人邮箱
openssl req -new -x509 -key luffy-server.key -out luffy-ca.crt -days 3650 
# 4 - 基于 ca.crt 生成 csr
openssl req -new -key luffy-server.key -out luffy-server.csr
# 5 - 生成已经认证的 crt
openssl x509 -req -days 3650 -in luffy-server.csr -CA luffy-ca.crt -CAkey luffy-server.key -CAcreateserial -out luffy-server.crt

整体流程如下图所示：

上面证书申请认证完成后，还需要修改 Nginx 配置文件，啥都不要问，参考下面的即可：

upstream luffyZh.handsome.com {
  server 127.0.0.1:8001;
}
server {
  listen      80;
  server_name luffyZh.handsome.com;
  #   # 配置 https
  listen                      443 ssl;
  ssl_certificate             /usr/local/etc/nginx/ssl/ca.crt;
  ssl_certificate_key         /usr/local/etc/nginx/ssl/server.key;
  ssl_session_cache           shared:SSL:1m;
  ssl_session_timeout         5m;
  ssl_protocols               SSLv2 SSLv3 TLSv1.2;
  ssl_ciphers                 HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers   on;
  location / {
    proxy_pass http://luffyZh.handsome.com;
    # websocket 配置 header 头
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

我们来访问一下：luffyzh.handsome.com ，效果如下：

这不是完犊子了吗，翻车了，没事，这是正常的，我们需要在空白处点击一下，然后输入下面代码 thisisunsafe 即可。

看到上面的效果了吧，luffyzh.handsome.com 已经成功访问，完美，撒花～

注意事项

经过测试发现，如果本地开发使用 openssl + nginx 配置去除端口号的方案，需要把应用默认的那个 https 关掉才行，也就是 UmiJS 自身的那个 https 需要关掉，所以各位同学如果不是强制必须去掉端口号，其实第一种方式更简单方便，如果说你的需求必须要去除端口号访问，那么就麻烦些使用第二种方式。

写在最后

好久没用掘金写文章了，回归第一篇写篇水文，找找写作的感觉，毕竟还是有点人关注着你的，不能辜负人家的点赞和关注，当然了，个人觉得也不算是一点营养都没有啦，因为我从网上找各种文章都没有一步到位的，甚至很多都是按照操作配置都不生效的，质量参差不齐可能也算是社区文章越来越多但是口碑越来越差的原因吧。不能约束每一个人，但是还是要做到约束自己，自己写的东西不仅要对自己负责，同时也要为愿意花费时间来读文章的读者负责。