Spring Bootを用いたAzure Webアプリ作成(導入)

フレームワークとしてSpring Bootを使用したWebアプリケーションをMicrosoft Azure上で動作させる方法を調べました。

この記事を執筆している環境は以下の通りです。

  • Microsoft Windows 8.1 Pro
  • Java SE 8 (version 1.8.0_92)
  • Spring Boot 1.5.3.RELEASE
  • Spring Tool Suite(STS) 3.8.4.RELEASE

Spring Tools Suite(STS)のインストール

STSのダウンロード

下記のサイトからEclipseベースのIDEであるSpring Tool Suite(STS)をダウンロードします。

STSのインストール

ダウンロードしたZIPファイルを適当なディレクトリに展開します。
ディレクトリ階層が深い場合やディレクトリ名にスペースが含まれる場合は展開に失敗することがあります。

展開したディレクトリのsts-3.8.4.RELEASEにあるSTS.exeを実行します。
初回起動時にworkspaceのパスを入力します。

STSによる簡単なWebアプリの作成

Spring Starter Projectの作成

Spring Tool SuiteFileメニューからNewSpring Starter ProjectをクリックしてSpring Bootプロジェクトを作成します。

01_SBプロジェクト

次の項目を入力してNextボタンをクリックします。

  • Name ExHelloWebApp
  • Group com.sios.example.springboot
  • Artifact ExHelloWebApp
  • Package com.sios.example.springboot

01-01_新規プロジェクト

WebをチェックしてFinishボタンをクリックします。
Webは上部のチェックボックスでもしたのリストを展開したところにあるチェックボックスのどちらでも同じです。

01-02_新規プロジェクト

これで新しいSpring Bootを用いたWebアプリのプロジェクトが生成されます。

pom.xmlの修正

pom.xmlを次のように修正します。

  • pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.sios.example.springboot</groupId>
	<artifactId>ExHelloWebApp</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<name>ExHelloWebApp</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
	</dependencies>

	<build>
		<finalName>ROOT</finalName>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>
  • 43~46行目:Thymeleafを追加します。
  • 50行目:fileNameを追加して生成するwarファイルの名称をROOTにします。(後でAzureにデプロイするため)

プロジェクトの初期化

pom.xmlを修正したらプロジェクトの初期化を行います。

Package Explorerでプロジェクトを右クリックしてMavenUpdate Projectをクリックします。

02-01_プロジェクト初期化

プロジェクトがチェックされているので確認してOKボタンをクリックします。

02-02_プロジェクト初期化

Project Updateを実行している間Spring Tool Suiteの右下にあるプログレスバーが進行状況を表示します。

Project Updateが終了したらPackage Explorerでプロジェクトを右クリックしてRun As9 Maven Installをクリックします。

02-03_プロジェクト初期化

コントローラーの追加

まずはコントローラーを追加します。
src/main/javaのパッケージcom.sios.example.springbootにクラスHelloWebAppControllerクラスを作成します。

  • com.sios.example.springboot.HelloWebAppController.java
package com.sios.example.springboot;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HelloWebAppController {

    @RequestMapping(value="/", method=RequestMethod.GET)
	public String helloWorld(Model model) {
		model.addAttribute("message", "こんにちは世界");
		return "index";
	}

}

テンプレートの追加

Thymeleafのテンプレートを追加します。
Thymeleafのテンプレートはsrc/main/resources/templates.htmlという拡張子で作成します。
注意が必要なのはSpring Tool SuiteでHTMLファイルを作成するとsrc/main/webappの下に作成されます。

ここではPackage Explorersrc/main/resourcesの下にあるtemplatesを右クリックします。
NewFileをクリックしてindex.htmlというファイルを作成します。

  • index.html
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>SpringBoot HelloWorld</title>
</head>
<body>
  <span th:text="${message}">Hello world</span>
</body>
</html>

Webアプリの実行

コントローラーとテンプレートを作成したらWebアプリを実行します。
Package Explorerでプロジェクトを右クリックしてRun AsSpring Boot Appをクリックします。

04-01_web実行

ブラウザでhttps://localhost:8080/にアクセスします。

04-02_web実行

