HL🌱数字花园

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

2023年11月07日13分钟阅读

背景

在前端日常开发过程中，我们大多数都习惯了诸如 http://localhost:8080 || http://127.0.0.1:8080 这种本地开发的方式，当然了，这种本地开发的方式非常简便，也足以满足 90% 以上的场景开发了，但是就是有那么 10% 的场景可能就满足不了，需要做额外的处理。比如

  • 整个公司的业务系统共用一个前端登录模块

    这种场景往往用户在系统未登录会跳转到一个公共的登录页面，登录成功后会往指定域名下面注入用户个人的 Cookie 信息，通过 Cookie 信息来完成鉴权操作。因此，本地开发的时候针对这种场景 http://localhost 就无法满足需求了。

  • 局域网内虚拟域名页面访问

    再比如，也可能会有这种场景，你的某些页面正在开发中，想要给别人演示，又不希望被看到 localhost 或者是本机 IP 的这种形式，那么我们就指定一个域名也就可以满足需求了。

【注】：下面的所有演示基于 MacOS 系统，所以 Window 同学参考根据自身情况进行配置。

本地开发指定 Host

因为网上没有特定的概念词语，因此我这边总结的标题是本地开发指定 Host，但其实简单点就是：localhost -> devlopment.com。

为了方便演示，我这边起了一个简单的前端项目，效果如下图所示：

可以看到，这就是最正常的前端开发页面。

标准方案

其实本地域名指定就是修改 hosts 文件，Mac 系统就在 /etc/hosts，我这边直接执行如下命令：

# Mac 系统一般需要 sudo 权限
sudo vim /etc/hosts

只需要如上图所示，把想要访问的域名按照对应格式配置好即可。保存完之后，我们来访问一下，看看效果：

可以看到，我们的本地开发新域名就指定成功了。

Window 修改 Hosts 参考：Windows 系统修改 Hosts 方案

进阶版，移除端口号

上面我们修改完成，本地开发看起来像线上了，但是只是看起来像，我们平时访问网址：http://jujin.cn 或者 https://baidu.com 这些网址都不带端口号，而我们本地开发却需要携带端口号，那么能不能把这个端口号弄掉呢？当然也是可以的，接下来我们就来弄掉端口号。

把端口号移除要用到 Nginx，这里同样我不负责安装和介绍，大家根据系统自行进行安装和处理，按照如下步骤我们来进行操作：

# 查询 nginx 配置文件
nginx -t

# 进入 nginx 配置文件夹
cd /usr/local/etc/nginx

# 创建一个 servers 文件夹（如果有了就不需要创建）
mkdir servers

# 创建一个配置文件
touch custom.conf

# 修改配置文件

sudo vim custom.conf

在配置文件里键入如下内容：（别问为啥，没必要，反正配置完能生效就行了，我们是前端开发，不是运维工程师，安心写代码最重要😂）

upstream luffyZh.handsome.com {
  # 根据实际你想映射的端口来做
  server 127.0.0.1:8001;
}

server {
  listen      80;
  server_name luffyZh.handsome.com;

  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";
  }
}

添加完保存后还需要重启一下 nginx 生效：

# 重启 nginx 让配置生效
nginx -s reload

上述其实核心就是通过 Nginx 把我们本地开发的路径端口转到 80 上，因为不带端口就是默认访问 80 端口，这个大家应该都清楚，直接看效果：

不同系统不同电脑可能路径不一样，根据自身情况来做。

一个比较 Hack 的方案

除了上面那种，其实还可以利用 Chrome 浏览器特性，存在一个不修改 Hosts 文件也能实现本地开发域名替换的比较 Hack 的方案 —— test.localhost，效果如下：

但是这种方案的意义就感觉不太大了，如果你单纯就是为了域名访问好看，那么是可以的，否则就没太大必要了，还是推荐搭建使用第一种方案，因为他解决不了上述我们说的一些需要改变 host 的几种场景，它只是单纯的改变了访问的 host 而已。

至此，一个基础的前端本地开发修改 Hosts 指定特定域名就搞定了，其实很简单，但是我要做的事保姆级教学，所以截图和文字多了一些，反正一劳永逸，看会收藏以后能用得到～

本地开发配置 HTTPS

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

  • Service Worker

  • 再比如，其他特殊场景，必须使用 HTTPS 协议进行本地开发。

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

通用方案

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

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

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

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

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

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

  • Node Server
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 的情况依然需要端口号才能访问，如果把端口号移除还是访问不了，作为一个极致的完美主义者，当然不行了，因此继续来搞。

进阶版，移除端口号

  • openssl + nginx

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

# 进入 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 需要关掉，所以各位同学如果不是强制必须去掉端口号，其实第一种方式更简单方便，如果说你的需求必须要去除端口号访问，那么就麻烦些使用第二种方式。

写在最后

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

关系图谱

反向链接

  • 无法找到反向链接