Linux 上部署 React 网站 — 从零搭建到上线的完整操作指南

在现代前端项目中，React 是非常流行的技术栈之一。但写完前端代码之后，很多人会卡在“怎样把 React 应用部署到 Linux 服务器上”这一步。本文将从头到尾讲清楚这一过程，包括准备、构建、部署、服务器配置、HTTPS 安全、自动化部署、运维与优化等环节，让你能在 Linux 上稳定、高效地运行 React 网站。

前期准备

选择服务器 & 操作系统：常用选择包括 Ubuntu、Debian、CentOS、Rocky Linux 等。本文后续示例以 Ubuntu 为主，但其他发行版思路一致。

获取服务器访问权限 & SSH 登录：使用非 root 用户并具备 sudo 权限

配置 SSH key 登录，禁用密码登录，提高安全性：若使用防火墙（如 UFW、firewalld），确保开放 HTTP（80）与 HTTPS（443）端口

本地环境准备：在本地机器安装 Node.js 和 npm / yarn

确保 React 应用在本地可正常运行、构建：若使用 React Router 或前端路由，要注意服务器如何处理页面刷新、404 路径等问题

生成生产构建（Build）

在本地 React 项目根目录执行：

npm run build
# 或者
yarn build

这个命令会将你的 React 应用打包成静态资源，输出到项目目录下的 build 或 dist 文件夹。这个产物是部署在服务器上的内容。

提示：如果你的 React 应用用了前端路由（例如 React Router 的 BrowserRouter 模式），建议在 package.json 添加 homepage 字段，或调整打包后的路径基础（publicPath / basename）以确保资源路径正确加载。

将构建产物上传到服务器

你可以使用以下方式将构建好的静态文件上传到服务器：

  • scp（安全复制，例如 scp -r build/ user@server:/var/www/myapp）
  • rsync（增量同步更快、更灵活）
  • Git + CI/CD（服务器自动拉取构建产物）
  • FTP / SFTP（不推荐用于生产环境）

将构建目录的内容（通常是 index.html、static/、CSS、JS 文件等）上传到服务器某个目录，比如 /var/www/myapp。

选择 Web 服务器 & 反向代理方案

静态文件可以直接用 Web 服务器（如 Nginx、Apache）来托管。对于更复杂的场景（带后台 API、SSR、反向代理等），可以用 Nginx 做反向代理或负载均衡。下面是两种典型方案：

1. 使用 Nginx 来托管静态 React 应用

在服务器上安装 Nginx：

sudo apt update
sudo apt install nginx

然后配置一个 Nginx “服务器块”（server block 或 virtual host），示例：

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    # React 构建目录
    root /var/www/myapp;
    index index.html;

    location / {
        # 如果请求的资源存在就直接返回，否则都指向 index.html
        try_files $uri $uri/ /index.html;
    }

    # 可选：针对静态资源设置缓存策略
    location ~* \.(js|css|png|jpg|jpeg|svg|gif|ico)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

然后启用该站点：

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

这个配置能保证当用户访问诸如 /about、/users/123 等前端路由地址时，服务器返回 index.html，由前端路由处理页面渲染。

2. 使用 Apache（可选方案）

如果你偏好 Apache，也可以用 Apache 来托管 React 应用。你需要：

  • 将构建产物部署到 Apache 可访问目录（如 /var/www/html/myapp）
  • 在 Apache 的虚拟主机配置中，使用 RewriteRule 对路径进行重写，让所有非资源请求指向 index.html
  • 保证 .htaccess 或 vhost 中加入类似 FallbackResource /index.html 或者 mod_rewrite 重写规则

不过相比 Nginx，Apache 在处理静态文件方面可能不如 Nginx 高效。

配置 HTTPS / SSL（强烈建议）

在公网环境下，使用 HTTPS 协议几乎是必须的。以下是获取和部署 Let’s Encrypt 免费 SSL 证书的基本步骤：

安装 Certbot（Let’s Encrypt 客户端）以及 Nginx 插件

sudo apt install certbot python3-certbot-nginx

申请 SSL 证书

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Certbot 会自动修改对应 Nginx 配置，将 HTTP 重定向到 HTTPS、生成证书配置段等。

最后，确认证书自动续期：

sudo certbot renew --dry-run

这样，当用户访问 https://your-domain.com 时，就能使用加密连接，并且浏览器不会报 “不安全” 警告。

前端 + 后端整合 / 代理转发

