将前端项目部署到服务器上 —— nginx篇（一）
将前端项目部署到服务器上
一、 nginx +xshell +xftp 篇
文章目录
- 将前端项目部署到服务器上
- 一、 nginx +xshell +xftp 篇
- @[TOC](文章目录)
- 前言
- 一、前期准备工作
- 1.1 前端资源
- 1.2 服务器资源
- 1.3 软件资源
- 1.3.1 xshell 8
- 1.3.2 xftp
- 二、部署步骤
- 2.1.服务器环境配置
- 2.2 配置Ngnix (重点)
- 2.2.1检查 Nginx 主配置
- 2.2.2 创建站点配置文件
- 2.2.2 启用配置
- 总结
文章目录
- 将前端项目部署到服务器上
- 一、 nginx +xshell +xftp 篇
- @[TOC](文章目录)
- 前言
- 一、前期准备工作
- 1.1 前端资源
- 1.2 服务器资源
- 1.3 软件资源
- 1.3.1 xshell 8
- 1.3.2 xftp
- 二、部署步骤
- 2.1.服务器环境配置
- 2.2 配置Ngnix (重点)
- 2.2.1检查 Nginx 主配置
- 2.2.2 创建站点配置文件
- 2.2.2 启用配置
- 总结
前言
前端项目部署到服务器上，没接触过，确实是蒙里懵懂！好在借助强大的AI 工具，终于是将个人写的博客框架成功部署到了阿里云服务器上！祝你们好运。。。
一、前期准备工作
1.1 前端资源
前端项目可以正常的打包压缩出来，那么我是用Vite 构建的Vue3项目，打包的命令是：
npm run build
终端输入这个指令之后，可以在根目录下看到dist文件夹，其中包含的是前端的文件资源，包括了index.html、js、css以及图片资源。没打包成功的，请检查报错信息。。
这个文件是要放到服务器上的。
1.2 服务器资源
欲善其事，购买一个服务器，一些服务器厂商也有很多了，我选择的是阿里云服务器。那么云服务器ECS 和 轻量级服务器 二选一个就好了，个人使用轻量级服务器就够用了，买一个最基础的配置，价格大家可以去官网查看购买。
注意：选择的系统镜像，对后续的系统默认配置有影响。
那么我这边用的是云服务器ECS(蹭别人的)，系统镜像是 Alibaba Cloud Linux 。
1.3 软件资源
部署需要一些工具，xshell (我用的8版本)、xftp(这个非常好用，可视化上传文件的工具)，如果对于Linux的命令熟悉的话，都不要紧，随便弄。
1.3.1 xshell 8
为什么选择的是这个工具呢，主要是想熟悉一下一些命令，然后方便在本地远程连接到服务器。至于说连接步骤，我简单说下，需要新建会话，填写名称、主机号、还有端口.
主机就是：服务器对外的ip地址，然后点击用户身份验证，账号密码，相信都没问题！连接成功之后可以在左下角看到你的主机地址。
1.3.2 xftp
你可以任意上传文件，当然也需要连接远程服务器，在xshell 中找到一个绿色图标，点击一下就好了。好现在我们进入正式的步骤》》》
补充：确保阿里云 ECS 安全组已开放： 22 端口（SSH） 80 端口（HTTP）443 端口（HTTPS，可选）
二、部署步骤
2.1.服务器环境配置
更新系统
sudo yum update -y
安装必要工具
sudo yum install -y git wget vim
安装 Node.js（用于构建）
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs
安装 Nginx
sudo yum install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx
2.2 配置Ngnix (重点)
在 Alibaba Cloud Linux 系统中，如果 /etc/nginx 目录下只有 sites-available 和 sites-enabled 目录（类似 Ubuntu 的配置结构），而缺少 conf.d 目录，可以按照以下方式部署 Vue 项目：
2.2.1检查 Nginx 主配置
sudo vim /etc/nginx/nginx.conf
确保主配置文件中包含以下内容（通常已默认包含）：
http {
# ...
include /etc/nginx/sites-enabled/*; # 加载 sites-enabled 下的配置
}
2.2.2 创建站点配置文件
在 sites-available 中创建配置文件：
sudo vim /etc/nginx/sites-available/blog.conf
写入 Vue 项目的 Nginx 配置：
server {
listen 80;
server_name 你的域名或IP;
root /home/vue-project/blog;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存
location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
}
2.2.2 启用配置
创建符号链接到 sites-enabled：
sudo ln -s /etc/nginx/sites-available/wzh-blog.conf /etc/nginx/sites-enabled/
测试并重启 Nginx
sudo nginx -t # 测试配置语法
sudo systemctl restart nginx # 重启生效
如果缺少 sites-available/enabled 目录
如果连这两个目录都不存在，可以手动创建标准 CentOS 风格的 conf.d 目录：
总结
提示：肯定会遇到其他问题，在评论区讨论一下：
如果存在 sites-available/enabled：
将配置放在 sites-available 中，并通过符号链接启用。
如果目录结构混乱：
直接创建 /etc/nginx/conf.d/ 并修改主配置加载。