こんにちは世界と表示されればWebアプリが動作しています。

Webアプリの停止

Consoleビューの右上にある赤いボタンをクリックしてWebアプリを停止させます。

04-03_web停止

AzureのWebアプリ作成

Microsoft Azure ダッシュボードから+ 新規Web + モバイルWeb AppをクリックしてWeb アプリを作成します。

05_01_Azure Webアプリ作成

次の項目を入力します。
入力値は参考です。

  • アプリ名 ExHelloWebApp
  • サブスクリプション 適当な値を選択します。
  • リソースグループ ExHelloWebApp
  • ダッシュボードにピン留めする 任意

作成ボタンをクリックします。
しばらく待つとWebアプリが生成されます。

05_02_Azure Webアプリ作成

Microsoft Azure ダッシュボードから作成したWeb Appを選択します。
URLにマウスカーソルを合わせると右の方にURLをコピーするボタンが表示されます。
このボタンをクリックしてURLをコピーします。

05_03_Azure Webアプリ作成

コピーしたURLをブラウザに入力して画面を表示します。
作成したWebアプリが動作していると下記の画面が表示されます。

05_04_Azure Webアプリ作成

Gitを使ったデプロイ

WebAppの設定

Microsoft Azure ダッシュボードから作成したWeb Appを選択します。

06-00_アプリ選択

デプロイ資格情報をクリックします。

06-01_デプロイ資格情報

次の項目を入力して保存ボタンをクリックします。

  • FTP/デプロイユーザー名 exhellouser
  • パスワード <任意のパスワード>
  • パスワードの確認 <パスワードを再度入力>

デプロイオプションをクリックします。

06-02_デプロイオプション

ソース選択 必要な設定の構成をクリックします。

06-03_デプロイオプション

Gitによるデプロイを行うのでGitHubをクリックします。

06-04_デプロイオプション

06-05_デプロイオプション

OKボタンをクリックします。

ここで設定セクションのプロパティをクリックします。

06-06_デプロイオプション

GIT URLが表示されていることを確認します。
このURLはデプロイで使用します。

設定セクションのアプリケーション設定をクリックします。

06-07_デプロイオプション

次の項目を入力して保存ボタンをクリックします。

  • Javaバージョン Java 8
  • Javaマイナーバージョン 最新
  • Webコンテナー 最新 Tomcat 8.0
  • プラットフォーム 64ビット
  • 常時接続 オン

デプロイ用ビルド

Spring Tool Suiteでデプロイ用のビルドを行います。
Package Explorerでプロジェクトを右クリックしてRun As5 Maven Buildをクリックします。

07-01_デプロイ向けビルド

Goalspackageと入力します。

07-02_デプロイ向けビルド

Runボタンをクリックしてビルドを実行します。

Gitによるデプロイ環境作成

Gitでデプロイするための環境をローカルに作成します。

デプロイ作業のルートとして適当なディレクトリを作成します。(ここではExHelloWebAppとします。)
その中にwebappsというディレクトリを作成します。

ExHelloWebApp/webappsに先に作成したWebアプリのtargetディレクトリ配下にあるROOT.warをコピーします。

GitBashを起動してExHelloWebAppに移動します。

$ cd ・・・/ExHelloWebApp

Gitのローカルリポジトリを作成します。

$ git init
$ git add .   (. ピリオドを忘れないこと)
$ git commit -m 'first deploy'

ローカルリポジトリをAzure Web Appのデプロイオプションで作成したGitHubに関連付けます。

$ git remote add origin <デプロイオプションで確認したGIT URL>

デプロイ

関連付けたGitHubにpushします。

$ git push -u origin master

ダイアログが表示されるのでデプロイ資格情報で登録したユーザー名とパスワードを入力します。

再デプロイ

Webアプリが更新されたときはROOT.warExHelloWebApp/webappsにコピーして次のコマンドを実行します。

$ git add webapps
$ git commit -m 'deploy etc. etc. ...'
$ git push

実行の確認

WebAppの概要で取得したURLへブラウザを用いてアクセスします。

07-03_デプロイ向けビルド

こんにちは世界と表示されればAzure上でWebアプリが動作しています。

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です