将 Angular + Spring Boot 部署到 Tomcat

Question

可能是我做错了什么，但是……

1. 我在本地机器上用 Angular 做了一个简单的项目

2. 我已经用代码创建了一个文件 proxy.conf.json：

   “/inj”：{ “目标”：“http://localhost:8080”， “安全”：错误 }

3. 我已将我的 proxy.json 更改为：

   “脚本”：{ “ng”：“ng”， “开始”：“ng服务--proxy-config proxy.conf.json”， “构建”：“ng 构建”，

4. 我已经运行了 ng build –base-href /inj/ –prod

5. 我将 maven 框架和 SpringBoot 添加到我的项目中
6. 我插入了 Maven 插件以将文件从 Dist 复制到 Webapps，但我没有插入用于构建和运行的插件。
7. mvn 清洁插入
8. 我将它部署在远程 tomcat 上，但出现 404 错误。
9. 好的，我在远程机器上运行了 npm install，但出现了没有 package.json 的错误。
10. 好的，我在dist中添加了packege.json，当mvn clean insert时
11. 我部署它并再次运行 npm install。没关系……
12. 但是 - 它仍然是 404 错误。 index html 找不到 js 文件

我做错了什么？？？？

PS：我的目录结构：

injapp
|
-[angular]
|     |
|     ----[dist]
|     ----[e2e]
|     ----[node_modules]
|     ----[src]
|     ----package.json
|     ----etc
-[src]
|    |
|    -[main]
|       -[java]
|       -[webaps]
|          ---- web.xml

PS2：我的战争文件 - 是 inj.war PS3：我的 web.xml 是

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

我的 pom.xml 的一部分：

我的 pom.xml 了解更多信息：

<build>

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <version>2.4.2</version>
        <executions>
            <execution>
                <id>default-copy-resources</id>
                <phase>process-resources</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <configuration>
                    <overwrite>true</overwrite>
                    <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
                    <resources>
                        <resource>
                            <directory>${project.basedir}/angular/dist</directory>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>
</plugins>

Answer 1

在您的pom.xml 文件中，在<configuration> 属性内，为来自pom.xml 的前端依赖路径提供您的工作目录。例如：

<workingDirectory>../angular/</workingDirectory>

因为npm 应该看到package.json 文件。

我的<plugin> 为pom.xml 配置：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>

    <configuration>
      <nodeVersion>v8.9.4</nodeVersion>
      <npmVersion>5.6.0</npmVersion>
      <workingDirectory>src/main/frontend</workingDirectory>
    </configuration>

    <executions>
      <execution>
        <id>install node and npm</id>
        <goals>
          <goal>install-node-and-npm</goal>
        </goals>
      </execution>

      <execution>
        <id>npm install</id>
        <goals>
          <goal>npm</goal>
        </goals>
      </execution>

      <execution>
        <id>npm run build</id>
        <goals>
          <goal>npm</goal>
        </goals>

        <configuration>
          <arguments>run build</arguments>
        </configuration>
      </execution>
    </executions>
</plugin>

并修改.angular-cli.json文件提供输出目录：

"outDir": "../resources/static",

同样在package.json 修改build 脚本以提供href 选项为：

"build": "ng build --prod --base-href /app/",

所以，这就是我的构建作为 app.war 部署 tomcat 的工作方式。