在Tomcat上部署Spring Boot应用程序时如何打开角度网页？

Posted

技术标签:

【中文标题】在Tomcat上部署Spring Boot应用程序时如何打开角度网页？【英文标题】：How to open angular web page when deploying a Spring Boot application on Tomcat? 【发布时间】：2018-06-23 21:13:44 【问题描述】：

我有一个 Spring Boot + Angular 2 应用程序，我想将其打包为 war 并部署在 Tomcat 上。

我能够成功集成所有内容，但是当我尝试点击 localhost url 时，我得到了 404。

当我独立构建 Angular 和 Spring Boot 并将应用程序作为 Spring Boot 主类运行时，我能够看到 index.html 内容。不确定要进一步配置什么。

这是应用程序文件夹结构：

这里是pom.xml：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.roger.mylab</groupId>
<artifactId>MyPortal</artifactId>
<packaging>war</packaging>
<version>0.1</version>

<name>MyPortal Maven Webapp</name>
<url>http://maven.apache.org</url>

<properties>
    <spring-cloud-aws-version>1.2.1.RELEASE</spring-cloud-aws-version>
    <log4j.version>1.2.17</log4j.version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <angular.project.location>src/frontend</angular.project.location>
        <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.2.RELEASE</version>
</parent>

<dependencies>

    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-asl</artifactId>
        <version>1.9.13</version>
    </dependency>


    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <!-- marked the embedded servlet container as provided -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-aws-context</artifactId>
        <version>$spring-cloud-aws-version</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-aws-jdbc</artifactId>
        <version>$spring-cloud-aws-version</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.1</version>
    </dependency>
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
    </dependency>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <scope>test</scope>
    </dependency>

    <!-- JSP settings -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

</dependencies>
<build>
    <finalName>myportal</finalName>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <artifactId>maven-failsafe-plugin</artifactId>
            <executions>
                <execution>
                    <goals>
                        <goal>integration-test</goal>
                        <goal>verify</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.0</version>
            <configuration>
                <workingDirectory>$angular.project.location</workingDirectory>
                <installDirectory>$angular.project.nodeinstallation</installDirectory>
            </configuration>
            <executions>
                <!-- It will install nodejs and npm -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v9.2.0</nodeVersion>
                        <npmVersion>5.6.0</npmVersion>
                    </configuration>
                </execution>

                <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                    to clean and create "/dist" directory -->
                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>

        <!-- Plugin to copy the content of /angular/dist/ directory to output 
        directory (ie/ /target/) -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>default-copy-resources</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <overwrite>true</overwrite>
                        <outputDirectory>$project.basedir/src/main/resources/static/</outputDirectory>
                        <resources>
                            <resource>
                                <directory>$project.basedir/$angular.project.location/dist</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        
    </plugins>
</build>

最后，.angular-cli.json的内容：

   
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": 
    "name": "frontend"
  ,
  "apps": [
    
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/videogular2/fonts/videogular.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": 
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      
    
  ],
  "e2e": 
    "protractor": 
      "config": "./protractor.conf.js"
    
  ,
  "lint": [
    
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    ,
    
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    ,
    
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    
  ],
  "test": 
    "karma": 
      "config": "./karma.conf.js"
    
  ,
  "defaults": 
    "styleExt": "css",
    "component":

添加proxy.conf.json:


"/myportalapi" :
"target" : "http://localhost:8080",
"secure" : false

application.properties中提到的应用的上下文路径是/myportal

我想将http://localhost:8080/myportal/ 映射为打开index.html。当前抛出 404。

【问题讨论】：

能否提供proxy.conf.json？ 您在运行应用程序之前是否调用了 Maven？我没有看到node_modules 文件夹，也没有看到dist 文件夹，也没有在您的屏幕截图中看到src/main/resources/static 文件夹，所以我不确定Maven 前端插件是否已执行。 @g00glen00b: Maven执行成功，resources里面有一个静态文件夹。 已更新为proxy.conf.json。 【参考方案1】：

在您的package.json 文件中修改build 脚本为：

ng build --prod --base-href /myportal/

【讨论】：

以上是关于在Tomcat上部署Spring Boot应用程序时如何打开角度网页？的主要内容，如果未能解决你的问题，请参考以下文章

在Tomcat上部署Spring Boot应用程序时如何打开角度网页？

在 tomcat 9 上部署 Spring Boot Web 应用程序时，出现错误“无法检索系统属性'spring.xml.ignore'”

在tomcat 8上部署战争时未加载Spring Boot应用程序

如何把kotlin+spring boot开发的项目部署在tomcat上

在tomcat上部署多个Spring Boot应用程序时如何指定logging.config

在不同端口的同一个 tomcat 上部署 Angular 5 和 Spring Boot 应用程序