第2回/HelloSpringBoot
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[第2回]]
* Spring Bootで初めての開発 [#j839f15b]
- 目標： 猫アプリを自分の環境で作成・実行し，自身の開発環...
** GitHubリポジトリを準備する [#a7fde2ae]
+ 各自，自分のGitHubリポジトリに，新しくhello_spring_boot...
-- https://github.com/login
-- Publicで作成し，Add a README file もチェックしておくこと
+ 手元のノートPCにcloneしておく
-- 設定すれば、VSCode上でも可能
-- Ctrl + Shift + P => Git Clone
+ 適宜，ブランチを作って移動しておく
** Spring Initializr でプロジェクトのひな型を作る [#dcb58...
+ [[Spring Initializr:https://start.spring.io/]]にアクセ...
+ 下記の情報を入れる
Project: Gradle Project
Language: Java
Spring Boot: 2.5.1 (SNAPSHOTの書かれていない最新のやつ)
Project Metadata:
|--Group: jp.kobespiral
|--Artifact: hello
|--Name: hello
|--Description: 猫アプリ as 初めてのSpring Boot アプリ...
|--Package name: jp.kobespiral.hello (自動入力される)
|--Packaging: war
|--Java: 11 (※2021/06現在、VSCode上だと8,16は動かない！)
Dependencies (Ctrlを押しながら操作すると複数同時に選べる)
|--Spring Boot DevTools (開発ツール)
|--Lombok (コンストラクタやsetter/getterを自動生成して...
|--Spring Web (Webアプリを作るときは必須)
|--Thymeleaf (HTML テンプレートエンジン)
+ GENERATE ボタンを押し，ダウンロードされたdemo.zip を 展...
+ 展開されたフォルダdemoを，git cloneしたhello_spring_boo...
+ エクスプローラでdemoを開き，右クリック→VSCodeで開く
+ Do you trust ... ? には Yes, I trust と答える
+ 右下のグルグルマークをダブルクリックし，初期化が終わる...
+ src/main/java/jp/kobespiral/hello の中に，以下のファイ...
-- HelloApplication.java - 猫アプリ本体
-- ServletInitializer.java - Webアプリ(Java Servlet)を開...
** Webアプリのバックエンド（コントローラ）を作成する [#zf...
+ src/main/java/jp/kobespiral/hello の中に，HelloControll...
-- src/main/java/jp/kobespiral/hello/HelloController.java
package jp.kobespiral.hello;
import java.util.ArrayList;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVaria...
import org.springframework.web.bind.annotation.PostMappi...
import org.springframework.web.bind.annotation.RequestPa...
@Controller
public class HelloController {
// あいさつのリスト
private ArrayList<String> list = new ArrayList<>();
/**
* HTTP-GET で 猫ちゃんのあいさつページを表示する
*
* @param name パス・パラメータに含まれるユーザ名
* @param model 画面のモデル
* @return あいさつページ
*/
@GetMapping("/{name}/hello")
public String sayHello(@PathVariable String name, Mo...
model.addAttribute("greeting", createGreetingMes...
model.addAttribute("name", name); // ユーザ名セ...
return "hello"; // テンプレ hello.htmlをレンダリ...
}
/**
* HTTP-POST であいさつ文を追加する
*
* @param name パス・パラメータに含まれるユーザ名
* @param aisatsu フォームから入力されたあいさつ文
* @param model 画面のモデル
* @return あいさつ追加ページ
*/
@PostMapping("/{name}/hello/add")
public String addHello(@PathVariable String name, @R...
list.add(aisatsu);
model.addAttribute("greeting", aisatsu); // 追加...
model.addAttribute("name", name); // ユーザ名セ...
return "post_hello"; // テンプレ post_hello.html...
}
/**
* 登録済みのあいさつを連結して、文字列にして返す
*
* @return 登録されたあいさつ文字列
*/
private String createGreetingMessage() {
String greeting = "";
for (String s : this.list) {
greeting = greeting + s + "、";
}
return greeting;
}
}
** Webアプリのフロントエンドを作成する [#i1de9b4f]
*** 静的リソースを準備する [#ve4aec18]
+ src/main/resources/static の中に，新規フォルダを作成する
-- css : cssファイルを入れる
-- img : 画像ファイルを入れる
+ [[cat.jpg:https://cs27.org/wiki/kobespiral2021/?plugin=...
+ cssフォルダの中に，hello.cssを新規作成し，下記の内容を...
-- src/main/resources/static/hello.css (猫のセリフの吹き...
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #c3f69d;
border-radius: 15px;
}
.balloon1:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #c3f69d;
}
.balloon1 p {
margin: 0;
padding: 0;
}
*** HTML テンプレートを用意する [#ic316a49]
+ src/main/resources/templatesの中に，hello.htmlを新規作...
-- src/main/resources/templates/hello.html (猫アプリトッ...
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
<link rel="stylesheet" th:href="@{/css/hello.css}" />
</head>
<body>
<h1>Hello Spring Boot!</h1>
<div class="balloon1">
<p th:text="${greeting}"></p>
<p>[[${name}]]さん、Spring Bootへようこそにゃ！</p>
</div>
<div>
<img th:src="@{/img/cat.jpg}" />
</div>
<div>
<form th:action="@{/{n}/hello/add(n=${name})}" metho...
<label for="text">あいさつを追加</label>
<input type="text" name="aisatsu" id="aisatsu" />
<input type="submit" value="追加" />
</form>
</div>
</body>
</html>
+ src/main/resources/templatesの中に，post_hello.htmlを新...
-- src/main/resources/templates/post_hello.html (あいさつ...
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
</head>
<body>
<h1>あいさつを追加しました！</h1>
<p>[[${name}]]さん、あいさつ文「[[${greeting}]]」を...
<a th:href="@{/{n}/hello(n=${name})}">戻る</a>
</body>
</html>
- 今までの作業ができていると、src以下のフォルダ構成はこう...
-- &attachref(folder.jpg);
-- フォルダ構成が異なると正常に動作しない。
** Webアプリの設定を行う [#u5e4b320]
+ src/main/resources/application.properties を開き，次の...
# テスト用のサーバポートは ニャーニャー
server.port = 28280
+ build.gradle を開き，最下部に以下の内容をコピー
// war ファイルを構築するタスク
war {
enabled = true
archiveName='demo.war' // <- プロジェクトに合わせて...
}
** 実行してテストする [#ca654c17]
+ src/main/java/jp/kobespiral/hello/HelloAppication.java ...
+ ブラウザで，[[http://localhost:28280/自分の名前/hello]]...
+ 猫アプリが起動すればOK
** war に固めてローカルマシンのTomcatにデプロイする [#ea1...
+ VSCode で Ctrl-Shift-@ を押し，シェルを立ち上げる
+ ./gradlew.bat war とタイプする
+ BUILD SUCCESSFUL と出たら，build/libs の中に，demo.war ...
+ エクスプローラで demo.war を C:\TAMP\Tomcat-9.0.34\weba...
+ Tomcatを起動し，ブラウザから↓を開いて確認する
-- http://localhost:8080/demo/自分の名前/hello
-- VSCode上で実行する場合とURLが違うことに注意！
** （余裕があれば）Postmanを使ったRestAPIを確認する [#dbe...
- [[./RestAPI]]
** （余裕があれば） EC2にデプロイする [#t947dfee]
+ demo.war を 自分のEC2サーバの /usr/tomcat/webapps/にコ...
-- Teraterm または RLoginによる転送を行う
-- sudo su によるroot権限が必要
+ 確認する
-- http://EC2のパブリックIPアドレス:8080/demo/自分の名前/...
* トラブルシューティング [#tcef604e]
** Javaがうまく動かない [#u787c96b]
- キャッシュを削除してみる
-- Ctrl + Shift + P => Java: Clean Java Language Server W...
-- Vscodeが再起動するが、大抵Java関連のエラーがでる
-- 右上のxでVSCodeを閉じて、起動しなおすと治る(ことが多い)
** ～がない [#l071e6f6]
- ～してみる
終了行:
[[第2回]]
* Spring Bootで初めての開発 [#j839f15b]
- 目標： 猫アプリを自分の環境で作成・実行し，自身の開発環...
** GitHubリポジトリを準備する [#a7fde2ae]
+ 各自，自分のGitHubリポジトリに，新しくhello_spring_boot...
-- https://github.com/login
-- Publicで作成し，Add a README file もチェックしておくこと
+ 手元のノートPCにcloneしておく
-- 設定すれば、VSCode上でも可能
-- Ctrl + Shift + P => Git Clone
+ 適宜，ブランチを作って移動しておく
** Spring Initializr でプロジェクトのひな型を作る [#dcb58...
+ [[Spring Initializr:https://start.spring.io/]]にアクセ...
+ 下記の情報を入れる
Project: Gradle Project
Language: Java
Spring Boot: 2.5.1 (SNAPSHOTの書かれていない最新のやつ)
Project Metadata:
|--Group: jp.kobespiral
|--Artifact: hello
|--Name: hello
|--Description: 猫アプリ as 初めてのSpring Boot アプリ...
|--Package name: jp.kobespiral.hello (自動入力される)
|--Packaging: war
|--Java: 11 (※2021/06現在、VSCode上だと8,16は動かない！)
Dependencies (Ctrlを押しながら操作すると複数同時に選べる)
|--Spring Boot DevTools (開発ツール)
|--Lombok (コンストラクタやsetter/getterを自動生成して...
|--Spring Web (Webアプリを作るときは必須)
|--Thymeleaf (HTML テンプレートエンジン)
+ GENERATE ボタンを押し，ダウンロードされたdemo.zip を 展...
+ 展開されたフォルダdemoを，git cloneしたhello_spring_boo...
+ エクスプローラでdemoを開き，右クリック→VSCodeで開く
+ Do you trust ... ? には Yes, I trust と答える
+ 右下のグルグルマークをダブルクリックし，初期化が終わる...
+ src/main/java/jp/kobespiral/hello の中に，以下のファイ...
-- HelloApplication.java - 猫アプリ本体
-- ServletInitializer.java - Webアプリ(Java Servlet)を開...
** Webアプリのバックエンド（コントローラ）を作成する [#zf...
+ src/main/java/jp/kobespiral/hello の中に，HelloControll...
-- src/main/java/jp/kobespiral/hello/HelloController.java
package jp.kobespiral.hello;
import java.util.ArrayList;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVaria...
import org.springframework.web.bind.annotation.PostMappi...
import org.springframework.web.bind.annotation.RequestPa...
@Controller
public class HelloController {
// あいさつのリスト
private ArrayList<String> list = new ArrayList<>();
/**
* HTTP-GET で 猫ちゃんのあいさつページを表示する
*
* @param name パス・パラメータに含まれるユーザ名
* @param model 画面のモデル
* @return あいさつページ
*/
@GetMapping("/{name}/hello")
public String sayHello(@PathVariable String name, Mo...
model.addAttribute("greeting", createGreetingMes...
model.addAttribute("name", name); // ユーザ名セ...
return "hello"; // テンプレ hello.htmlをレンダリ...
}
/**
* HTTP-POST であいさつ文を追加する
*
* @param name パス・パラメータに含まれるユーザ名
* @param aisatsu フォームから入力されたあいさつ文
* @param model 画面のモデル
* @return あいさつ追加ページ
*/
@PostMapping("/{name}/hello/add")
public String addHello(@PathVariable String name, @R...
list.add(aisatsu);
model.addAttribute("greeting", aisatsu); // 追加...
model.addAttribute("name", name); // ユーザ名セ...
return "post_hello"; // テンプレ post_hello.html...
}
/**
* 登録済みのあいさつを連結して、文字列にして返す
*
* @return 登録されたあいさつ文字列
*/
private String createGreetingMessage() {
String greeting = "";
for (String s : this.list) {
greeting = greeting + s + "、";
}
return greeting;
}
}
** Webアプリのフロントエンドを作成する [#i1de9b4f]
*** 静的リソースを準備する [#ve4aec18]
+ src/main/resources/static の中に，新規フォルダを作成する
-- css : cssファイルを入れる
-- img : 画像ファイルを入れる
+ [[cat.jpg:https://cs27.org/wiki/kobespiral2021/?plugin=...
+ cssフォルダの中に，hello.cssを新規作成し，下記の内容を...
-- src/main/resources/static/hello.css (猫のセリフの吹き...
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #c3f69d;
border-radius: 15px;
}
.balloon1:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #c3f69d;
}
.balloon1 p {
margin: 0;
padding: 0;
}
*** HTML テンプレートを用意する [#ic316a49]
+ src/main/resources/templatesの中に，hello.htmlを新規作...
-- src/main/resources/templates/hello.html (猫アプリトッ...
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
<link rel="stylesheet" th:href="@{/css/hello.css}" />
</head>
<body>
<h1>Hello Spring Boot!</h1>
<div class="balloon1">
<p th:text="${greeting}"></p>
<p>[[${name}]]さん、Spring Bootへようこそにゃ！</p>
</div>
<div>
<img th:src="@{/img/cat.jpg}" />
</div>
<div>
<form th:action="@{/{n}/hello/add(n=${name})}" metho...
<label for="text">あいさつを追加</label>
<input type="text" name="aisatsu" id="aisatsu" />
<input type="submit" value="追加" />
</form>
</div>
</body>
</html>
+ src/main/resources/templatesの中に，post_hello.htmlを新...
-- src/main/resources/templates/post_hello.html (あいさつ...
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
</head>
<body>
<h1>あいさつを追加しました！</h1>
<p>[[${name}]]さん、あいさつ文「[[${greeting}]]」を...
<a th:href="@{/{n}/hello(n=${name})}">戻る</a>
</body>
</html>
- 今までの作業ができていると、src以下のフォルダ構成はこう...
-- &attachref(folder.jpg);
-- フォルダ構成が異なると正常に動作しない。
** Webアプリの設定を行う [#u5e4b320]
+ src/main/resources/application.properties を開き，次の...
# テスト用のサーバポートは ニャーニャー
server.port = 28280
+ build.gradle を開き，最下部に以下の内容をコピー
// war ファイルを構築するタスク
war {
enabled = true
archiveName='demo.war' // <- プロジェクトに合わせて...
}
** 実行してテストする [#ca654c17]
+ src/main/java/jp/kobespiral/hello/HelloAppication.java ...
+ ブラウザで，[[http://localhost:28280/自分の名前/hello]]...
+ 猫アプリが起動すればOK
** war に固めてローカルマシンのTomcatにデプロイする [#ea1...
+ VSCode で Ctrl-Shift-@ を押し，シェルを立ち上げる
+ ./gradlew.bat war とタイプする
+ BUILD SUCCESSFUL と出たら，build/libs の中に，demo.war ...
+ エクスプローラで demo.war を C:\TAMP\Tomcat-9.0.34\weba...
+ Tomcatを起動し，ブラウザから↓を開いて確認する
-- http://localhost:8080/demo/自分の名前/hello
-- VSCode上で実行する場合とURLが違うことに注意！
** （余裕があれば）Postmanを使ったRestAPIを確認する [#dbe...
- [[./RestAPI]]
** （余裕があれば） EC2にデプロイする [#t947dfee]
+ demo.war を 自分のEC2サーバの /usr/tomcat/webapps/にコ...
-- Teraterm または RLoginによる転送を行う
-- sudo su によるroot権限が必要
+ 確認する
-- http://EC2のパブリックIPアドレス:8080/demo/自分の名前/...
* トラブルシューティング [#tcef604e]
** Javaがうまく動かない [#u787c96b]
- キャッシュを削除してみる
-- Ctrl + Shift + P => Java: Clean Java Language Server W...
-- Vscodeが再起動するが、大抵Java関連のエラーがでる
-- 右上のxでVSCodeを閉じて、起動しなおすと治る(ことが多い)
** ～がない [#l071e6f6]
- ～してみる
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
