【前端部署在云服务器如何与本地联调--Frp内网穿透】
苍穹外卖前端部署在云服务器如何与本地联调--Frp内网穿透
1. 前言
写这片文章的目的是为了解决上篇苍穹外卖项目的前端部署到云服务器的遗留问题：前端的云服务器的IP是公网IP，而我本地调试的Java后端是内网，前端响应的地址找不到本地的服务器。那么如何让云服务器上的前端项目能够找到后端的对应的地址呢？这就可以使用内网穿透技术了，将本地的端口暴露给服务器，让服务器自己找到本地的IP和8080端口，那么使用开源的FRP工具可以很好的解决。
2. FRP是什么
Fast Reverse Proxy（FRP）
一款开源内网穿透工具，通过在公网服务器部署 frps、在内网主机运行 frpc，它通过“反向隧道”把位于 NAT/防火墙后的内网服务安全地映射到公网，实现无需公网 IP 也能被外网访问。
- 支持协议：TCP、UDP、HTTP、HTTPS
- 典型用途：远程桌面/SSH、本地 Web 开发调试、物联网设备远程管理、企业混合云互连等
- 角色分工
- frps（服务端）：部署在具备公网 IP 的云主机，负责接收外部请求并统一转发。
- frpc（客户端）：运行在内网主机，主动连到 frps，注册本地要暴露的服务。
3. 解决步骤
3.1 在云服务器安装服务端frps，然后开启开机自启（参考第4部分）
根据自己云服务器的系统安装好frps后，在Nginx配置文件里，将端口修改成代理的转发端口，然后启动服务端，
# `Nginx`中的苍穹外卖配置文件路径（上篇博客里创建的） /etc/nginx/conf.d/waimai.conf 
server { listen 80; server_name IP;# 这里填你的服务器公网IP或域名 location / { root /var/www/sky;# 你的项目存放路径 index index.html index.htm;# try_files $uri $uri/ /index.html; }# 错误页面配置 error_page 500502503504 /50x.html; location = /50x.html { root /usr/share/nginx/html;} location /api/ { proxy_pass http://127.0.0.1:18080/admin/;# frp 通过 18080 暴露本地服务（设置转发端口） proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}3.2 在本地电脑安装客户端fprc（参考第4部分）
安装好本地后，启动客户端，查看日志，看到以下内容就是连接成功！
【注意】一定要先在阿里云服务器的安全组中将要代理转发的远程端口（入方向）打开，端口保持一致
4. Frp(C/S)0.64.0各个系统的安装方法
4.1 frps安装（Linux）服务端
- 下载
curl -LO <https://github.com/fatedier/frp/releases/download/v0.64.0/frp_0.64.0_darwin_arm64.tar.gz>tar -zxvf frp_0.64.0_darwin_arm64.tar.gz # 以下服务端和客户端的frp 在Linux系统中都放在/usr/local/目录下mv frp_0.64.0_darwin_arm64 frp sudomv frp /usr/local/ cd /usr/local/frp 管理命令
#启动并设置开机自启：sudo systemctl daemon-reload sudo systemctl start frps sudo systemctl enable frps sudo systemctl restart frps sudo systemctl status frps sudo systemctl stop frps # 查看连到 7000 端口（FRP 通信端口）的客户端 IP ss -antp |grep :7000 守护进程来启动frps
# 在客户端机器上创建 Systemd 服务文件sudonano /etc/systemd/system/frps.service [Unit]Description=frp server After=network.target syslog.target Wants=network.target [Service]Type=simple # ⚠️ 注意：请确保路径与你实际安装路径一致ExecStart=/usr/local/frp/frps -c /usr/local/frp/frps.toml [Install]WantedBy=multi-user.target 修改frps.toml文件
bindAddr ='0.0.0.0' bindPport =7000# 我是做联调的，用来代理后端的，所以设置这个#vhostHttpPort = 80#vhostHttpsPort = 443 auth.method ="token" auth.token ="1234567890a"# dashboard_port = 7500 webServer.addr ="0.0.0.0" webServer.port =7500 webServer.user ="admin" webServer.password ="admin123"4.2 frpc安装(windows)客户端
[[苍穹外卖项目#3-2 本地后端+ 云端前端 联调]]
- 下载
frp-win-0.64.0 - 修改
frpc.toml文件
serverAddr ="ip" serverPort =7000 auth.method ="token" auth.token ="1234567890a"[[proxies]] name ="test-sky"type="tcp" localIP ="127.0.0.1" localPort =8080 remotePort =18080本地frpc命令：
frpc.exe -c frpc.toml 4.3 frpc安装(mac)客户端
- 下载
curl -LO <https://github.com/fatedier/frp/releases/download/v0.64.0/frp_0.64.0_darwin_arm64.tar.gz>tar -zxvf frp_0.64.0_darwin_arm64.tar.gz mv frp_0.64.0_darwin_arm64 frp mv frp ~/local/ # M1芯片，如果M2芯片是：_amd64.tar.gzfrp-mac-0.64.0
- 守护进程自启动（launchd）
修改frpc.toml文件
serverAddr ="ip" serverPort =7000 auth.method ="token" auth.token ="1234567890a"[[proxies]] name ="test-sky"type="tcp" localIP ="127.0.0.1" localPort =8080 remotePort =18080#创建launchdnano ~/Library/LaunchAgents/com.userFrp.frpc.plist <?xml version="1.0" encoding="UTF-8"?><!DOCTYPEplistPUBLIC"-//Apple//DTD PLIST 1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plistversion="1.0"><dict><key>Label</key><string>com.userFrp.frpc</string><key>ProgramArguments</key><array><string>/Users/tp/local/frp/frpc</string><string>-c</string><string>/Users/tp/local/frp/frpc.toml</string></array><key>WorkingDirectory</key><string>/Users/tp/local/frp</string><key>StandardOutPath</key><string>/Users/tp/local/frp/log/frpc.log</string><key>StandardErrorPath</key><string>/Users/tp/local/frp/log/frpc-error.log</string><key>RunAtLoad</key><true/><key>KeepAlive</key><true/><key>AbandonProcessGroup</key><true/><key>NetworkState</key><true/></dict></plist>验证和管理
# 首次加载 启动 launchctl load ~/Library/LaunchAgents/com.userFrp.frpc.plist launchctl start com.userFrp.frpc # 验证 launchctl list |grep frpc #查看日志：tail -f ~/local/frp/frpc.log # 重启卸载 launchctl stop com.userFrp.frpc launchctl unload ~/Library/LaunchAgents/com.userFrp.frpc.plist 4.4 frpc安装(Linux)客户端
下载地址
*curl -LO <https://github.com/fatedier/frp/releases/download/v0.64.0/frp_0.64.0_linux_amd64.tar.gz>tar -zxvf frp_0.64.0_linux_amd64.tar.gz mv frp_0.64.0_linux_amd64 frp sudomv frp /usr/local/* cd /usr/local/frp frp-linux-0.64.0
管理命令
#文件更新并启动：sudo systemctl daemon-reload sudo systemctl start frpc # 设置开机自启sudo systemctl enable frpc # 重启sudo systemctl restart frpc # 查看状态sudo systemctl status frpc # 停止sudo systemctl stop frpc # 实时滚动查看最后 50 行日志sudo journalctl -u frpc -f # 查看连到 7000 端口（FRP 通信端口）的客户端 IP ss -antp |grep :7000 守护进程来启动frpc
# 在客户端机器上创建 Systemd 服务文件sudonano /etc/systemd/system/frpc.service [Unit]Description=frp server After=network.target syslog.target Wants=network.target [Service]Type=simple # ⚠️ 注意：请确保路径与你实际安装路径一致ExecStart=/usr/local/frp/frpc -c /usr/local/frp/frpc.toml [Install]WantedBy=multi-user.target 测试
cd /usr/local/frp ./frpc -c ./frpc.toml 修改frpc.toml文件
serverAddr ="ip" serverPort =7000 auth.method ="token" auth.token ="1234567890a"[[proxies]] name ="java-skt-linux"type="tcp" localIP ="127.0.0.1" localPort =8080 remotePort =18080
