web配置本地服务器地址，核心就是把代码运行环境搬到自己的电脑上，用localhost或0.0.1作为访问入口，具体操作取决于你用的是集成环境还是命令行工具。
很多新手第一次接触web开发时,都会卡在“怎么让浏览器打开我写的网页”这一步，你需要的不是一个网址，而是一个本地服务器地址，这个概念搞通了，后面所有框架、接口调试都会顺畅很多。
本地服务器地址到底是什么
简单说,本地服务器地址就是你的电脑在自己网络世界里的门牌号，当你启动了一个服务器软件（比如Apache、Nginx），你的电脑就开始监听某个端口，而http://localhost:8080就是访问这个服务的固定入口。
localhost是一个特殊的域名，它永远指向你正在使用的这台机器，对应的IP是0.0.1，你可以在浏览器地址栏输入http://localhost或http://127.0.0.1，效果完全一样。
理解这个底层逻辑后,我们来看看web怎么配置一个本地服务器地址，才能让项目跑起来，这需要区分两种情况：用现成集成环境，还是用编程语言自带的服务器。
用集成环境配置本地服务器地址
如果你用的是PHP、MySQL这类技术栈，最常见的方案是安装XAMPP、WAMP或phpStudy，这类工具把Apache、MySQL、PHP打包在一起，你只需要把项目文件放进指定目录。
XAMPP的默认配置流程：
- 安装XAMPP后,打开控制面板，启动Apache模块
- 找到安装目录下的
htdocs文件夹，把你的项目文件夹放进去 - 浏览器输入
http://localhost/你的项目文件夹名，就能看到页面
如果你觉得路径太长,可以修改Apache的配置文件，打开httpd.conf，找到DocumentRoot这一行，把它改成你自己的项目路径，重启Apache后就生效了，同理，<Directory>标签里的路径也要同步修改，否则会报403权限错误。
配置虚拟主机是另一个常用场景，当你的电脑上跑着多个项目时，你可能希望每个项目有不同的域名，而不是localhost/project1、localhost/project2这种路径，这就需要配置虚拟主机。
- 打开
httpd-vhosts.conf文件（XAMPP路径在apache/conf/extra/下） - 添加一段配置,指定
ServerName、DocumentRoot和端口号 - 修改系统
hosts文件（Windows路径C:\Windows\System32\drivers\etc\hosts），添加一行映射记录，比如0.0.1 myproject.dev
行业共识认为,虚拟主机配置是本地开发环境从入门到进阶的分水岭，掌握后能让多项目切换效率提升一个档次。
用命令行工具启动内置服务器
对于Node.js、Python、Java这类技术栈，语言本身提供了轻量级服务器，不需要安装Apache，这也是一种非常干净的web本地服务器配置方案。
Python内置服务器：
cd 你的项目目录 python -m http.server 8000
然后浏览器访问http://localhost:8000即可，这个命令适用于快速预览静态页面，零配置，一条命令搞定。
Node.js的http-server：
先全局安装工具包：
npm install -g http-server
然后在项目目录下运行：
http-server -p 3000
浏览器访问http://localhost:3000，如果你想让局域网内的手机或同事电脑访问，加上--host 0.0.0.0参数，访问时用你电脑的局域网IP替代localhost。
PHP内置服务器：
php -S localhost:8080
如果想指定项目的入口文件,比如index.php，可以这样：
php -S localhost:8080 -t public
-t参数指定了网站的根目录，这在运行Laravel、ThinkPHP这类框架时很常见，因为它们的入口文件在public子目录中。
局域网访问时地址怎么配
除了本地访问,开发过程中经常会遇到手机调试、同事联调的场景，这时候就需要把本地服务器地址暴露到局域网内。
首先要查到你电脑的局域网IP,Windows下打开命令行，运行ipconfig，找到“IPv4地址”那一行；Mac下运行ifconfig，找到inet 192.168.x.x，这就是你的局域网地址。
需要注意几个关键点：
- 服务器软件要监听
0.0.0而不是默认的0.0.1，后者只能本机访问 - Windows防火墙要放行对应端口,否则外部设备会被拦截
- 手机和电脑必须连同一个WiFi,不同网段是访问不了的
- 如果有人问api接口本地服务器地址怎么配置,实际上是同一套逻辑，只是把请求URL从
localhost换成了局域网IP
有个容易踩的坑是路由器开启了AP隔离,导致同一WiFi下的设备互相不可见，如果同事访问不了你，先检查这一项。
配置后常见报错排查
配好了本地服务器地址但打不开,这是很多人头疼的问题，这里按优先级列出排查思路。
端口被占用： 启动服务器时提示端口已被占用，说明有其他程序在用这个端口，可以换一个端口号，或者在命令行查看占用端口的进程并结束它，Windows下用netstat -ano | findstr 端口号，Mac/Linux用lsof -i :端口号。
权限错误： 访问页面时出现403 Forbidden，而不是正常的页面内容，说明服务器没有读取项目目录的权限，检查目录是否可读，以及配置文件中<Directory>段的Require指令是否设置了all granted。
无法解析主机名： 如果配置了虚拟主机，浏览器提示找不到服务器，先确认hosts文件里的映射没有拼错，再确认Apache配置文件里ServerName和hosts里写的一致。
页面样式丢失： 地址能访问但CSS、JS加载不出来，查看浏览器控制台，通常是静态资源请求路径中包含了目录层级，改用相对路径或配置静态资源指向正确的根路径。
业内专家指出,多数本地环境问题源于路径配置不一致，而不是代码本身的逻辑错误。
升级为HTTPS本地访问
很多新特性（比如摄像头调用、Service Worker）要求网站必须是安全上下文，也就是HTTPS协议，本地开发也需要配一个自签名证书。
比较便捷的方式是用mkcert这个工具，它会在你的电脑上安装一个本地CA根证书，然后为localhost生成可信证书，生成的文件挂载到你的服务器配置中即可。
用mkcert为本地地址配置HTTPS：
mkcert -install mkcert localhost 127.0.0.1 你的局域网IP
生成两个文件后,在Nginx的配置文件中启用SSL模块，指定证书路径，重启服务，就能通过https://localhost访问了，本地地址配了HTTPS后，浏览器不再显示警告，开发体验会顺畅很多。
配置本地服务器地址的最大误区
很多初学者会混淆“编辑代码”和“访问页面”两个概念，你写的是项目，访问的是运行中的服务，换句话说，不是你打开index.html文件就能叫Web开发不通过本地服务器地址访问的页面，无法模拟真实环境下的请求、路由和权限控制。
在实际工作中,配置本地服务器地址还有一层实际价值：联调接口，前后端分离的项目中，前端同学可能要对接同事电脑上的后端服务，此时把后端的本地服务器地址配成http://192.168.x.x:8080，就能实现跨机器调试，而不必每次把代码部署到测试环境。
常见问题解答
localhost和127.0.0.1有什么区别？
两者在绝大多数场景下等价,都指向本机，细微区别在于，localhost在解析时可能优先走IPv6的:1地址，而0.0.1明确走IPv4，如果你的电脑的hosts文件被修改过，或者网络配置特殊，两者可能表现不同，多数情况下，用哪个都行，但排查问题时可交叉试验。
配置好的本地服务器地址怎么让手机访问？
手机和电脑连接同一个WiFi,用电脑的局域网IP加端口号访问，比如电脑IP是168.1.5，服务器监听8080端口，手机上访问http://192.168.1.5:8080，如果打不开，检查Windows防火墙的入站规则是否为当前网络类型（专用或公用）开放了该端口。
本地能访问但局域网内其他电脑无法打开？
优先级依次是：服务器进程是否监听了0.0.0、防火墙是否放行、宿主机和访问设备是否在同一网段、代理软件是否拦截了局域网流量，逐一排查即可，大多数情况下是防火墙规则未包含专用网络导致。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/795171.html
