前言

最近遇到一个问题，就是我本地起了一个vue项目，由于我没有准备服务器之类的，我又想让远隔千里之外的客户看到我工作的效果。于是就有了这一篇文章。

当我们以本地电脑做服务器搭建web网站时，如何将它发布到互联网上，实现公网用户都可以访问内网下的web网站就变得十分重要。

由于我使用是时候是使用macOS系统，所以这里以macOS系统自带的Apache为例为例子，在本地启用Apache服务器，通过cpolar内网穿透将其暴露至公网之上，实现在公网环境下访问本地的web服务的目的，不需要购买服务器，也不需要公网ip，更不需要设置路由器。（注：如果是windows系统，需要先下载安装Apache服务）

一、启动Apache服务器

打开macOS的终端，执行Apache服务器启动命令，提示Password，输入密码

js 复制代码

// Apache相关命令
sudo apachectl start // 启动Apache
sudo apachectl restart // 重启Apache
sudo apachectl stop // 关闭Apache

浏览器访问localhost（默认80端口），正常情况下就能看到It Works！，表示服务器启动成功，局域网内就可以正常访问了。

二、公网访问本地web服务

现在我们本地的web服务只能在局域网内进行访问，下面使用cpolar内网穿透将本地的web服务映射到公网上，实现公网的用户也可以访问到本地的web服务，不需要公网IP，也不需要设置路由器。

直达 >>>> cpolar官网

2.1 本地安装配置cpolar

macOS安装 cpolar 可以利用 Homebrew 包管理器进行安装和管理，可以不用通过官网暗转

安装 Homebrew（打开终端输入命令）。
Homebrew 是一款Mac OS下的套件管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能
js 复制代码
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
通过 Homebrew 包管理器安装 cpolar 内网穿透（打开终端输入命令）
js 复制代码
```
brew tap probezy/core && brew install cpolar
```
cpolar安装后进行token认证（打开终端输入命令）
js 复制代码
```
cpolar authtoken xxxxxxx
```
安装服务（打开终端输入命令）
js 复制代码
```
sudo cpolar service install
```

启动服务（打开终端输入命令）

js 复制代码

sudo cpolar service start // 启动服务
sudo service cpolar stop // 停止服务

登录 cpolar web UI 管理界面

注：启动服务后才能进入这个UI界面

浏览器中访问9200端口【http://127.0.0.1:9200/】，登录自己的cpolar账号

登录成功后，点击左侧目录中的 隧道管理->隧道列表 ,里面有两条默认的例子隧道（自行决定编辑或者删除）

ssh隧道 ：指向本地22端口，tcp协议
website隧道：指向本地8080端口，tcp协议

2.2 创建隧道

点击左侧目录中的 隧道管理->创建隧道 ，我们来创建一个隧道，由于我本地起的项目是端口号是8081端口，就拿8081端口作为演示。

将在本地的 8081 端口下的web服务映射到公网

隧道名称： test-http （自行定义即可，不要与已有隧道名称重复）
协议：http协议
本地地址：8081
域名类型：随机域名（可免费使用）
地区：选择 China Top

点击创建后会在右上角提示创建成功，页面自动跳转至隧道列表，可以看到刚刚自己创建test-http隧道。状态为active，表示正常在线，不需要再点重启。

在左侧目录中 状态->在线隧道列表 ，点击后可以看到列表中test-http隧道已经生成了对应的公网地址，一个是http协议，一个是https协议（不用配置ssl证书这一类的繁琐步骤），复制公网地址，就可以访问到本地的web服务了。

2.3 测试访问公网地址（一定要注意项目配置）

访问如果显示 Invalid Host header （找不到主机头），以vue的项目为例：原因是因为项目中没有配置允许访问域名 或者 设置跳过跳过host检查

设置允许域名访问

js 复制代码

// vue.config.js
module.exports = {
  //...
  devServer: {
    allowedHosts: [ // 根据自己的域名设置
      'cpolar.top', // 允许访问的域名地址
      '.cpolar.top'   // .是二级域名的通配符   
    ],
  },
};
```js

设置跳过跳过host检查
js 复制代码
```
devServer: {
  disableHostsCheck: true
}
```

三、cpolar 知识小扩展

由于是为了让更多的初学者上手，这次只讲了免费的生成的公网地址为随机临时地址，24小时内会发生变化，对于需要长期访问的用户不是很方便。

如过想要的一个固定的公网地址需要自行购买 cpolar 的套餐后，进行固定的二级子域名的设置。

四、致敬

如果按照步骤成功在公网上访问到自己的本地web项目，就给本文章点个赞吧！😁😁😁

cpolar穿透本地web项目，公网访问本地项目（MAC）

前言

目录

一、启动Apache服务器

二、公网访问本地web服务

2.1 本地安装配置cpolar

2.2 创建隧道

2.3 测试访问公网地址（一定要注意项目配置）

三、cpolar 知识小扩展

四、致敬