在 Tomcat 服务器上部署 React 应用

1. 概述

将 React 应用部署到生产环境时，一个常见需求是高效且安全地提供静态资源。Apache Tomcat 是一个广泛使用的 Java Web 服务器，凭借其灵活的配置和高稳定性，是托管 React 应用的理想选择。

本文将详细介绍如何在 Tomcat 服务器上构建并部署一个 React 应用。内容包括创建 React 项目、添加路由功能、构建生产环境资源、安装配置 Tomcat，并最终完成部署。

我们所有的操作和命令均在 Kali Linux 上测试通过，除非特别说明，也适用于大多数 Linux 环境。

2. 创建一个简单的 React 应用

为了演示部署流程，我们先创建一个简单的 React 应用，并添加路由功能以模拟真实场景。

2.1 创建 React 项目

我们使用 create-react-app 快速生成一个 React 项目：

$ npx create-react-app my-sample-app

该命令会创建一个名为 my-sample-app 的目录，包含所有必要的 React 项目结构和依赖。

2.2 安装路由支持（React Router）

进入项目目录并安装 react-router-dom：

$ cd my-sample-app
$ npm install react-router-dom

该库用于实现前端路由功能。

2.3 修改 App.js 添加路由逻辑

我们替换 src/App.js 文件内容，加入两个页面和导航链接：

import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

const Home = () => <h2>Welcome to My Sample React App!</h2>;
const About = () => <h2>About This App</h2>;

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </nav>
                <Routes>
                    <Route path="/about" element={<About />} />
                    <Route path="/" element={<Home />} />
                </Routes>
            </div>
        </Router>
    );
}

export default App;

该代码实现了 / 和 /about 两个页面的路由跳转。

2.4 设置 homepage 路径

为了确保构建后的资源路径正确，我们在 package.json 中设置 homepage：

{
  ...
  "homepage": "http://localhost:8080/simpleapp"
}

该配置确保构建后的资源路径前缀正确，适用于 Tomcat 的部署路径。

2.5 构建 React 应用

执行以下命令生成生产环境资源：

$ npm run build

构建完成后，静态资源会生成在 build/ 目录下，包括 index.html、JS 和 CSS 文件等。

3. 安装与配置 Apache Tomcat 服务器

接下来我们安装并配置 Apache Tomcat，为部署 React 应用做准备。

3.1 下载并解压 Tomcat

从官网下载 Tomcat 11：

$ wget https://downloads.apache.org/tomcat/tomcat-11/v11.0.1/bin/apache-tomcat-11.0.1.tar.gz

解压：

$ tar -xvzf apache-tomcat-11.0.1.tar.gz

3.2 创建专用 Tomcat 用户

为安全起见，我们创建一个专用用户运行 Tomcat：

$ sudo useradd -r -m -U -d /opt/tomcat -s /bin/false tomcat

参数说明：

-r：系统账户
-m：创建用户目录
-U：创建同名组
-d：指定家目录
-s /bin/false：禁止登录

接下来将 Tomcat 文件移动到 /opt/tomcat 并设置权限：

$ sudo mv apache-tomcat-11.0.1 /opt/tomcat
$ sudo ln -s /opt/tomcat/apache-tomcat-11.0.1 /opt/tomcat/updated
$ sudo chown -R tomcat: /opt/tomcat/*
$ sudo sh -c 'chmod +x /opt/tomcat/updated/bin/*.sh'

3.3 配置 Tomcat 为系统服务

创建 systemd 服务文件：

$ sudo nano /etc/systemd/system/tomcat.service

填入以下内容：

[Unit]
Description=Apache Tomcat Web Application Container
After=network.target

[Service]
Type=forking
Environment="JAVA_HOME=/usr/lib/jvm/java-1.17.0-openjdk-amd64"
Environment="CATALINA_PID=/opt/tomcat/updated/temp/tomcat.pid"
Environment="CATALINA_HOME=/opt/tomcat/updated/"
Environment="CATALINA_BASE=/opt/tomcat/updated/"
Environment="CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC"
Environment="JAVA_OPTS=-Djava.awt.headless=true -Djava.security.egd=file:/dev/./urandom"

ExecStart=/opt/tomcat/updated/bin/startup.sh
ExecStop=/opt/tomcat/updated/bin/shutdown.sh

User=tomcat
Group=tomcat
UMask=0007
RestartSec=10
Restart=always

[Install]
WantedBy=multi-user.target

保存后，加载服务并启动 Tomcat：

$ sudo systemctl daemon-reload
$ sudo systemctl start tomcat
$ sudo systemctl enable tomcat

检查状态：

$ sudo systemctl status tomcat

确认输出中显示 active (running) 即表示 Tomcat 已成功运行。

4. 部署 React 应用到 Tomcat

现在我们将构建好的 React 项目部署到 Tomcat 上。

4.1 复制 build 文件夹到 webapps

将 React 的 build/ 目录复制到 Tomcat 的 webapps/ 目录，并重命名为 simpleapp：

$ sudo cp -r /home/kali/my-sample-app/build /opt/tomcat/updated/webapps/simpleapp

⚠️ 注意：simpleapp 是你在 package.json 中定义的 homepage 路径的一部分，确保名称一致。

4.2 验证部署

在浏览器中访问：

http://<your-ip>:8080/simpleapp

✅ 页面显示如下图，表示部署成功：

Successful Deployment of React Application

5. 小结

本文我们完整演示了如何将一个带有路由功能的 React 应用部署到 Apache Tomcat 服务器上。从项目创建、构建、到 Tomcat 的安装与配置，整个过程清晰且易于复现。

Tomcat 作为传统 Java Web 容器，在托管现代前端应用方面依然具备良好的兼容性与稳定性。对于需要前后端分离部署、同时又希望复用已有 Java 基础设施的团队来说，这种部署方式是一个非常实用的选择。

完整项目代码及配置可参考：GitHub 仓库地址

Persistence

REST

Security