前端项目部署全攻略（超详细小白版）收藏这篇就够了

最新推荐文章于 2025-12-25 19:30:23 发布

原创最新推荐文章于 2025-12-25 19:30:23 发布 · 577 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

计算机同时被 3 个专栏收录

1946 篇文章

订阅专栏

程序员

1945 篇文章

订阅专栏

前端

120 篇文章

订阅专栏

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

前言

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

宝塔面板部署 🏰

1. 什么是宝塔面板？

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

2. 安装宝塔面板

购买一台云服务器（如阿里云、腾讯云、华为云等），推荐选择 CentOS 或 Ubuntu 系统。
通过 SSH 工具（如 XShell、FinalShell、MobaXterm）连接服务器。
复制宝塔官网的安装命令到终端执行（以 CentOS 为例）：```
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
安装完成后，终端会显示面板地址、账号和密码。用浏览器访问面板地址，登录后台。

3. 配置网站环境

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

4. 上传前端项目

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

5. 配置 Nginx 伪静态

在【网站】列表找到你的站点，点击【设置】。
选择【伪静态】，输入以下内容（适用于 Vue/React/SPA 单页应用）：```
try_files $uri $uri/ /index.html;
保存并重载配置。

6. 配置 HTTPS（可选）

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

7. 绑定域名并访问

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

1Panel 部署 🖥️

1. 什么是 1Panel？

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

2. 安装 1Panel

购买云服务器，推荐 Ubuntu 20.04+。
SSH 连接服务器，执行官方安装命令（以 root 用户）：```
curl -fsSL https://resource.fit2cloud.com/1panel/install.sh | bash
安装完成后，终端会显示面板访问地址和初始账号密码。

3. 创建站点

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

4. 上传前端文件

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

5. 配置伪静态

在站点设置中，找到【伪静态】。
输入以下规则（适用于 SPA）：```
try_files $uri $uri/ /index.html;
保存并重载服务。

6. 绑定域名并访问

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

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. 上传前端文件

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

4. 配置 Nginx

编辑配置文件（如 /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;
}
}
保存后，重载 Nginx：```
sudo nginx -s reload

或

sudo systemctl reload nginx

5. 配置 HTTPS（可选）

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

6. 绑定域名并访问

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

OSS + CDN 部署 ☁️⚡

1. 什么是 OSS 和 CDN？

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

2. 注册云服务商账号

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

3. 创建存储桶

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

4. 上传前端文件

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

5. 配置 CDN 加速

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

6. 绑定域名并访问

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

Gitee/GitHub Pages 部署 📝

1. 什么是 Pages 服务？

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

2. GitHub Pages 部署

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

注意事项

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

3. Gitee Pages 部署

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

内网穿透部署 🌉

1. 什么是内网穿透？

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

2. 常用内网穿透工具

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

3. 以 frp 为例

1. 服务器端（frps）配置

购买一台有公网 IP 的云服务器，下载 frp。
编辑 frps.ini，内容示例：```
[common]
bind_port = 7000
dashboard_port = 7500
dashboard_user = admin
dashboard_pwd = admin
启动 frps：```
./frps -c frps.ini

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

下载 frp，编辑 frpc.ini，内容示例：```
[common]
server_addr = 你的服务器IP
server_port = 7000

[web]
type = http
local_port = 8080
custom_domains = yourname.frpserver.com
启动 frpc：```
./frpc -c frpc.ini