携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情。

前言

作为前端小小白，第一次接手项目时配置开发环境是非常懵圈的，Hosts 是什么？Nginx 又是什么？为什么要配置这两个东西才能访问项目呢？

在大量搜索后，我终于理解它们到底做了什么，一言以蔽之，就是 实现了自定义域名映射到本地。

参考文章

• 使用Host和Nginx把自定义域名映射到本地
• (一) 实战环境配置：hosts文件+nginx模拟多域名
• hosts和nginx配置详细对比
• 作为一名前端，该如何理解Nginx？
• 写给前端的nginx教程

使用 Nginx

安装

brew install nginx // 安装 nginx
brew info nginx // 查看 nginx

信息

info 命令会输出的一些重要信息：

• 安装目录：/opt/homebrew/Cellar/nginx/1.21.6_1 (26 files, 2.2MB) *
• 安装来源：From: mirrors.ustc.edu.cn/homebrew-co…
• 根目录：Docroot is: /opt/homebrew/var/www
• 配置文件和默认端口：The default port has been set in /opt/homebrew/etc/nginx/nginx.conf to 8080

安装踩坑

• 报错：Error: No similarly named formulae found.
• 解决：找不到应有的包，安装不完全，卸载重装

使用

• 查看版本：nginx -v
• 启动nginx：sudo nginx
• 停止nginx：sudo nginx -s stop
• 重启nginx：sudo nginx -s reload

编辑 Hosts 文件

打开访达，按快捷键组合 Shift+Command+G 查找文件，输入 /etc/hosts，确认前往后找到 Hosts 文件，直接打开编辑内容即可。

Hosts + Nginx 合作

hosts 和 nginx 做的是不同的工作。

当在浏览器输入 URL 请求时，会先检查本地的 hosts 文件，如果能匹配到这个 URL，就会将其映射到对应的 IP 地址，因为是本地开发环境配置，所以我们配置的 IP 地址是 127.0.0.1 / localhost，会访问本地服务器。

但是因为 hosts 文件无法映射不同的端口，只能是默认的 80 端口，所以，对于大型项目来说，尤其是在运行过程中会访问不同的端口的项目，我们需要映射端口号。这就是 nginx 可以实现的。

当这个 URL 请求访问本地服务器时，会被本地服务器里的 nginx 拦截，通过 nginx.conf 的配置检查 URL 是否和监听的域名+端口相匹配，匹配的话再进行转发请求特定端口的服务，最终效果就是：www.xxx.com/tt -> localhost:8090/tt。

在最开始，我对两者的功能产生了混淆，疑惑为什么 nginx 配置里写了把 www.xxx.com 转发到 localhost:8090，还需要进行 hosts 配置，把 www.xxx.com 映射到 localhost 呢？

这是因为这个 URL 实际上是不存在的。如果 hosts 文件匹配不到这个URL，会继续后面的 DNS 域名解析过程，但是在网络上找不到对应的服务器，请求就会失败。在配置了 hosts 文件后，这个 URL 映射到本地的 IP ，也就是访问本地服务器，然后才会被本地的 nginx 拦截请求，再转发到本地的其他服务并返回内容给浏览器。

所以，本地的 nginx 配置需要设置 hosts 映射，云服务器上的 nginx 则不需要 hosts 映射，因为可以通过 DNS 解析找到对应的服务器。

总结

可以理解下这个常见的面试题：从输入 URL 到页面展示到底发生了什么？

其实，这是基础功的一部分。