云服务器使用dist包部署前端全流程指南
一、准备dist包
在本地开发环境中执行打包命令生成dist文件夹：
- 检查项目结构，确保index.html位于public目录下
- 运行
npm run build或yarn build生成dist文件夹 - 处理路由模式问题，如使用history模式需配置服务端重定向
二、上传dist文件到服务器
通过以下方式将dist包传输至云服务器：
- 使用SCP命令：
scp -r dist/ user@server_ip:/target_path - 通过FTP工具（如Xftp）上传至指定目录
- 解压压缩包：
tar xvf dist.tar.gz -C /home/webapp
三、配置Web服务器（Nginx）
修改Nginx配置文件实现请求转发：
server {
listen 80;
server_name your_domain;
location / {
root /home/webapp/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
配置完成后执行nginx -s reload重启服务
四、安全组与端口配置
在云服务器控制台完成网络设置：
- 开放80（HTTP）或443（HTTPS）端口
- 添加自定义端口规则（如8080）时需同步修改Nginx监听端口
- Linux系统需检查防火墙设置：
firewall-cmd --permanent --add-port=80/tcp
五、验证部署结果
通过以下方式检查部署状态：
- 浏览器访问服务器公网IP地址
- 使用
curl http://localhost命令测试本地访问 - 查看Nginx日志：
tail -f /var/log/nginx/error.log
通过规范化的打包流程、正确的服务器配置和网络设置，可实现前端项目的快速部署。建议使用Nginx作为反向代理服务器，同时注意静态资源路径和路由模式的兼容性处理。对于复杂场景可考虑Docker容器化部署方案。
