【前端部署在云服务器如何与本地联调--Frp内网穿透】

苍穹外卖前端部署在云服务器如何与本地联调–Frp内网穿透

• 1. 前言
• 2. FRP是什么
• 3. 解决步骤
• • 3.1 在云服务器安装服务端frps，然后开启开机自启（**参考第4部分**）
  • 3.2 在本地电脑安装客户端fprc（**参考第4部分**）
• 4. Frp(C/S)0.64.0各个系统的安装方法
• • 4.1 frps安装（Linux）服务端
  • 4.2 frpc安装(windows)客户端
  • 4.3 frpc安装(==mac==)客户端
  • 4.4 frpc安装(Linux)客户端

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 500 502 503 504 /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
sudo mv frp /usr/local/
cd /usr/local/frp

• frp-linux-0.64+

• 修改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"

• 守护进程来启动frps

  # 在客户端机器上创建 Systemd 服务文件
  sudo nano /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

• 管理命令

  #启动并设置开机自启：
  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

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.gz

frp-mac-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

• 守护进程自启动（launchd）

#创建launchd
nano ~/Library/LaunchAgents/com.userFrp.frpc.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="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

  sudo mv frp /usr/local/*

  cd /usr/local/frp

frp-linux-0.64.0

• 修改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

• 测试

  cd /usr/local/frp
  ./frpc -c ./frpc.toml

• 守护进程来启动frpc

  # 在客户端机器上创建 Systemd 服务文件
  sudo nano /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

• 管理命令

  #文件更新并启动：
  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