Часто бывает полезно иметь развернутую версию вашего приложения, доступную для предоставления заинтересованным людям с самого начала.
Я часто использую для этого 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