---
title: 'Springboot 打包 Angular'
tags: Angular
description: Springboot 打包 Angular
---

# Springboot 打包 Angular

以下會用到的軟體與網站
- JDK 8
- Maven
- Nodejs
- Npm
- ng
- STS

---

[TOC]

---

## 建立Maven Project
我們用mvn來建立測試專案。

mvn archetype:generate -DgroupId=com.test -DartifactId=test -DarchetypeArtifactId=maven-archetype-quickstart -Dversion=1.0.0 -DinteractiveMode=false


專案建立好後，請用STS import此專案。


檢查一下專案是否是UTF-8，還有Java Compiler改為1.8。






---
## 建立Angular 專案

我們這邊就不教學安裝Nodejs、Angular、Npm的過程，直接下指令新增專案

cd test/src/main/
ng new testangular




---
## 專案的設定
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">

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.2.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<packaging>war</packaging>
	<modelVersion>4.0.0</modelVersion>

	<artifactId>test</artifactId>
	<version>0.1</version>
	<name>SpringBoot-Angular</name>

	<properties>
		<system.java.version>1.8</system.java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<exclusions>
	            <exclusion>
	                <groupId>org.apache.tomcat.embed</groupId>
	                <artifactId>tomcat-embed-websocket</artifactId>
	            </exclusion>
	            <exclusion>
                    <groupId>org.slf4j</groupId>
                    <artifactId>slf4j-log4j12</artifactId>
                </exclusion>
                <exclusion>
                     <groupId>ch.qos.logback</groupId>
                    <artifactId>logback-classic</artifactId>
                 </exclusion>
	        </exclusions>

		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<fork>true</fork>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>${system.java.version}</source>
					<target>${system.java.version}</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>com.github.eirslett</groupId>
				<artifactId>frontend-maven-plugin</artifactId>
				<version>1.12.0</version>
				<configuration>
					<workingDirectory>src/main/testangular</workingDirectory>
					<nodeVersion>v16.15.1</nodeVersion>
					<npmVersion>6.14.12</npmVersion>
					<installDirectory>target</installDirectory>
				</configuration>
				<executions>
					<execution>
						<id>install node and npm</id>
						<goals>
							<goal>install-node-and-npm</goal>
						</goals>
						<phase>generate-resources</phase>
					</execution>
					<execution>
						<id>npm install</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<configuration>
							<arguments>install</arguments>
							<installDirectory>target</installDirectory>
						</configuration>
					</execution>
					<execution>
						<id>angular cli build</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<phase>generate-resources</phase>
						<configuration>
							<arguments>run ${env.var}</arguments>
						</configuration>
					</execution>
				</executions>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>3.2.2</version>
				<configuration>
					<failOnMissingWebXml>false</failOnMissingWebXml>
					<!-- Add frontend folder to war package -->
					<!-- <webResources>
						<resource>
							<directory>src/main/me-front/dist/bli-angular</directory>
							<includes>
								<include>jboss-deployment-structure.xml</include>
							</includes>
						</resource>
						
					</webResources>-->
					<webResources>
						<resource>
							<directory>src/main/testangular/dist/testangular</directory>
						</resource>
					</webResources>
				</configuration>
			</plugin>

		</plugins>
	</build>
</project>

package.json修改。

.....
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "local": "ng build --base-href /test/ --deploy-url /test/"
  }
.....

這時請 Maven update，後在com.test裡面新增一支Application.java

package com.test;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication

public class Application extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
    
    @Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
		return application.sources(Application.class);
	}

}

---

## 將war丟到Tomcat
test-0.1.war 改為 test.war
在丟到 tomcat/webapps裡面
將 tomcat start 即可



---
## 支援Jboss

在src/main/webapp/WEB-INF/，新增jboss-web.xml
內容為如下：

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
        <context-root>/test</context-root>
</jboss-web>

再包成war丟到Jboss即可

---

參考鏈結：https://github.com/EdurtIO/programming-learn-integration/blob/master/springboot/springboot-angular/DOC.md