山ｐの楽しいお勉強生活

勉強の成果を垂れ流していきます

Spring Bootを使ってWebアプリケーションを作成する（開発環境から）

はじめに

  • 某所でお題として与えられ、楽勝！って思ったら完遂できなかったので、ハマった所を解消し、再挑戦した際のメモです。*1
  • 最良、最適な方法ではないと思いますので、参考にする場合には自己責任でお願いします。*2
  • コードは一部しか記載しませんので、全てを確認したい場合には参考用コミットとしてGitHubへのリンクを記載してますので、こちらを確認してください。

要件とか

  • 下記の要件でWebアプリケーションを作成する。
  • 少しでも早く作成する。
  • 指定されていない事は想定する必要はない。
    • 最低限要件を満たした上で1秒でも早く作成する。

環境

  • まっさらなWindows
    • 開発環境。
    • 実際はWindows10だったのですが、用意できないので7で再挑戦。*3
  • Linux
    • この環境でポート80でアクセスできるWebアプリケーションを動作させる。
    • 実際はAWSでIPと秘密鍵は用意されてました。（SSHでログインは可能。）
    • 用意できないので、別マシン上にDockerで用意。

アプリケーションの要件

  • 問い合わせフォームを作る
  • 「 http://xxx.xxx.xxx.xxx 」でアクセスすると問い合わせフォーム画面が表示される。
    • ポートは80
  • 問い合わせフォーム画面は、「名前」、「Eメール」、「問い合わせ内容」の3つの入力が可能。
  • それぞれの入力にそれなりにValidationをかける。
  • 送信ボタンを押下すると完了画面が表示される。
  • 送信ボタン押下時にDBに入力内容を保存する。
    • DBはなんでも良い
    • テーブル構成もなんでも良い

リポジトリ

Pleiadesインストール*4

プロジェクト作成

  • プロジェクトエクスプローラ上で右クリック → 新規 → プロジェクト
  • Spring → Springスタータープロジェクト
  • Spring Boot Version : 1.5.3
  • Dependencies
    • DevTools
    • Web
    • Thymeleaf
    • H2
    • JPA

  • 完了

  • 参考用コミット

問い合わせ画面を作成

  • Controllerを追加
    • com.example.demo.DemoApplication.java
      • クラス分ける時間が惜しいので、アプリケーションを起動するクラスに追加してしまいます。
@RequestMapping("/")
public String index(Model model) {
    return "index";
}
  • 画面を作成
    • src/main/resources/templates/index.html
    • 特に特筆すべき事はないのでコードは割愛。
  • アプリケーション起動
    • プロジェクト右クリック → 実行 → Spring Boot アプリケーション

  • ブラウザで確認

  • 参考用コミット

完了画面を作成

  • 問い合わせ画面でボタン押下したら完了画面が表示されるようにします。
  • 完了画面のマッピングを追加
    • com.example.demo.DemoApplication.java
@RequestMapping("result")
public String result(Model model) {
    // TODO 入力チェック
    // TODO DBに保存
    return "result";
}
  • 完了画面に遷移するように問い合わせ画面を変更
    • src/main/resources/templates/index.html
-  <form role="form" action="#">
+   <form role="form" th:action="@{/result}" method="post">

入力チェックを追加

  • 問い合わせ画面でボタン押下時に入力チェックが行われるように設定。
  • formを作成
    • src/main/java/com/example/demo/InputForm.java
public class InputForm {
    @NotEmpty
    @Size(min = 1, max = 50)
    private String name;

    @Size(max = 50)
    private String email;

    @NotEmpty
    @Size(max = 100)
    private String message;
  // getter, setterは略
}
  • 入力チェックでエラーとなった場合には問い合わせ画面に戻す処理を追加。
    • com.example.demo.DemoApplication.java
 - public String result(Model model) {
 -      // TODO 入力チェック
 +  public String result(@ModelAttribute("inputForm") @Valid InputForm form, BindingResult bindingResult, Model model) {
 +      if (bindingResult.hasErrors()) {
 +          return index(form, model);
 +      }
  • エラーメッセージを表示するように修正。
    • src/main/resources/templates/index.html
-          <p>名前 : <input type="text" name="name" /></p>
+           <p>名前 : <input type="text" th:value="*{name}" name="name" /></p>
+           <p><span
+               th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
+           </p>
<!-- 以下略 -->

DBに保存する

@Entity
@Table(name="message")
public class Message {
    public Message(InputForm form) {
    // 何か他にいい方法ありそうだけど、コンストラクタでformから入れ替える
        this.message = form.getMessage();
        this.email = form.getEmail();
        this.name = form.getName();
    }
    @Id
    @GeneratedValue
    private int id;

    @Column
    private String name;

    @Column
    private String email;

    @Column
    private String message;
  // getter, setterは略
}

public interface MessageRepository extends JpaRepository<Message, Integer> {
}
  • 保存処理を追加
public class DemoApplication {
 +  @Autowired MessageRepository repository;
// 略
 -      // TODO DBに保存
 +      repository.save(new Message(form));

プロパティファイルは好きじゃないのでYAMLに変更

DBに保存されている事を確認するためh2コンソールの表示設定を追加

  • src/main/resources/application.yml
spring:
   h2:
     console:
       enabled: true
   datasource:
     url: jdbc:h2:mem:test

起動するポート番号を変更

  • src/main/resources/application.yml
+server:
 +  port: 80

jarで出力する

  • プロジェクト右クリック → 実行 → Maven install
  • target配下にjarが出力されていることを確認。

jar単体で起動

動作環境の整備

  • Linuxにログイン
  • Javaのインストール
    • sudo yum install java-1.8.0-openjdk.x86_64
  • ↑で作成したjarをLinuxに移動
  • ファイアーウォールを止める
    • sudo service iptables stop
  • 起動
    • java -jar demo-0.0.1-SNAPSHOT.jar
  • ブラウザで確認

まとめ

  • ハマった部分が解消されたら、特になんてこともなくこなすことができ、凹んでいた気分が少し回復したので良しとする。
  • ハマった部分に関しても、落ち着いて挑めば解決できたと思うので、焦ってエラーメッセージや事象を検索するのではなく、外の空気でも吸いに行けばよかったと思った。
  • 色々突っ込みどころはあると自分でも思うが、お題がお題なのでこんなものではないだろうか。
  • いいお題だと思ったので、今後新しいフレームワークを学ぶ際にはこのお題をこなそうと決めた。

*1:ハマった事象は別記事にする予定。

*2:ツッコミ歓迎

*3:何も変わる事はないはず。

*4:そもそもSTSはプラグイン版じゃなくて単体パッケージ版を使用した方が良いって誰かが言ってた気がする。https://spring.io/tools/sts/all

*5:これってWindows10でも発生する？