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)をダウンロードします。

• Spring Tool Suite

STSのインストール

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

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

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

Spring Starter Projectの作成

Spring Tool SuiteのFileメニューからNew→Spring Starter ProjectをクリックしてSpring Bootプロジェクトを作成します。

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

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

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

これで新しい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でプロジェクトを右クリックしてMaven→Update Projectをクリックします。

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

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

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

コントローラーの追加

まずはコントローラーを追加します。
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 Explorerでsrc/main/resourcesの下にあるtemplatesを右クリックします。
New→Fileをクリックして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 As→Spring Boot Appをクリックします。

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

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

Webアプリの停止

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

AzureのWebアプリ作成

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

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

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

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

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

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

Gitを使ったデプロイ

WebAppの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

デプロイ用ビルド

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

Goalsにpackageと入力します。

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.warをExHelloWebApp/webappsにコピーして次のコマンドを実行します。

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

実行の確認

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

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

About サイオステクノロジーの中の人です 88 Articles

サイオステクノロジーで働く中の人です。

Twitter YouTube