网站导航
> 技术文档 > 前端项目部署流程

前端项目部署流程

网友: 技术文档 2025-09-03 02:09:03

前端项目部署流程

      • **一、前期准备**
      • **二、服务器基础配置**
      • **三、上传项目文件到服务器**
        • 方法 1：SCP 命令（适合小项目）
        • 方法 2：Git（推荐）
        • 方法 3：FTP 工具（如 FileZilla）
      • **四、配置 Nginx**
      • **五、验证部署**
      • **六、高级优化**
      • **常见问题解决**
      • **总结流程**

将前端项目部署到服务器需要经过以下步骤，下面是从零开始的详细流程（以 Linux 服务器为例）：

一、前期准备

  1. 完成本地开发

    • 确保项目在本地能正常运行：npm run build（或 yarn build）生成静态文件（通常在 dist/ 目录）
    • 检查 dist/index.html 是否能正常访问

  2. 准备服务器

    • 购买云服务器（阿里云/腾讯云/AWS 等），选择 Linux 系统（推荐 Ubuntu/CentOS）
    • 获取服务器公网 IP 地址
    • 通过 SSH 登录服务器（Windows 用 PuTTY，Mac/Linux 用终端）： 
      ssh root@你的服务器IP

二、服务器基础配置

  1. 安装必要软件

    # 更新系统sudo apt update && sudo apt upgrade -y# 安装 Web 服务器（Nginx）sudo apt install nginx -y# 可选：安装 Node.js（如需服务端渲染）curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -sudo apt install nodejs

  2. 配置防火墙

    sudo ufw allow 80 # 开放 HTTP 端口sudo ufw allow 443 # 开放 HTTPS 端口sudo ufw allow 22 # 开放 SSH 端口sudo ufw enable # 启用防火墙

三、上传项目文件到服务器

方法 1：SCP 命令（适合小项目）
# 本地终端执行（非服务器）scp -r ./dist root@你的服务器IP:/var/www/my-project
方法 2：Git（推荐）
  1. 在服务器安装 Git： 
    sudo apt install git -y
  2. 克隆仓库到服务器： 
    cd /var/wwwsudo git clone https://github.com/你的用户名/项目仓库.git
  3. 构建项目（如需在服务器构建）： 
    cd 项目仓库npm installnpm run build
方法 3：FTP 工具（如 FileZilla）
  • 使用 FTP 客户端连接服务器，上传 dist/ 文件夹到 /var/www/my-project

四、配置 Nginx

  1. 创建配置文件 
    sudo nano /etc/nginx/sites-available/my-project
  2. 粘贴以下配置（根据需求修改）： 
    server { listen 80; server_name 你的域名或IP; # 没有域名填服务器IP # 静态文件目录 root /var/www/my-project/dist; index index.html; location / { try_files $uri $uri/ /index.html; # 支持前端路由（如 React Router） } # 可选：代理 API 请求到后端 location /api/ { proxy_pass http://localhost:3000; # 转发到后端服务 proxy_set_header Host $host; }}
  3. 启用配置 
    sudo ln -s /etc/nginx/sites-available/my-project /etc/nginx/sites-enabled/sudo nginx -t # 测试配置是否正确sudo systemctl reload nginx

五、验证部署

  1. 浏览器访问 http://你的服务器IP
  2. 检查是否显示前端页面
  3. 测试路由跳转和接口请求

六、高级优化

  1. HTTPS 配置（必需）

    • 使用 Let’s Encrypt 免费证书： 
      sudo apt install certbot python3-certbot-nginx -ysudo certbot --nginx -d 你的域名
    • 自动续期证书：sudo certbot renew --dry-run

  2. 静态资源缓存
    在 Nginx 配置中添加：

    location /assets/ { expires 1y; add_header Cache-Control \"public\";}

  3. 部署自动化

    • 使用 GitHub Actions / Jenkins 实现 CI/CD
    • 示例 GitHub Actions 步骤： 
      jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm install && npm run build - uses: appleboy/scp-action@master with: host: ${{ secrets.SERVER_IP }} username: ${{ secrets.SERVER_USER }} key: ${{ secrets.SSH_KEY }} source: \"dist/\" target: \"/var/www/my-project\"

常见问题解决

  1. 403 Forbidden

    • 检查文件权限：sudo chmod -R 755 /var/www/my-project
    • 检查 Nginx 配置中的 root 路径是否正确

  2. 路由刷新 404

    • 确保 Nginx 配置中有：try_files $uri $uri/ /index.html;

  3. 白屏问题

    • 检查静态资源路径：在 vite.config.js 或 vue.config.js 中设置 base: \'./\'
    • 查看浏览器控制台是否有 404 错误

总结流程

#mermaid-svg-wkW1UlWt9ok4XcWy {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .error-icon{fill:#552222;}#mermaid-svg-wkW1UlWt9ok4XcWy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wkW1UlWt9ok4XcWy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-wkW1UlWt9ok4XcWy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wkW1UlWt9ok4XcWy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wkW1UlWt9ok4XcWy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wkW1UlWt9ok4XcWy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wkW1UlWt9ok4XcWy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wkW1UlWt9ok4XcWy .marker.cross{stroke:#333333;}#mermaid-svg-wkW1UlWt9ok4XcWy svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wkW1UlWt9ok4XcWy .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .cluster-label text{fill:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .cluster-label span{color:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .label text,#mermaid-svg-wkW1UlWt9ok4XcWy span{fill:#333;color:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .node rect,#mermaid-svg-wkW1UlWt9ok4XcWy .node circle,#mermaid-svg-wkW1UlWt9ok4XcWy .node ellipse,#mermaid-svg-wkW1UlWt9ok4XcWy .node polygon,#mermaid-svg-wkW1UlWt9ok4XcWy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wkW1UlWt9ok4XcWy .node .label{text-align:center;}#mermaid-svg-wkW1UlWt9ok4XcWy .node.clickable{cursor:pointer;}#mermaid-svg-wkW1UlWt9ok4XcWy .arrowheadPath{fill:#333333;}#mermaid-svg-wkW1UlWt9ok4XcWy .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wkW1UlWt9ok4XcWy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wkW1UlWt9ok4XcWy .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-wkW1UlWt9ok4XcWy .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-wkW1UlWt9ok4XcWy .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wkW1UlWt9ok4XcWy .cluster text{fill:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy .cluster span{color:#333;}#mermaid-svg-wkW1UlWt9ok4XcWy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-wkW1UlWt9ok4XcWy :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 本地构建项目 上传到服务器 配置 Nginx 配置 HTTPS 自动化部署

💡 提示：对于纯静态项目，可使用 Vercel/Netlify 等托管平台（无需服务器），但掌握服务器部署仍是必备技能。

网络标签：

相关问题