【DevOps】从零搭建：自建服务器公网 IP 部署指南

文章目录

• 一、简介
• 二、效果
• 三、步骤
• • 3.1、自建服务器部署网页
  • • 3.1.1、开启 Win11 的 IIS 服务
    • 3.1.2、把 dist 文件夹放到服务器
    • 3.1.3、IIS 配置网站
    • 3.1.4、局域网访问网站
  • 3.2、给自建服务器整个公网IP
  • • 3.2.1、花生壳（最简单）
    • 3.2.2、公网服务器 Frp 内网穿透
    • • 3.2.2.1、在 Ubuntu 公网服务器 上操作（服务端）
      • 3.2.2.2、在 Windows 自建服务器 上操作（客户端）
  • 3.3、自建服务器解决“跨源隔离”
  • • 3.3.1、IIS 图形界面配置
    • 3.3.2、vite.config.js

一、简介

很多人想把自己电脑上跑通的各类服务、个人站点与应用项目对外开放，摆脱局域网仅限内网访问的局限。无论是自建博客、网盘、工具箱，还是各类自研业务服务，都希望借助公网 IP 实现全网可访问，随时随地远程连接使用。 但自建服务器从内网搭建到公网正式上线，涉及网络配置、端口规划、安全防护、服务映射等诸多细节，稍有不慎就会出现访问失败、端口占用、安全暴露等问题。本文就从实际部署角度，完整记录个人服务器搭载公网 IP、业务服务正式公网落地的全过程。

二、效果

以Vue打包好的dist 文件夹，纯净 Win11 服务器一键部署开始展示效果。

三、步骤

3.1、自建服务器部署网页

由于我是在 Windows服务器 上，选择最轻便的IIS，如果是考虑跨平台，建议使用nginx开源跨平台工具

3.1.1、开启 Win11 的 IIS 服务

在你的纯净 Win11 服务器上操作： 打开搜索 【启用或关闭 Windows 功能】 并打开 勾选以下选项（必须全勾）： Internet Information Services 展开它 → 勾选 【Web 管理工具】 展开它 → 勾选 【万维网服务】（默认子项全选）

点击 确定，等待安装完成 → 重启电脑

3.1.2、把 dist 文件夹放到服务器

在服务器随便建一个文件夹，比如：C:\\web\\vue-project 把你本地打包好的 dist 文件夹整个复制进去最终路径示例：C:\\web\\splat\\dist

3.1.3、IIS 配置网站

搜索 【IIS 管理器】 并打开 左侧找到 【网站】 → 右键 【添加网站】 填写配置： 网站名称：随便填（如 vue-dist） 物理路径：选择你刚才的 dist 文件夹示例：C:\\web\\splat\\dist 端口：填 80（默认网页端口）或 8080（不冲突就行） 点击 确定，网站直接启动

3.1.4、局域网访问网站

本地访问：浏览器打开 http://localhost（你设的端口） 局域网其他电脑访问：查服务器 IP → 打开 http://服务器IP（千万记得关防火墙或者配置出入站规则哈！）

3.2、给自建服务器整个公网IP

3.2.1、花生壳（最简单）

大部分人不愿意花钱，但是我还是提供一下这种简单的方式。（我也尝试过，但是没过多长时间过期了，不过确实简单）

下载 Windows 版，安装、注册、登录 2. 添加映射（核心）

打开客户端 → 内网穿透 → + 添加映射 应用名称：随便写（如：Vue12345） 应用类型：TCP（或 HTTP） 内网主机：127.0.0.1（本机） 内网端口：12345 外网域名：系统分配（免费） 外网端口：随机端口（免费） 点 确定 → 状态显示 在线 就成功了

拿到你的外网地址 示例（你实际会不一样）： http://xxxxxx.vicp.cc:32456

3.2.2、公网服务器 Frp 内网穿透

我有一台公网Ubuntu服务器，用 Ubuntu 服务器做 Frp 内网穿透，思路如下： 1.本地 Windows 服务器 ← 主动连接 → Ubuntu 公网服务器 2.外界访问 Ubuntu 公网 IP → 自动转发到本地的 Vue 项目

！！！注意：这里一定要注意frp的服务端和客户端的版本要一致（我这里用的0.58.1）

3.2.2.1、在 Ubuntu 公网服务器 上操作（服务端）

登录服务器

# 1. 下载 frp 服务端
wget https://github.com/fatedier/frp/releases/download/v0.58.1/frp_0.58.1_linux_amd64.tar.gz

# 2. 解压
tar -zxvf frp_0.58.1_linux_amd64.tar.gz
cd frp_0.58.1_linux_amd64

# 3. 创建服务端配置
vim frps.toml

我的服务器frps.toml是这么配置的： 按 ESC → 输入 :wq 保存退出。

启动：

./frps -c frps.toml

这里可以查看下：

3.2.2.2、在 Windows 自建服务器 上操作（客户端）

下载windows 版 frpc：https://github.com/fatedier/frp/releases/download/v0.58.1/frp_0.58.1_windows_amd64.zip

如果这个太慢，可以用我上传到csdn的： windows0.58.1客户端：https://download.csdn.net/download/u014597198/92835999

编辑，frpc.toml：

serverAddr = "你的Ubuntu公网IP"
serverPort = 7000

[[proxies]]
name = "vue-web"
type = "http"
localIP = "127.0.0.1"
localPort = 12345
customDomains = ["你的Ubuntu公网IP"]

双击启动 frpc.exe出现 start proxy success 就通了！

最终访问方式（全世界都能打开）

https://你的Ubuntu公网IP:8080

3.3、自建服务器解决“跨源隔离”

3.3.1、IIS 图形界面配置

打开 IIS 管理器 → 找到你部署 dist 的那个网站 中间功能视图里，双击 HTTP 响应头 右侧 操作 → 添加，依次加这 3 个头：

加完 直接刷新网页 就生效（不用重启 IIS / 网站）

3.3.2、vite.config.js

前端方面配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
server: {
headers: {
// 保留跨源隔离，但放宽 embed 策略（避免拦截合法资源）
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'credentialless', // 替换 require-corp 为 credentialless
'Cross-Origin-Resource-Policy': 'same-site'
}
}
})