如何在Apache Tomcat 9部署Angular 17与json-server模拟API

为什么package.json脚本不生效 #

Tomcat是Java EE容器，启动流程和Node.js的npm脚本完全独立，直接在Angular项目的package.json里配置启动json-server的脚本，Tomcat不会主动执行这些Node.js命令，因此无法实现随Tomcat启动自动运行。

可行解决方案 #

方案1：使用系统启动脚本（Windows批处理/Linux Shell） #

编写统一脚本，先启动json-server，再启动Tomcat，实现一键启动两者。

Windows 批处理示例（start-services.bat）

@echo off
:: 切换到Angular项目目录，启动json-server（假设db.json在项目根目录，端口3000）
cd /d "D:\path\to\your\angular-project"
start "JSON Server" cmd /k "npx json-server --watch db.json --port 3000"

:: 切换到Tomcat bin目录，启动Tomcat
cd /d "D:\path\to\apache-tomcat-9.x\bin"
start "Tomcat" startup.bat

Linux Shell脚本示例（start-services.sh）

#!/bin/bash
# 启动json-server，后台运行并记录日志
cd /path/to/your/angular-project
nohup npx json-server --watch db.json --port 3000 > json-server.log 2>&1 &

# 启动Tomcat
cd /path/to/apache-tomcat-9.x/bin
./startup.sh

• 给Shell脚本添加执行权限：chmod +x start-services.sh
• 运行脚本：./start-services.sh

方案2：配置Tomcat启动前触发Node.js命令 #

通过Tomcat的setenv脚本，在Tomcat启动前自动启动json-server。

Windows（在Tomcat的bin目录下创建setenv.bat）

@echo off
:: 后台启动json-server并记录日志
cd /d "D:\path\to\your\angular-project"
start /B cmd /c "npx json-server --watch db.json --port 3000 > json-server.log 2>&1"

Linux（在Tomcat的bin目录下创建setenv.sh）

#!/bin/bash
# 后台启动json-server并记录日志
cd /path/to/your/angular-project
nohup npx json-server --watch db.json --port 3000 > json-server.log 2>&1 &

Tomcat启动时会自动加载setenv脚本，实现每次启动Tomcat都同步启动json-server。

方案3：使用PM2管理Node.js进程（推荐长期运行场景） #

PM2是Node.js进程管理器，可保证json-server持续运行，还能设置开机自启，配合Tomcat的开机自启实现联动。

1. 安装PM2：npm install pm2 -g
2. 在Angular项目目录下配置并启动json-server：

cd /path/to/your/angular-project
pm2 start "npx json-server --watch db.json --port 3000" --name json-server
pm2 save  # 保存当前进程列表
pm2 startup  # 设置开机自启

3. 配置Tomcat开机自启（根据操作系统设置，如Windows服务、Linux systemd）

Angular 17应用部署到Tomcat的注意事项 #

1. 构建生产包：运行ng build --configuration production，生成的文件在dist/[your-project-name]/browser目录下
2. 部署文件：将browser目录下的所有文件复制到Tomcat的webapps/ROOT目录（或创建子目录单独部署）
3. 跨域问题处理：
   • 开发环境：在项目根目录创建proxy.conf.json，启动开发服务器时带代理参数：

     {
       "/api/*": {
         "target": "http://localhost:3000",
         "secure": false,
         "changeOrigin": true
       }
     }
     

     启动命令：ng serve --proxy-config proxy.conf.json
   • 生产环境：在Tomcat的webapps/ROOT/WEB-INF/web.xml中添加跨域过滤器：

     <filter>
         <filter-name>CorsFilter</filter-name>
         <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
         <init-param>
             <param-name>cors.allowed.origins</param-name>
             <param-value>*</param-value>
         </init-param>
         <init-param>
             <param-name>cors.allowed.methods</param-name>
             <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
         </init-param>
     </filter>
     <filter-mapping>
         <filter-name>CorsFilter</filter-name>
         <url-pattern>/*</url-pattern>
     </filter-mapping>
     

内容的提问来源于stack exchange，提问作者Rettagunta Deepak