HerokuにGitでHelloWorldをデプロイする①[SpringBoot]

#環境
+ OS : Windows10
+ Git : 2.32.0
+ Heroku : 7.53.0
+ eclipse
+ Spring Boot(thymeleaf,Maven)

今回、GitHubと連携はしていません。

#前提条件
+ Gitをインストール済み
+ Herokuに登録済み
+ Heroku CLIをインストール済み

#Hello Worldのコードを準備する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/967b66bd-5e24-6fee-f567-ce52abf156be.png)

GitHubで公開もしています。

https://github.com/kiki202181/HelloWorld

##Spring　スターター・プロジェクトを作る
ファイル＞新規＞Spring　スターター・プロジェクト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/b95159b2-9231-a629-c1ea-4508da9b1421.png)

##スターター・プロジェクトの設定
+ 名前 : HelloWorld
+ 型 : Maven
+ Havaバージョン : 11



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/bd96a0e1-ce7f-6202-8711-5dfcefc2763b.png)


###依存関係の設定

+ Lombok
+ Thymeleaf
+ Spring Boot DevTools
+ Spring Web

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/26b0420f-3a8d-6771-86af-76c176b4082c.png)

###Controllerクラスを作成

```Controller.java
package com.example.demo;
import org.springframework.web.bind.annotation.RequestMapping;

public class Controller {
	@RequestMapping("/")
	public String index() {
		return "hello";
	}
}
```

###index.html(view)を作成

index.htmlを作成するときは、src/main/resourcesのtemplatesの直下に作ってください。

```index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
</head>
<body>
Hello World
</body>
</html>
```
###pom.xml
pom.xmlは自動で作られます。
[依存関係の設定]で選択したものも入っていると思います。

```pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.4</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example.demo</groupId>
	<artifactId>HelloWorld</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>HelloWorld</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

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

</project>
```


#Herokuに必要なファイルを作る
Herokuに必要なファイルを作ります。二つとも、プロジェクトの直下に作成してください。

+ system.properties : javaのバージョンを明記する
+ Procfile :Heroku上で実行するコマンドを定義する


###eclipseでのファイルの作り方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/9c29d93f-2f35-ea11-9027-72b56f9b10d6.png)
プロジェクトの上で右クリック>新規>ファイル
※拡張子は必要ないです


##system.properties

```system.properties
#java.runtime.version=[javaのバージョン]
java.runtime.version=11
```
javaのバージョンを明記します。

##Procfile

Procfileは「P」は大文字で、拡張子は付けないでください。





```
# web: java -Dserver.port=$PORT -jar target/任意の文字列-0.0.1-SNAPSHOT.jar
web: java -Dserver.port=$PORT -jar target/HelloWorld-0.0.1-SNAPSHOT.jar
```


今回はthymeleafを使ったwebアプリなので、`web`と書きます。
`任意の文字列`は、pom.xmlのartifactIdタグ、versionタグ内に記載されています。


```pom.xml
	-- 略 --
	<groupId>com.example.demo</groupId>
	<artifactId>HelloWorld</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>HelloWorld</name>
	-- 略 --
	
```

Procfileを書かなくてもいいという記事もあったんですが、私はProcfileを書かないとうまく動きませんでした。


↓system.propertiesとProcfileについて、非常に参考になった記事です。
もっとsystem.propertiesとProcfileについて知りたい人は、ぜひ読んでみてください。
[SpringBootで作成したアプリケーションをHerokuへデプロイ(公開)①](https://qiita.com/hiroki1994/items/9ce824efce5399870134#procfile-systemproperties%E3%82%92%E4%BD%9C%E6%88%90)

##プロジェクトをエクスポートする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/78c7b6f2-aefc-fc75-e637-c2ce701f461d.png)
プロジェクト上で右クリック＞エクスポート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/33ceda6a-7e08-b713-f331-0beda4db61f1.png)

ファイル・システムを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832699/f37305f6-52f4-0002-ef91-e2bcfddbde43.png)

`宛先ディレクトリー`は好きな場所を選んでください。


次回は今回作ったHelloWorldをHerokuにデプロイします。
[HerokuにGitでHelloWorldをデプロイする②[SpringBoot]](https://qiita.com/kiki_202181/private/55664e48c65b85103ef6)

#参考HP
[【はじめてでも１５分でできる】HerokuでJavaのWebアプリをサクッと動かす手順](https://web.plus-idea.net/2017/04/heroku-java-webapp-launch/)
[SpringBootで作成したアプリケーションをHerokuへデプロイ(公開)①](https://qiita.com/hiroki1994/items/9ce824efce5399870134)
[Heroku初心者がJavaで作成したWebアプリをGitHub連携でデプロイする時つまずいた4つのこと](https://qiita.com/ShandyGaffLover/items/0dad6ebf48d649aab761)