🚀 前端项目部署全攻略（超详细小白版）

目录

• 前言
• 宝塔面板部署 🏰
• 1Panel 部署 🖥️
• Nginx 部署 🌐
• OSS + CDN 部署 ☁️⚡
• Gitee/GitHub Pages 部署 📝
• 内网穿透部署 🌉
• 常见问题与优化建议 💡

---

前言

前端项目部署，就是把你本地开发好的网页、应用放到互联网上，让全世界都能访问。常见的部署方式有服务器面板（如宝塔、1Panel）、Nginx、对象存储（OSS）+ CDN、静态托管（Gitee/GitHub Pages）、内网穿透等。

---

宝塔面板部署 🏰

1. 什么是宝塔面板？

宝塔面板是一款可视化服务器管理工具，支持一键安装 LNMP/LAMP 环境，适合新手快速搭建网站。

2. 安装宝塔面板

1. 购买一台云服务器（如阿里云、腾讯云、华为云等），推荐选择 CentOS 或 Ubuntu 系统。
2. 通过 SSH 工具（如 XShell、FinalShell、MobaXterm）连接服务器。
3. 复制宝塔官网的安装命令到终端执行（以 CentOS 为例）：

   yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
   

4. 安装完成后，终端会显示面板地址、账号和密码。用浏览器访问面板地址，登录后台。

3. 配置网站环境

1. 在宝塔面板首页，点击【软件商店】，安装 Nginx（或 Apache）、MySQL、PHP（如有后端需求）。
2. 安装完成后，点击左侧【网站】→【添加站点】。
3. 填写域名（如没有域名可用服务器 IP）、根目录（如 /www/wwwroot/yourdomain.com），点击提交。

4. 上传前端项目

1. 本地打包项目（如 npm run build），生成 dist 或 build 文件夹。
2. 在宝塔面板左侧点击【文件】，进入网站根目录。
3. 点击上传，将打包后的所有文件上传到根目录下（可先压缩为 zip 上传，面板内解压）。

5. 配置 Nginx 伪静态

1. 在【网站】列表找到你的站点，点击【设置】。
2. 选择【伪静态】，输入以下内容（适用于 Vue/React/SPA 单页应用）：

   try_files $uri $uri/ /index.html;
   

3. 保存并重载配置。

6. 配置 HTTPS（可选）

1. 在【设置】→【SSL】中，申请免费证书或上传已有证书。
2. 开启强制 HTTPS。

7. 绑定域名并访问

1. 在域名服务商处将域名解析到服务器 IP。
2. 浏览器访问你的域名，检查是否能正常访问前端页面。

---

1Panel 部署 🖥️

1. 什么是 1Panel？

1Panel 是一款现代化的服务器运维面板，界面简洁，支持多种建站环境，适合新手和开发者。

2. 安装 1Panel

1. 购买云服务器，推荐 Ubuntu 20.04+。
2. SSH 连接服务器，执行官方安装命令（以 root 用户）：

   curl -fsSL https://resource.fit2cloud.com/1panel/install.sh | bash
   

3. 安装完成后，终端会显示面板访问地址和初始账号密码。

3. 创建站点

1. 登录 1Panel 后台，点击【网站】→【新建网站】。
2. 填写站点信息（域名、根目录等），点击确定。
3. 进入站点管理页面，记下根目录路径。

4. 上传前端文件

1. 本地打包项目（如 npm run build）。
2. 用 1Panel 文件管理器或 SFTP 工具（如 FileZilla）上传所有打包文件到站点根目录。

5. 配置伪静态

1. 在站点设置中，找到【伪静态】。
2. 输入以下规则（适用于 SPA）：

   try_files $uri $uri/ /index.html;
   

3. 保存并重载服务。

6. 绑定域名并访问

1. 域名解析到服务器 IP。
2. 浏览器访问域名，检查页面是否正常。

---

Nginx 部署 🌐

1. 什么是 Nginx？

Nginx 是一款高性能的 Web 服务器，常用于静态资源托管和反向代理。

2. 安装 Nginx

• Ubuntu/Debian：

  sudo apt update
  sudo apt install nginx
  

• CentOS：

  sudo yum install nginx
  

• Mac（Homebrew）：

  brew install nginx
  

3. 上传前端文件

1. 本地打包项目（如 npm run build）。
2. 用 SFTP 工具上传所有打包文件到服务器目录（如 /usr/share/nginx/html 或自定义目录）。

4. 配置 Nginx

