如何在Tomcat中部署Angular应用至独立文件夹并映射到域名根路径

1. 打包并部署Angular应用到webapps/myapp #

• 本地打包Angular项目时，指定base-href为根路径，确保资源加载路径正确：

  ng build --prod --base-href="/"
  

• 将打包生成的dist/[项目名]下的所有文件，复制到Tomcat安装目录的webapps/myapp文件夹（若myapp不存在，手动创建即可）。

2. 配置Tomcat映射根路径到myapp应用 #

提供两种常用配置方案，推荐第二种更灵活的方式：

方案一：修改server.xml（全局配置） #

• 打开Tomcat的conf/server.xml文件，找到<Host>标签（默认内容为<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">）。
• 在该标签内部添加如下<Context>配置：

  <Context path="" docBase="myapp" reloadable="false" />
  

  • path=""：指定根路径映射
  • docBase="myapp"：指向webapps下的独立应用目录
  • reloadable="false"：生产环境建议关闭自动重载以提升性能，开发环境可设为true
• 保存文件后重启Tomcat服务。

方案二：使用独立Context配置文件（推荐） #

• 进入Tomcat的conf/Catalina/localhost目录，新建名为ROOT.xml的文件（文件名必须为大写ROOT）。
• 在文件中写入以下内容：

  <Context docBase="myapp" />
  

  Tomcat会自动将ROOT.xml对应到根路径，docBase指定实际应用所在的webapps/myapp目录。
• 保存文件，重启Tomcat（若开启自动部署，可能无需重启即可生效）。

3. 处理Angular路由的HTML5模式（可选） #

如果你的Angular应用使用了路由且开启了HTML5模式（默认的PathLocationStrategy），刷新路由页面会出现404错误，需配置Tomcat转发404请求到index.html：

• 在webapps/myapp/WEB-INF目录下新建web.xml文件（若不存在该目录则手动创建），写入：

  <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                               http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
           version="4.0">
      <error-page>
          <error-code>404</error-code>
          <location>/index.html</location>
      </error-page>
  </web-app>
  

4. 验证配置 #

启动Tomcat后，访问你的域名（如www.example.com），应该直接加载myapp应用的内容，无需添加/myapp子路径。若出现异常，可查看Tomcat日志（logs/catalina.out或localhost.log）排查问题。

内容的提问来源于stack exchange，提问作者Juliyanage Silva