很多现实项目并不仅仅是纯静态的 React 页面，还会有后台 API、WebSocket、上传接口等。这时通常采用以下方式整合：

将 API 请求路径由 React 应用发往某个前端路径（如 /api），然后在 Nginx 中配置反向代理，将 /api 请求转发到后台服务（如 Node.js、Express、Go、Python 等）

前后端分离时，可以在 Nginx 中为 React 静态文件和 API 请求分别配置不同的 location

若后台服务运行在内网端口（如 3000），Nginx 转发到 http://127.0.0.1:3000

在构建 React 应用时，注意 API 地址的环境切换（开发环境 / 生产环境）

示例 Nginx 配置：

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/myapp;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这样，访问 https://your-domain.com/api/users 会被转发到后台服务，而访问 https://your-domain.com/about 等页面则被 React 前端处理。

后台服务与进程管理

如果你的 React 应用中还包含服务器端渲染 (SSR) 或有一个 Node.js 后端在同一台机器上运行，你需要使用进程管理工具保持后台服务长期运行、自动重启、日志管理等。

常见工具：

  • PM2：Node.js 应用常用进程管理工具
  • systemd：Linux 原生服务管理，用于把服务作为系统服务启动
  • Forever、Nodemon（开发环境用）

以 PM2 为例：

npm install -g pm2
# 启动后台服务，例如 API 服务
pm2 start server.js --name myapi
# 启动 React SSR 服务（如果有的话）
pm2 start ssr.js --name myapp-ssr
# 查看状态
pm2 list
# 设置开机自启动
pm2 startup
pm2 save

若只是前端静态资产（无 SSR 或 Node 服务），则不需要对 React 部分用 PM2；只需让 Nginx 或 Apache 提供静态服务即可。

自动化部署 / CI-CD

手动上传构建产物适合小型项目或首次部署，但对于持续迭代的前端项目，更推荐采用自动化部署流程。核心思路：

  • 代码推送到 Git 仓库（如 GitHub、GitLab、Bitbucket）
  • 在 CI 中定义构建脚本（例如 npm run build）
  • 构建完成后，将构建产物通过 SSH、rsync、FTP 或者使用一些部署工具（如 Ansible、Capistrano、GitHub Actions、GitLab CI/CD）发送到服务器
  • 在服务器端，自动执行 Nginx 重载、缓存清理、版本回滚等操作
  • 这种方式可以让你每次提交代码后自动部署，减少人工错误与运维负担。

性能优化与缓存策略

在生产环境中，要尽量让 React 网站运行得更快、更稳定。以下是一些常见优化策略：

  • 开启 gzip / brotli 压缩：在 Nginx 中启用压缩响应，减小静态资源体积
  • 缓存头设置：对静态资源设置较长的 Cache-Control、ETag、Last-Modified 等
  • 资源指纹 / 哈希包名：构建产物文件名带哈希值（如 main.abcdef.js），用户旧资源不被重复缓存
  • CDN 加速：对于静态资源，可以用 CDN 分发，提高全球访问速度
  • 懒加载 / 代码拆分 (code splitting)：减少首屏加载资源，按需加载
  • 图片 / 静态资源压缩 / 优化：对图片、SVG、字体文件做压缩和优化处理
  • 开启 HTTP/2 或 HTTP/3（如果支持）：多个并行请求性能更好

监控、日志与安全

为了确保服务平稳运行，还应考虑以下运维层面的内容：

  • 访问日志与错误日志：配置 Nginx 或 Apache 的日志，结合 ELK、Prometheus、Grafana 等工具做监控
  • 异常监控：对于 React 前端错误，可以接入 Sentry 或类似的前端错误捕获平台
  • SSL 证书监控与自动续期
  • 强制 HTTPS、HSTS：在 HTTP 响应头强制启用 HSTS，避免中间人攻击
  • 防火墙策略：使用 UFW / iptables / firewalld 限制不必要的端口访问
  • 定期备份：代码、配置、证书、日志等要有备份策略
  • 升级与安全补丁：定期更新系统、Web 服务器、依赖包

在 Linux 上部署 React 网站虽然涉及多个环节（构建、传输、服务器配置、HTTPS、反向代理、自动化、运维等），但每一步都是相对清晰的流程。掌握这个流程后，你就可以将 React 项目稳定地部署上线，并具备在生产环境中运行与维护的能力。

评论 添加
暂无评论，来聊两句？
概要
猜你喜欢