はじめに

どうも、プログラミング勉強中の大学生、@Ikuto19です。今回は勉強がてらにJavaのSpring Bootを使った簡易的な書籍管理webアプリを作ろうと思います。
以前、JavaではなくPythonで作成したんですが個人的に納得のいかない点があったので、作り直そうを思いました。その納得がいかない点というのは下記のようなものです。

Pythonはサーバーサイド言語として不向き
無料で自作アプリを公開したい

サーバーサイドのプログラミング言語として使われているのはRuby、Java、PHPの三つが多い気がします。ネットで調べてもこの三つどれかが使われているのが大半みたいです。(個人調べ)

Pythonはサーバーサイドではなく、AIやディープラーニングといったものやデータサイエンスが得意なプログラミング言語です。なのにwebアプリのサーバーサイド言語として使っても、あまり使わないのであれば勉強にならないと思ったので、今回はJavaで作り直すという考えに至ったわけです。あと無料で自作アプリを公開できないかな？と調べた結果、Herokuというサービスがあることを知ったのも理由の一つです。

もし、載せている情報が間違っていたり、説明不足があれば、気にせず指摘してくださって構いません。この記事は自分の勉強のためであり、僕と同じように躓いている人に向けたものです。ですので、よろしくお願い致します。

前提条件

macOS Catalina(バージョン10.15.5)
Eclipse Version: 2020-03
サーバーサイド言語: Java
フロントエンド言語: HTML、CSS、Javascript(jQuery)
データベース: MySQL(HerokuではclearDBというアドオンからMySQLを使用)
Webアプリケーションフレームワーク: Spring FrameworkのSpring boot
ビルドツール: maven
書籍管理API: openBD
webアプリの公開サービス: heroku

各ツールやプロジェクトについて

Spring Frameworkについて

公式サイト → https://spring.io/
Spring FrameworkはJavaによる開発をスピーディーに安全に開発するためのフレームワークで、Springというふうに読んだりもするみたいです。このSpringは「DI:依存性注入」と「AOP:アスペクト指向プログラミング」を特徴にもっています。

mavenについて

公式サイト → https://maven.apache.org/
mavenは複数あるビルドツールうちの一つです。他にはGradleやAntがありますが、今回はHerokuに完成したアプリをデプロイするのでmavenを選びました。pom.xmlに依存関係を記述することで、いろんなパッケージを扱えるようになります。

openBDについて

公式サイト → https://openbd.jp/
このopenBDは書誌情報や表紙を誰でもアクセスできる無料のAPIです。
今回はjavascriptのjQueryでこのAPIを使って書籍情報にアクセスします。

herokuについて

公式サイト → https://jp.heroku.com/about
コンテナベースのクラウド型PaaSで、多数のプログラミング言語から選んでき、自作アプリをデプロイ・管理することができるサービス。

ツールの導入

インストール済みのeclipseへSpring プロジェクトをインストール

eclipse起動後、ヘルプ > eclipse マーケットプレースからSpring Tools 4(aka Spring Tool Suite 4) 4.7.0.RELEASEをインストール
全てのチェックボックスにチェックしたまま、確認
「使用条件の条項に同意します」にチェックを入れて完了
「再起動しますか？」と聞かれるのでそのまま再起動する。

もし、セキュリティ警告で「信頼性または有効性を確立できない署名されていないソフトウェアをインストールします。インストールを続行しますか？」と表示されたら、インストールボタンをクリック。

Herokuへの登録およびクレカの登録

Herokuでアカウント作成

サインアップ → https://signup.heroku.com/login
1. 上記で必要項目を入力し、アカウント作成
2. 確認メールが来るので、クリックしてパスワードを設定

ここまでできていると、ダッシュボード画面になっていると思います。

MySQL利用のためにクレジットカードの登録

HerokuではデフォルトのデータベースがPostgreSQLなので、MySQLにする際はclearDBという無料のアドオンを追加する必要があります。ですが、そのためにはクレジットカードの登録をする必要があるので、登録します。

ダッシュボード画面から右上端のアイコンからAccount settingsをクリック
BillingタブからBilling Informationの「Add credit card」をクリック
必要項目を入力して、Save Detailsをクリック

テストアプリの作成・実行とherokuでの公開

テストアプリの作成

一応、作成手順を載せておきますが、GitHubにプロジェクトをあげているので、以下のコマンドダウンロードしてくださっても構いません。

terminal

$ git clone https://github.com/ikuto19/test-webapp.git

作成手順

eclipse起動後、パッケージ・エクスプローラーで右クリック
新規 > プロジェクトをクリック
Spring BootのSpring スターター・プロジェクトを選択し、「次へ」をクリック
名前を「webapp-test」、グループとパッケージを「com.app」にして、「次へ」をクリック
依存関係のテンプレート・エンジンからThymeleafとwebからSpring Webにチェックして、「完了」をクリック

プロジェクトの中身を確認すると、以下の画像のような構成になっていると思います。もし、templatesフォルダがなければ追加で作っておいてください。

次に以下の構成で新規のファイルを作成または既存のファイルを削除します。

各ファイルの中身は以下のように記述します。

App.java

package com.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

IndexController.java

package com.app.controller;

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

@Controller
public class IndexController {

    @GetMapping("/")
    public String getIndexPage(Model model) {
        String message = "Hello, World!!";
        model.addAttribute("message",message);
        return "index";
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>テストアプリ</title>
</head>
<body>
    <p th:text="${message}"></p>
</body>
</html>

Procfile

web: java $JAVA_OPTS -jar target/*.jar --server.port=$PORT

実行確認

コンソール

020-08-11 17:25:37.546  INFO 13991 --- [          main] com.app.App     : Started App in 6.855 seconds (JVM running for 7.79)

パッケージ・エクスプローラーのApp.javaを選択したまま右クリックで、実行 > Spring Bootアプリケーションをクリックして、実行。
上記のようなログが最後に表示された後、webブラウザで http://localhost:8080/ にアクセスすると、下記のような画像が表示される。

Herokuへデプロイ

以下のコマンドを順に実行
「heroku login」を実行後に何かキーを押すと、webブラウザにとばされるので、「Log IN」ボタンをクリック

terminal

$ brew tap heroku/brew && brew install heroku
$ heroku login

createコマンドで「Name test-webapp is already taken」のようなエラーが出る場合、アプリ名を変えてください。他の人に使われている見たいなので。僕はアプリ名を「test-webapp01」としました。

terminal

$ cd (eclipseのワークペースがあるパス)/webapp-test
$ git init
$ heroku create test-webapp01
$ git add .
$ git commit -m "first upload"
$ git push heroku master (もしくは git push -f heroku master)

このようにBUILD SUCCESSと出ていると、成功していると思います。
以下コマンドで開いて確認してください。今回はここまでにします。