ngrok使用
ngrok官网:https://ngrok.com/
注册,登录,可以使用github账号登录
选择自己的操作系统,下载软件包
安装包如下
到.exe所在文件下执行这个命令,要带上自己的token
准备内网穿透,将自己的本地服务ip端口替换成示例的
然后会出现这样的东西
直接在浏览器上去访问,
这是由于第一次访问,没有信任感,点下visit site就可以了
这是由于vite的限制呢 ,Vite 项目里,有个 server.allowedHosts
配置项,作用是限制哪些域名 / 主机能访问你的本地开发服务,防止非法域名的访问,保障开发环境安全。改造下
就可以了
export default defineConfig({server: {// 允许访问的主机,添加 ngrok 的域名allowedHosts: ['you---------ip.ngrok-free.app', 'localhost', '127.0.0.1']}
})
每次启动ngrok,分配给我们的是变化的,使用这个命令启动就可以创建一个不变的域名,同时vite.config.ts中也要添加这个域名
如果本地有多个端口
1、找到本地的ngrok.yml文件,可以实现转发,这里的ip依旧是会变化的,如果要不变化,是需要借助subdomain来实现的,而这个是要收费的
ngrok start frontend
ngrok start backend
ngrok start database
或者一键启动 ngrok start --all
但是ip也是会变的
或者根据不同的访问路径去配置多个本地服务(反向代理)
同一端口
server {listen 80;server_name example.com; # 替换为你的域名或 IP# 转发到第一个服务(例如 8080 端口)location /service1/ {proxy_pass http://localhost:8080/; # 注意末尾的斜杠proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 转发到第二个服务(例如 8081 端口)location /service2/ {proxy_pass http://localhost:8081/; # 注意末尾的斜杠proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}
想要实现更多功能使用FRP