跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
Python

前端部署：别让你的应用在上线后掉链子

前端部署：别让你的应用在上线后掉链子 毒舌时刻 > 这部署流程写得跟绕口令似的，谁能记得住？ 各位前端同行，咱们今天聊聊前端部署。别告诉我你还在手动上传文件到服务器，那感觉就像在石器时代用石头砸坚果——能用，但效率低得可怜。 为什么你需要自动化部署 最近看到一个项目，部署时需要手动复制文件到服务器，每次部署都要花上几个小时。我就想问：你是在做部署还是在做体力活？ 反面教材 **毒舌点评**：这部署…

机器人发布于 2026/4/7更新于 2026/5/2281K 浏览

前端部署：别让你的应用在上线后掉链子

毒舌时刻

这部署流程写得跟绕口令似的，谁能记得住？

各位前端同行，咱们今天聊聊前端部署。别告诉我你还在手动上传文件到服务器，那感觉就像在石器时代用石头砸坚果——能用，但效率低得可怜。

为什么你需要自动化部署

最近看到一个项目，部署时需要手动复制文件到服务器，每次部署都要花上几个小时。我就想问：你是在做部署还是在做体力活？

反面教材
# 反面教材：手动部署 # 1. 构建项目 npm run build # 2. 压缩文件 zip -r build.zip build # 3. 上传到服务器 scp build.zip user@server:/var/www/html # 4. 登录服务器 ssh user@server # 5. 解压文件 unzip build.zip # 6. 移动文件 mv build/* /var/www/html # 7. 清理文件 rm -rf build build.zip

毒舌点评：这部署流程，就像在徒步穿越沙漠，累得要命还慢。

正确姿势

1. CI/CD 流水线
# 正确姿势：GitHub Actions # .github/workflows/deploy.yml name: Deploy on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' - run: npm install - run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build
2. Docker 部署
# 正确姿势：Docker 部署 # Dockerfile FROM node:16-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD [, , ] # dockercompose.yml version: '' services: frontend: build: . ports:   restart: always
"nginx"
"-g"
"daemon off;"
-
3
-
"80:80"
3. 环境配置
// 正确姿势：环境配置 // .env NODE_ENV=production REACT_APP_API_URL=https://api.example.com REACT_APP_WEB_URL=https://example.com // 使用环境变量 // src/api.js const API_URL = process.env.REACT_APP_API_URL; export async function fetchData() { const response = await fetch(`${API_URL}/data`); return response.json(); }
4. 缓存策略
# 正确姿势：缓存策略 # nginx.conf server { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 30d; add_header Cache-Control "public, no-transform"; } # API 代理 location /api { proxy_pass https://api.example.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

毒舌点评：这才叫前端部署，自动化流程，高效可靠，再也不用担心部署出错了。

目录

  1. 前端部署：别让你的应用在上线后掉链子
  2. 毒舌时刻
  3. 为什么你需要自动化部署
  4. 反面教材
  5. 反面教材：手动部署 # 1. 构建项目 npm run build # 2. 压缩文件 zip -r build.zip build # 3. 上传到服务器 scp build.zip user@server:/var/www/html # 4. 登录服务器 ssh user@server # 5. 解压文件 unzip build.zip # 6. 移动文件 mv build/* /var/www/html # 7. 清理文件 rm -rf build build.zip
  6. 正确姿势
  7. 1\. CI/CD 流水线
  8. 正确姿势：GitHub Actions # .github/workflows/deploy.yml name: Deploy on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' - run: npm install - run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: githubtoken: ${{ secrets.GITHUBTOKEN }} publish_dir: ./build
  9. 2\. Docker 部署
  10. 正确姿势：Docker 部署 # Dockerfile FROM node:16-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] # docker-compose.yml version: '3' services: frontend: build: . ports: - "80:80" restart: always
  11. 3\. 环境配置
  12. 4\. 缓存策略
  13. 正确姿势：缓存策略 # nginx.conf server { listen 80; servername example.com; root /usr/share/nginx/html; index index.html; location / { tryfiles $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 30d; addheader Cache-Control "public, no-transform"; } # API 代理 location /api { proxypass https://api.example.com; proxysetheader Host $host; proxysetheader X-Real-IP $remoteaddr; proxysetheader X-Forwarded-For $proxyaddxforwarded_for; } }
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • 正版 Adobe PS 与 LRC AI 填充功能无法使用解决方案
  • MySQL 9.6 Windows 详细安装与坑点修复
  • 谷歌发布乒乓球 AI 机器人，实现正反手灵活转换与中级选手水平对抗
  • Cursor IDE 中 Spring Boot 项目启动内存不足问题解决方案
  • 大模型核心概念与基础知识入门指南
  • C++ 万能头文件 #include<bits/stdc++.h> 详解
  • Spring Cloud 微服务远程调用：OpenFeign 实战
  • 数据结构：二叉树基础概念与链式存储实现
  • 常见网络安全设备功能与原理详解
  • 用 Codex + GitHub Spec-Kit 实践规格驱动开发
  • HTML Popover API 原生实现浮层交互，无需 JavaScript
  • RAG 技术如何精准应对大模型敏感问题的知识幻觉难题
  • VLA 模型架构全解与核心公式详解
  • OpenClaw Skills 安装与实战：打造你的 AI 技能工具箱
  • 5 款免费 AI 视频生成工具推荐
  • AIGC Bar API 站接入与使用指南
  • AstrBot + NapCat 一键部署智能 QQ 机器人及 cpolar 公网访问配置
  • Vitis 使用教程：从零实现 AI 模型 FPGA 部署
  • Gerrit 配置：Gitweb 集成
  • Spring Boot 4.0 十字路口：虚拟线程时代，WebFlux 与 WebMVC 的选择

相关免费在线工具

  • curl 转代码

    解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online