如何通过云服务器部署前端dist包功能？

一、准备工作与环境配置

部署前端dist包前需完成以下准备工作：

1. 通过npm run build生成dist文件夹，注意检查打包路径是否包含./相对路径配置
2. 确认服务器已安装Nginx或Docker运行环境
3. 创建专属部署目录，建议路径为/home/[项目名]/dist避免权限问题

二、创建部署目录与文件传输

通过SSH连接云服务器后执行：

sudo mkdir -p /home/nvisual-frontend/dist
sudo tar xvf dist-2.2.12-20231122.tar.gz -C /home/nvisual-frontend/dist/

推荐使用scp命令或FinalShell等工具完成本地dist包上传。目录结构应包含index.html作为入口文件，并确保静态资源路径正确。

三、Nginx服务器配置详解

修改/etc/nginx/nginx.conf配置文件：

server {
listen 80;
location / {
root /home/nvisual-frontend/dist;
index index.html;
try_files $uri $uri/ /index.html;
}

需添加user root解决权限问题，配置完成后执行nginx -s reload重启服务。

四、安全组设置与访问验证

• 阿里云服务器需在控制台开放80/443端口
• 通过curl http://localhost验证本地服务状态
• 使用Docker部署时需映射端口：docker run -p 8080:80

部署流程涵盖本地打包、服务器环境准备、文件传输、服务配置四大环节。建议采用Nginx作为反向代理服务器，配合自动化脚本实现持续部署。Docker容器化部署可提升环境一致性，适合多节点集群场景。