1. 编辑配置文件（如 /etc/nginx/sites-available/default 或 /etc/nginx/conf.d/your-site.conf）：

   server {
       listen 80;
       server_name your-domain.com; # 改为你的域名或IP
       root /path/to/your/dist;     # 改为你的前端文件目录
       index index.html;
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

2. 保存后，重载 Nginx：

   sudo nginx -s reload
   # 或
   sudo systemctl reload nginx
   

5. 配置 HTTPS（可选）

1. 申请 SSL 证书（可用 Let’s Encrypt 免费证书）。
2. 配置 HTTPS 参考官方文档或宝塔/1Panel面板。

6. 绑定域名并访问

1. 域名解析到服务器 IP。
2. 浏览器访问域名或 IP，检查页面是否正常。

---

OSS + CDN 部署 ☁️⚡

1. 什么是 OSS 和 CDN？

• OSS（对象存储服务）：如阿里云 OSS、腾讯云 COS、七牛云 Kodo，用于存储静态文件。
• CDN（内容分发网络）：加速全球访问，提升访问速度和稳定性。

2. 注册云服务商账号

• 推荐：阿里云、腾讯云、七牛云等。

3. 创建存储桶

1. 登录云平台，进入对象存储服务，创建存储桶（Bucket）。
2. 设置为【公共读】权限。

4. 上传前端文件

1. 本地打包项目（如 npm run build）。
2. 用 Web 控制台或命令行工具（如 ossutil）上传所有文件到存储桶。

5. 配置 CDN 加速

1. 在云平台开通 CDN 服务，源站选择你的 OSS 存储桶。
2. 绑定自定义域名（如 static.yourdomain.com），并配置 HTTPS 证书。
3. CDN 配置缓存规则，建议设置 index.html 不缓存，其他资源可长时间缓存。

6. 绑定域名并访问

1. 域名解析到 CDN 分配的 CNAME 地址。
2. 浏览器访问自定义域名，体验全球加速效果。

---

Gitee/GitHub Pages 部署 📝

1. 什么是 Pages 服务？

Pages 是静态网站托管服务，适合个人博客、文档、前端项目等，免费且无需服务器。

2. GitHub Pages 部署

1. 注册 GitHub 账号，创建新仓库。
2. 本地打包项目（如 npm run build），将 dist 文件夹内容上传到仓库。
3. 进入仓库【Settings】→【Pages】，选择分支（如 main 或 gh-pages），保存。
4. 访问地址：https://your-username.github.io/your-repo/

注意事项

• SPA 项目建议在 public 目录下添加 .nojekyll 文件，避免被 Jekyll 处理。
• 如需自定义域名，在仓库根目录添加 CNAME 文件，内容为你的域名。

3. Gitee Pages 部署

1. 注册 Gitee 账号，创建新仓库。
2. 上传打包后的所有文件。
3. 进入仓库，点击【服务】→【Pages 服务】，选择分支并保存。
4. 访问 Gitee 提供的 Pages 地址。

---

内网穿透部署 🌉

1. 什么是内网穿透？

内网穿透可以让外网用户访问你本地电脑上的服务，适合本地开发演示、远程调试等场景。

2. 常用内网穿透工具

• frp（开源，需有公网服务器）
• ngrok（国外，免费版有时限）
• natapp、花生壳（国内，简单易用）

3. 以 frp 为例

1. 服务器端（frps）配置

1. 购买一台有公网 IP 的云服务器，下载 frp。
2. 编辑 frps.ini，内容示例：

   [common]
   bind_port = 7000
   dashboard_port = 7500
   dashboard_user = admin
   dashboard_pwd = admin
   

3. 启动 frps：

   ./frps -c frps.ini
   

2. 本地客户端（frpc）配置

1. 下载 frp，编辑 frpc.ini，内容示例：

   [common]
   server_addr = 你的服务器IP
   server_port = 7000
   
   [web]
   type = http
   local_port = 8080
   custom_domains = yourname.frpserver.com
   

2. 启动 frpc：

   ./frpc -c frpc.ini
   

3. 访问测试

• 通过 yourname.frpserver.com 访问本地服务。

4. 其他工具

• natapp、花生壳等无需服务器，注册后获取隧道地址，按官网指引操作即可。

---

常见问题与优化建议 💡

1. 缓存问题

• 建议配置合理的缓存策略，避免前端资源更新后用户访问到旧资源。
• Nginx/OSS 可设置缓存头，index.html 建议不缓存，静态资源可长时间缓存。

2. HTTPS 配置

• 建议开启 HTTPS，提升安全性和 SEO。
• 可用 Let’s Encrypt 免费证书，或在宝塔/1Panel 面板一键申请。

3. CDN 加速

• 使用 CDN 可大幅提升访问速度和稳定性，尤其适合全国或全球用户。

4. 自动化部署

• 可结合 GitHub Actions、Gitee CI、Jenkins 等工具实现自动化部署，提升效率。

5. SEO 优化

• 静态站点建议配置 sitemap、robots.txt、meta 标签等，提升搜索引擎收录。

6. 跨域问题

• 如有接口请求，需后端或 Nginx 配置 CORS，允许前端域名访问。

7. 404 问题

• SPA 项目需配置伪静态，防止刷新页面出现 404。