如何在云服务器通过nginx部署前端dist包？

一、环境准备与安装

部署前端dist包需要先确保云服务器已安装Nginx及相关依赖。推荐通过以下步骤完成基础环境搭建：

1. 登录云服务器，执行sudo apt update && sudo apt install nginx安装最新稳定版Nginx
2. 创建项目目录：mkdir -p /usr/local/nginx/html用于存放dist文件
3. 安装编译依赖：yum install -y pcre pcre-devel zlib zlib-devel openssl openssl-devel确保运行环境完整

二、打包与上传dist文件

本地完成前端项目打包后，需将生成的dist目录传输至服务器：

• 使用npm run build生成dist文件夹
• 通过SFTP工具（如FinalShell）将dist文件夹上传至/usr/local/nginx/html/
• 验证文件权限：执行chmod -R 755 /usr/local/nginx/html/dist避免访问限制

三、Nginx配置详解

修改Nginx配置文件是部署成功的关键步骤：

1. 打开配置文件：vi /usr/local/nginx/conf/nginx.conf
2. 在server块中添加以下配置：
   

   location / {
   root   html/dist;
   index  index.html;
   try_files $uri $uri/ /index.html;
   }

3. 检查配置语法：nginx -t确认无报错

四、服务启动与验证

完成配置后，通过以下步骤启动服务：

• 启动Nginx：systemctl start nginx或直接运行nginx命令
• 开放防火墙端口：firewall-cmd --add-port=80/tcp --permanent
• 浏览器访问http://服务器IP验证部署结果

通过标准化安装流程、合理的目录规划及正确的Nginx配置，可在云服务器快速部署前端静态资源。建议通过systemctl enable nginx设置开机自启动，并使用nginx -s reload实现配置热更新。