🚀 前端项目部署小白教程：从打包到上线的完整指南

✨ 前言

作为一名前端开发者，我们通常只需要将打包好的文件交给后端或运维同学即可完成部署。但在某些场景下，我们也需要亲自将前端资源部署到服务器上。本文将以最直观的方式，带你一步步完成前端项目的完整部署流程，并解释其中涉及的关键概念！🎯

📚 核心概念解析

在开始实操前，先了解几个基础概念，这将帮助你更好地理解整个部署过程：

1. 什么是 Nginx？🌐

Nginx（发音为”engine-x”）是一款高性能的开源Web服务器，同时具备反向代理、负载均衡和HTTP缓存等强大功能。它最初是为了解决C10K问题（即单服务器处理万级并发连接）而设计。

以下是Nginx的核心功能概览：

功能类别	核心能力	典型应用场景
Web服务器	高效处理静态资源（HTML、CSS、JS、图片等）	托管静态网站、作为前端资源服务器
反向代理	接收客户端请求并转发给后端服务器，隐藏真实服务器信息	作为后端应用的统一入口和安全屏障
负载均衡	将请求分发到多个后端服务器	分散高并发流量，提高应用可用性
HTTP缓存	缓存静态内容及后端响应，加速访问速度	提升用户体验，减少服务器负载
SSL/TLS终止	处理HTTPS加密解密，减轻后端压力	统一管理SSL证书，提供安全访问

💡 对于前端部署，我们主要使用其Web服务器功能来代理静态资源

🔗 更多nginx配置详情可参考：Nginx配置详解

2. Linux基础认知 🐧

Linux是一个开源的免费操作系统内核，大多数服务器都使用基于Linux的发行版系统。

目录路径	全称与含义	说明与示例
`/`	根目录	整个文件系统的起点，所有其他目录都挂载在其下
`/etc`	Etcetera (等等)	存放系统配置文件，Nginx配置就在`/etc/nginx/`目录下
`/home`	Home (家目录)	存放用户个人目录，类似于Windows的`C:/Users/`目录，SSH密钥也存放在这里
`/usr`	Unix System Resources	存放用户安装的应用程序和资源
`/var`	Variable data (可变数据)	存放经常变化的动态数据，如日志、缓存、数据库文件以及我们部署的网站文件。举例： `/var/log/`(系统及应用程序日志)，`/var/www/`(网站根目录的默认位置，你的项目代码通常放在这里)。

📌对于前端部署，/var/www/目录至关重要，因为它通常是 Nginx 或 Apache 等 Web 服务器默认寻找网站文件（如 HTML, CSS, JavaScript, 图片）的根目录。你通过 SFTP 上传代码和解压的目标路径，大概率就是 /var/www/下的某个子目录。

🛠️ 实战部署五步走

1. 资源打包准备 📦

完成前端项目打包后，将生成的dist目录压缩成zip包，方便传输到服务器：

2. 服务器连接指南 🔐

登录服务器主要有两种方式：密码登录或SSH密钥登录。

如果是公司服务器，请咨询同事或相关负责人获取登录方式
个人云服务器可通过厂商控制台登录

💡 首次登录服务器后，向服务器添加ssl密钥，此后就可以使用远程终端免密连接服务器，操作更加便捷。

🔗 更多详情可参考：SSH登录详解

3. 文件上传操作 📤

使用MobaXterm连接服务器后，会自动建立SFTP连接用于文件传输：

1.在地址栏输入目标目录（一般为/var/www）

2.将dist.zip文件拖拽或复制到该目录，等待传输完成即可

4.解压与部署 📂

假设Nginx配置的代理目录为/var/www/newBlog，按以下步骤操作：

1 2	# 解压文件到指定目录 unzip /var/www/dist.zip -d /var/www/newBlog/

成功解压后会看到类似输出：

ubuntu@VM-16-3-ubuntu:/var/www$ unzip dist.zip -d /var/www/newBlog/
Archive:  dist.zip
   creating: /var/www/newBlog/assets/
  inflating: /var/www/newBlog/assets/cesium2s-32335f0d.css
  inflating: /var/www/newBlog/assets/cesium2s-9ce9b3ba.js
  inflating: /var/www/newBlog/assets/Cesium3dtilesOption-15f897aa.js
  inflating: /var/www/newBlog/assets/Cesium3dtilesOption-e0082108.css
  inflating: /var/www/newBlog/assets/el-tooltip-7314221b.css
  inflating: /var/www/newBlog/assets/el-tooltip-fd36dc7f.js
  inflating: /var/www/newBlog/assets/FloodAnalysis-023b85c1.js
  inflating: /var/www/newBlog/assets/FloodAnalysis-926196e3
  ...