Часто бывает полезно иметь развернутую версию вашего приложения, доступную для предоставления заинтересованным людям с самого начала.

Я часто использую для этого Heroku. С Heroku и Spring Boot, чтобы развернуть приложение, вы можете просто отправить код в репозиторий Heroku git.

Используя Maven в качестве агента сборки, мы можем создать производственное приложение Angular как часть этого конвейера развертывания.

Давайте посмотрим, как это можно сделать.

Инициализировать приложение Spring Boot

Перейдите на https://start.spring.io и выберите проект Maven, созданный на Java.

Создайте проект и извлеките загруженный zip-файл.

Это дает нам базовую отправную точку. Поэтому мы добавим контроллер с конечной точкой, которая позже будет снабжать наше приложение Angular данными.

Добавьте стартовый веб-сайт весенней загрузки в pom.xml:

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 <version>2.1.6.RELEASE</version>
 <scope>compile</scope>
</dependency>

Добавьте контроллер в приложение весенней загрузки:

package example.app.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {

 @GetMapping("api/hello")
 public String getHello() {
   return "{ response: \"hello\" }";
 }
}

Теперь, когда мы запускаем приложение

mvn spring-boot:run

и перейдя по адресу http: // localhost: 8080 / hello, мы видим:

Прежде чем продолжить, давайте инициализируем репозиторий git:

git init

Отлично, мы готовы добавить интерфейс.

Инициализировать приложение Angular

Создайте ng dictory в src / main:

cd src/main
mkdir ng

Используя Angular CLI, создайте новое приложение Angular.

cd ng
ng new demo

Добавьте вызов к конечной точке приветствия на сервере:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 HttpClientModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'demo';

 private response: Observable<object>;

 constructor(private http: HttpClient) {}


 ngOnInit(): void {
 this.response = this.http.get('/api/hello');
 }
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
 <h1>
 <span>{{response | async | json}}</span> Welcome to {{ title }}!
 </h1></div>

...

Когда мы запускаем клиента…

ng serve

При доступе к странице мы видим следующую ошибку:

Angular пытается вызвать конечную точку приветствия относительно своего собственного сервера через порт 4200. Он работает на 8080! Это единственная проблема при запуске приложения Angular в режиме разработки на собственном сервере, отдельном от сервера Spring Boot.

Мы можем исправить это, настроив сервер разработки Angular на прокси-вызовы с http: // localhost: 4200 / api на http: // localhost: 8080 / api

angular.json

...
 "serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "demo:build",
 "proxyConfig": "proxy.conf.json"
 },
...

src / mian / ng / demo / proxy.conf.json

{
 "/api": {
 "target": "http://localhost:8080",
 "secure": false
 }
}

Повторно запустите приложение Angular, и мы запустили наш базовый проект:

Создайте приложение Angular с помощью Maven

Теперь, когда у нас есть настроенное приложение, нам нужно использовать maven для создания производственного приложения Angular. Для этого воспользуемся плагином maven front-end.

Добавьте плагин в pom.xml

<plugins>
...
 <plugin>
 <groupid>com.github.eirslett</groupid>
 <artifactid>frontend-maven-plugin</artifactid>
 <version>1.6</version>
 <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>
 </configuration>
 </execution>
 <execution>
 <id>build web-app</id>
 <phase>generate-resources</phase>
 <goals>
 <goal>npm</goal>
 </goals>
 <configuration>
 <arguments>run-script build</arguments>
 </configuration>
 </execution>
 </executions>
 <configuration>
 <nodeversion>v11.6.0</nodeversion>
 <npmversion>6.5.0</npmversion>
 <workingdirectory>src/main/ng/demo</workingdirectory>
 </configuration>
 </plugin>
...
</plugins>

Установить путь вывода в angular.json

Мы устанавливаем выходной путь сборки как папку src / main / resources. Это означает, что каталог будет связан со встроенным Spring Boot jar и будет доступен в качестве ресурсов, когда мы сделаем запрос GET в корне приложения.

...
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 "outputPath": "../../resources/static",
...

Наконец, обновите .gitignore

Нам нужно добавить две записи в .gitignore. Мы не хотим передавать созданные ресурсы Angular в git.

Внешний модуль maven динамически загружает узел, поэтому мы также не хотим добавлять эти ресурсы в git.

...
src/main/resources/static
src/main/ng/demo/node
...

Теперь мы можем создать как серверную часть, так и интерфейсную часть, используя:

mvn clean install

И запустите его, используя

mvn spring-boot:run

После запуска и запуска мы можем увидеть все наше приложение, перейдя по адресу http: // localhost: 8080. Ура!

Настройка Heroku

Теперь у нас есть сборка приложения, готовая к развертыванию. Heroku поддерживает сборку проектов Java с помощью maven, и вы можете развертывать приложения, просто отправляя изменения в репозиторий git.

Вы можете зарегистрироваться и запускать приложения бесплатно. Перейдите на https://www.heroku.com/ и зарегистрируйте свою учетную запись.

Вам также необходимо скачать Инструментальный пояс Heroku.

Когда вы окажетесь на панели инструментов Heroku, нажмите «New -› Create new app »и введите данные, аналогичные данным на скриншоте ниже:

Развертывать!

У нас есть приложение и приложение Heroku. Нам просто нужно его развернуть.

Для этого мы зафиксируем текущий набор изменений в нашем репозитории git.

git add .
git commit -m "Initial demo project"

Для развертывания мы следуем инструкциям на вкладке развертывания приложений Heroku и добавляем репозиторий приложений Heroku в качестве удаленного:

heroku git:remote -a angular-spring-demo

И проталкиваем к нему репо:

git push heroku master

Готово!

После того, как Heroku запустит развертывание, вы должны увидеть следующий результат:

remote: -----> Launching...
remote: Released v3
remote: https://angular-spring-demo.herokuapp.com/ deployed to Heroku

Не стесняйтесь проверить работающее приложение на https://angular-spring-demo.herokuapp.com/

И полный исходный код на https://github.com/mattgerrard/angular-spring-demo