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

【前端部署在云服务器如何与本地联调--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 本地后端+ 云端前端 联调]]

 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
  • 守护进程自启动(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

Read more

【Copilot配置避坑手册】:90%新手都会犯的7个致命错误

第一章:Copilot配置的核心认知 GitHub Copilot 不仅是一个代码补全工具,更是一种基于上下文理解的智能编程助手。其核心价值在于通过深度学习模型理解开发者意图,提供精准的代码建议。要充分发挥 Copilot 的能力,首先需建立对其配置机制的正确认知。 身份验证与环境准备 在使用 GitHub Copilot 前,必须确保已完成以下步骤: 1. 登录 GitHub 账户并启用 Copilot 订阅(个人或企业计划) 2. 在本地 IDE(如 VS Code)中安装官方插件 3. 执行身份验证命令以激活服务 # 在终端运行以下命令完成登录 npx @github/copilot-cli login 该命令会打开浏览器页面,引导用户完成授权流程。成功后,Copilot 将在支持的语言环境中自动启动。 编辑器配置优化 为提升建议质量,可在编辑器设置中调整关键参数: 配置项推荐值说明copilot.suggestOnTriggerCharacterstrue在输入特定字符(如

【AIGC行业前沿】2026年2月AIGC行业模型发布以及主要前沿资讯

目录 1. 阿里Qoder发布Qwen-Coder-Qoder 2. Kimi与南大发布SimpleSeg赋能模型像素感知 3. 字节研究团队发布ConceptMoE提升AI推理 4. 阶跃星辰发布并开源模型Step 3.5 Flash 5. 智谱发布并开源OCR模型GLM-OCR 6. xAI正式发布Grok Imagine 1.0视频模型 7. 优必选开源具身智能大模型Thinker 8. 通义千问发布开源编程模型Qwen3-Coder-Next 9. OpenAI宣布GPT-5.2系列模型提速40% 10. OpenBMB发布多模态模型MiniCPM-o 4.5 11. ACE Studio与StepFun联合发布开源音乐模型ACE-Step 1.5 12. Ai2发布轻量级开源编码模型SERA-14B 13. 上海AI实验室推出万亿参数多模态科学推理模型Intern-S1-Pro 14. Mistral AI开源40亿参数实时语音模型Voxtral Mini 4B Realtime 2602 15. 快手可灵发布可灵3.0 1

CANN算子开发:从原理到AIGC实战,深度解析Transformer核心算子优化

> **cann组织链接**:https://atomgit.com/cann   > **ops-nn仓库链接**:https://atomgit.com/cann/ops-nn 在AIGC时代,Transformer模型已成为生成式AI的基石,其性能直接决定了模型推理的效率与质量。华为CANN(Compute Architecture for Neural Networks)作为昇腾AI软件栈的核心,其ops-nn组件负责神经网络算子的实现与调度,是打通“模型”与“硬件”的关键一环。本文将深入剖析Transformer核心算子在昇腾平台上的实现原理与优化实践,带领开发者从底层算子开发到上层应用落地,全面提升AIGC应用的计算性能。 --- ## 一、Transformer架构与计算复杂度分析 Transformer模型完全基于注意力机制,没有使用任何卷积或RNN结构,其核心创新在于自注意力(Self-Attention)机制。为了理解如何优化Transformer算子,我们首先需要剖析其计算复杂度与关键瓶颈。 ### 1.1 自注意力机制的数学原理 自注意力机制的核心计算包括查询

大模型基于llama.cpp量化详解

大模型基于llama.cpp量化详解

概述 llama.cpp 是一个高性能的 LLM 推理库,支持在各种硬件(包括 CPU 和 GPU)上运行量化后的大语言模型。本文档详细介绍如何使用 llama.cpp 将 HuggingFace 格式的模型转换为 GGUF 格式,并进行不同程度的量化。 GGUF 格式:GGUF(Georgi Gerganov Universal Format)是 llama.cpp 专门设计的模型文件格式,针对快速加载和保存模型进行了优化,支持单文件部署,包含加载模型所需的所有信息,无需依赖外部文件。 1.安装cmake CMake 是跨平台的构建工具,用于编译 llama.cpp 项目。 下载地址:https://cmake.org/download/ 安装建议: