《前端项目打包与部署指南：从npm run build到线上发布》

刚写完代码的你兴奋地点下npm run build，却发现不知道生成的dist文件夹该怎么用？别急，这篇手把手教程带你完成从本地打包到服务器部署的全流程！🚀

一、本地打包：npm run build详解

1. 打包命令的本质

npm run build  # 实际执行的是package.json里的scripts.build

你的package.json里应该有类似配置：

"scripts": {
  "build": "vite build"  // 或react-scripts build/webpack build等
}

2. 打包后得到什么？

dist/  
├── assets/       # 静态资源（JS/CSS/图片）
├── index.html    # 入口文件
└── favicon.ico   # 网站图标

⚠️ ​​注意​​：不同构建工具输出结构略有不同（Vite/Webpack/CRA等）

二、连接服务器：SSH入门

1. 基础连接命令

ssh username@服务器IP -p 端口号
# 示例（默认22端口可省略-p）：
ssh root@123.45.67.89

2. 常用操作

ls          # 查看当前目录
cd /var/www # 进入web目录
pwd         # 显示当前路径
mkdir demo  # 创建文件夹

三、文件上传：两种常用方式

方法1：Xftp可视化传输

1. 打开Xftp → 新建连接
2. 左侧本地窗口拖入dist文件夹
3. 右侧服务器窗口选择目标目录（如/var/www/html）

方法2：scp命令直传（适合小文件）

scp -r ./dist root@服务器IP:/目标路径
# 示例：
scp -r ./dist root@123.45.67.89:/var/www

四、Nginx配置（让网站能访问）

1. 基础配置示例

server {
    listen       80;
    server_name  yourdomain.com; # 没有域名可写服务器IP
    
    location / {
        root   /var/www/dist;  # 你的dist目录路径
        index  index.html;
        try_files $uri $uri/ /index.html; # 处理前端路由
    }
}

2. 重启Nginx生效

nginx -t      # 测试配置是否正确
nginx -s reload # 重启服务

五、常见问题排查

❌ ​​403 Forbidden​​
➔ 检查目录权限：chmod -R 755 /var/www

❌ ​​页面空白/CSS丢失​​
➔ 检查资源路径：打包时用./相对路径

❌ ​​接口请求404​​
➔ 配置Nginx代理：

location /api {
    proxy_pass http://后端服务地址:端口;
}

​​自动化部署彩蛋​​ 🎁
在项目根目录创建deploy.sh：

#!/bin/bash
npm run build
scp -r ./dist root@服务器IP:/var/www
ssh root@服务器IP "nginx -s reload"
echo "部署完成！"

运行：sh deploy.sh 即可一键部署！