將Angular + Spring Boot部署到Tomcat

Question

可能是我做錯了，但是…

1. 我在本地計算機上的Angular中做了一個簡單的項目

2. 我用以下代碼創建了一個文件proxy.conf.json：

   “ / inj”：{“目標”：“ http：// localhost：8080 ”，“安全”：假}

3. 我將我的proxy.json更改為：

   “腳本”：{“ ng”：“ ng”，“ start”：“ ng serve –proxy-config proxy.conf.json”，“ build”：“ ng build”，

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. 好的，當mvn clean insert時，我將packege.json添加到dist
11. 我部署它並再次運行npm install。 沒關系…。
12. 但是–仍然是404錯誤。 索引html找不到js文件

我做錯了什么？

PS：我的目錄結構：

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

PS2：我的war文件-是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/",

因此，這就是我的構建如何將tomcat部署為app.war 。