基于Angular2与Spring Boot构建Tomcat可部署WAR包技术问询

我来一步步帮你搞定把Angular 2和Spring Boot打包成WAR部署到Tomcat的事儿～

首先得把你的MyNewApp编译成浏览器能直接加载的静态文件，这样才能和Spring Boot项目整合：

• 打开终端进入Angular项目根目录，执行生产环境构建命令：

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

  这里--prod会帮你做代码压缩、优化，--base-href="/"是设置应用的基础路径，如果你的Tomcat部署后不是ROOT应用，就改成对应路径（比如/MyNewApp/）。
• 构建完成后，产物会在dist/MyNewApp目录下（不同Angular版本可能直接在dist目录），把里面所有文件复制到Spring Boot项目MyNewAppROOT的src/main/resources/static目录下——如果没有static文件夹，直接新建一个就行。

Spring Boot默认打Jar包，要改成WAR得做两处调整：

修改依赖配置（以Maven为例，Gradle思路类似） #

打开pom.xml：

• 把<packaging>标签的值改成war：

  <packaging>war</packaging>
  

• 添加Tomcat依赖并设为provided，避免和外部Tomcat的容器冲突：

  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-tomcat</artifactId>
      <scope>provided</scope>
  </dependency>
  

修改启动类 #

让你的Spring Boot主启动类继承SpringBootServletInitializer，并重写configure方法，这样才能适配外部Tomcat的Servlet环境：

@SpringBootApplication
public class MyNewAppRootApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(MyNewAppRootApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(MyNewAppRootApplication.class, args);
    }
}

你已经写了ProxyController处理/api/**的请求，这里再提两个注意点：

• 确保ProxyService.exchange方法能正确转发请求、传递请求头/体，还有响应的编码（你已经加了produces = "application/json;charset=UTF-8"，这点很到位）。
• Angular里的API请求要统一指向/api/xxx路径，这样才会被这个代理控制器捕获转发。

• 如果用Maven，在Spring Boot项目根目录执行：

  mvn clean package -DskipTests
  

  -DskipTests是跳过测试环节加快打包，完成后WAR包会在target目录下，名字一般是MyNewAppROOT.war（可通过pom里的finalName自定义）。
• 如果用Gradle，执行：

  gradle clean bootWar -x test
  

  产物在build/libs目录下。

• 把生成的WAR包复制到Tomcat的webapps目录下。
• 如果想让应用作为Tomcat的ROOT应用（访问路径是http://localhost:8080/），直接把WAR包重命名为ROOT.war就行。
• 启动Tomcat，它会自动解压并部署这个WAR包。
• 测试：打开浏览器访问对应路径，能看到Angular界面，发起API请求时会通过你的代理控制器转发到后端。

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