学習25日目:Herokuでデプロイしてみた。

今日の学習時間。

  • Day:25
  • Today:6h
  • Total:155h

学習内容について。

Herokuでデプロイする手順。

STEP
Heroku CLIツールをインストール。
STEP
デプロイツールをインストール。
$ heroku plugins:install heroku-cli-deploy

Installing plugin java... installed v3.1.1
STEP
メッセージボードのプロジェクトフォルダへ移動。

eclipseの外部ツールボタンでターミナルを開く。

$ mysqldump -u root -p message_board > message_board_dump.sql
Enter password:
  • 現在のローカルのMySQLについて、message_boardデータベースのバックアップを取る
    • プロジェクトのルートディレクトリにmessage_board_dump.sqlが作成される
STEP
Herokuへログイン。
$ heroku login -i

heroku: Enter your login credentials
Email: hoge@kiki.moda
Password: ********************
Logged in as hoge@kiki.moda
STEP
Heroku上に自分のアプリケーション用の領域を名前をつけて確保。
$ heroku create servlet-message-board-keitenkiki

Creating ⬢ servlet-message-board-keitenkiki... !
 ▸    Name is too long (maximum is 30 characters)

$ heroku create servlet-message-board-kiki

Creating ⬢ servlet-message-board-kiki... done
https://servlet-message-board-kiki.herokuapp.com/ | https://git.heroku.com/servlet-message-board-kiki.git
  • Herokuでは他のユーザがすでに登録している領域の名前と同じものを登録できない
    • 最高30文字
STEP
サーバインスタンスのタイムゾーンを設定。
$ heroku config:add TZ=Asia/Tokyo -a servlet-message-board-kiki

Setting TZ and restarting ⬢ servlet-message-board-kiki... done, v5
TZ: Asia/Tokyo

$ heroku run date -a servlet-message-board-kiki

Running date on ⬢ servlet-message-board-kiki... up, run.8106 (Free)
Mon Aug  3 20:52:14 JST 2020
  • Herokuサーバ(Dyno)のインスタンスの日付時刻は、グリニッジ標準時に設定されている
    • タイムゾーンの設定を追加して日本時間に合わせる
  • 下のコマンドを実行してJSTになっていればOK
STEP
※エラーの対処。
$ heroku config:add TZ=Asia/Tokyo

 ›   Error: Missing required flag:
 ›     -a, --app APP  app to run command against
 ›   See more help with --help

コマンドを実行しても上記のエラーが出てしまっていたが、STEP6のように-a APP名を追加で入力することで解決。

STEP
HerokuでMySQL(clearDB)を設定。

まずはHerokuにクレジットカード情報と氏名、住所を登録する。

$ heroku addons:create cleardb:ignite --a servlet-message-board-kiki

Creating cleardb:ignite on ⬢ servlet-message-board-kiki... free
Created cleardb-concentric-89893 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation

$ heroku config --a servlet-message-board-kiki | grep CLEARDB_DATABASE_URL

CLEARDB_DATABASE_URL: mysql://b9fb0e486d7d2d:3f0d7c23@us-cdbr-iron-east-05.cleardb.net/heroku_e35ab00f395b58e?reconnect=true

// URLの構造は mysql://(ユーザ名):(パスワード)@(ドメイン)/(データベース名)?reconnect=true

上記のコマンドでデータベースのURLを確認する。

STEP
HerokuのMySQLにログイン。
// $ mysql -h (ドメイン) -u (ユーザ名) -p
$ mysql -h us-cdbr-iron-east-05.cleardb.net -u b9fb0e486d7d2d -p
Enter password:

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 42763944
Server version: 5.6.36-log MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> exit;

Bye

最後にexitを実行していったんMySQLからログアウトする。

STEP
UTF-8の文字コードでMySQLを利用する設定をHerokuに追加。
$ heroku config:add CLEARDB_DATABASE_URL='mysql://b9fb0e486d7d2d:3f0d7c23@us-cdbr-iron-east-05.cleardb.net/heroku_e35ab00f395b58e?reconnect=true&useSSL=false&useUnicode=true&characterEncoding=utf8&characterSetResults=utf8' -a servlet-message-board-kiki

Setting CLEARDB_DATABASE_URL and restarting ⬢ servlet-message-board-kiki... done, v6
CLEARDB_DATABASE_URL: mysql://b9fb0e486d7d2d:3f0d7c23@us-cdbr-iron-east-05.cleardb.net/heroku_e35ab00f395b58e?reconnect=true&useSSL=false&useUnicode=true&characterEncoding=utf8&characterSetResults=utf8

$ heroku config --app servlet-message-board-kiki

=== servlet-message-board-kiki Config Vars
CLEARDB_DATABASE_URL: mysql://b9fb0e486d7d2d:3f0d7c23@us-cdbr-iron-east-05.cleardb.net/heroku_e35ab00f395b58e?reconnect=true&useSSL=false&useUnicode=true&characterEncoding=utf8&characterSetResults=utf8
TZ:                   Asia/Tokyo
  • 文字コードとは別に&useSSL=falseを追加
    • エラーの発生を防止
  • 設定が正しく反映されているか下のconfigコマンドで確認
    • 間違っているとMySQLに接続ができないので慎重に
STEP
persistence.xmlを設定。
接続タブ
  • URL:jdbc:mysql://(ドメイン)/(データベース名)?reconnect=true&useSSL=false&useUnicode=true&characterEncoding=utf8&characterSetResults=utf8
  • ユーザー:(ユーザー名)
  • パスワード:(パスワード)
スキーマ生成タブ
  • database action :なし
  • script generation :なし
STEP
HerokuのMySQLにmessagesテーブルを作成。
$ mysql -h us-cdbr-iron-east-05.cleardb.net -u b9fb0e486d7d2d -p
Enter password:

mysql> use heroku_e35ab00f395b58e; // データベース名
Database changed

mysql> source ~/message_board_dump.sql
Query OK, 0 rows affected (0.19 sec)
// 以下省略

mysql> show databases;
+------------------------+
| Database               |
+------------------------+
| information_schema     |
| heroku_e35ab00f395b58e |
+------------------------+
2 rows in set (2.72 sec)

mysql> show tables;
+----------------------------------+
| Tables_in_heroku_55a138a4673cd2d |
+----------------------------------+
| messages                         |
+----------------------------------+
1 row in set (0.20 sec)

mysql> SELECT * FROM messages;
+----+-----------------------------+---------------------+--------+---------------------+
| id | content                     | created_at          | title  | updated_at          |
+----+-----------------------------+---------------------+--------+---------------------+
| 21 | 登録されましたか?             | 2020-08-04 13:42:44 | Heroku | 2020-08-04 13:42:44 |
+----+-----------------------------+---------------------+--------+---------------------+
1 row in set (0.19 sec)
  • ターミナルでMySQLにログインしなおした上で、message_board_dump.sql を実行
    • sqlファイルの絶対パスを控えておく
  • sourceコマンドを実行した後に、Tomcatを再起動するとHerokuのMySQLと今まで作ってきたメッセージボードが繋がっているはず
    • 次にこの状態でメッセージを1件新規登録できたらデプロイ可能
    • 上記コマンドで一応確かめた
STEP
プロジェクトのwarファイルを作成。
  1. message_boardを右クリック→Maven→プロジェクトの更新
  2. message_boardを右クリック→エクスポート→WARファイルを選択
  3. 場所をホームディレクトリ直下に指定し作成
STEP
WARファイルをHerokuにデプロイ。
$ open -e ~/.bash_profile

Macの場合は、.bash_profileへの追記・修正が必要。上記のコマンドを実行すればファイルが開くので、そこに下記の2行を追記して保存。

export PATH=$PATH:/usr/local/mysql/bin:/Applications/Eclipse_4.6.3.app/Contents/java/8/Home/bin
export JAVA_HOME=/Applications/Eclipse_4.6.3.app/Contents/java/8/Home/
  • 1行目:パスの変更
  • 2行目:JAVA_HOMEの追加
$ HEROKU_DEBUG=1 heroku war:deploy ~/message_board.war --app servlet-message-board-kiki --webapp-runner 8.0.50.0
Uploading message_board.war

java -Dheroku.appName=servlet-message-board-kiki -Xmx1g -Dheroku.webappRunnerVersion=8.0.50.0 -Dheroku.warFile=/Users/KeitenKiki/message_board.war -jar /Users/KeitenKiki/.local/share/heroku/node_modules/@heroku-cli/plugin-java/lib/heroku-deploy-complete.jar
-----> Packaging application...
       - app: servlet-message-board-kiki
       - including: webapp-runner.jar
       - including: message_board.war
Procfile:
===================
web: java $JAVA_OPTS -jar webapp-runner.jar ${WEBAPP_RUNNER_OPTS} --port $PORT ./message_board.war

===================
Heroku existing config variables: [CLEARDB_DATABASE_URL, TZ]
-----> Creating build...
       - file: slug.tgz
       - size: 17MB
Heroku Blob URL: https://s3-external-1.amazonaws.com/heroku-sources-production/e28397ea-583f-4d33-9d77-b404768e7b1e?AWSAccessKeyId=AKIAJ6LKZGKGPARPZE4A&Signature=YqKJM6OSp6o46v1i9Y74Q2Q%2By8U%3D&Expires=1596528147
-----> Uploading build...
       - success
-----> Deploying...
remote: 
remote: -----> heroku-deploy app detected
remote: -----> Installing JDK 1.8... done
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 68.2M
remote: -----> Launching...
remote:        Released v7
remote:        https://servlet-message-board-kiki.herokuapp.com/ deployed to Heroku
remote: 
-----> Done
  • JDKをインストールしていないと「“java”コマンドラインツールを使用するには、JDKをインストールする必要があります。」というメッセージが表示されて、先に進めないのでインストールする
  • デプロイ完了するまでに3分ぐらいかかる

一応載せるけど、ただの掲示板みたいな感じ。HerokuのMySQLの仕様でIDが10ずつ増えるのが気になるな。。あと、めっちゃ遅い。

日報管理システムを構築していく。

基本的なところは同じなので一気に進めていくが、理解しにくい箇所があれば集中的にメモを残していく所存。

プロジェクトの作成と初期設定。

動的webプロジェクトの新規作成
  • プロジェクト名:daily_report_system
  • デフォルト・ロケーションを使用:☑︎
  • ターゲット・ランタイム:Tomcat8 (Java8)
  • 動的webモジュール バージョン:3.1
  • 構成:Tomcat8 (Java8) デフォルト構成
  • EARメンバーシップ:□
  • ワーキングセット:未入力のまま:□
  • コンテキスト・ルート:daily_report_system
  • コンテンツ・ディレクトリー:WebContent
  • web.xml デプロイメント記述子の生成:□
# Compiled class file
*.class

# Package Files #
*.jar
*.war
*.ear

# Maven
target/

# eclipse
.classpath
.project
.settings/
build/

# OS Files
Thumbs.db
.DS_Store

# Application Properties
WebContent/META-INF/application.properties
  • 23行目:PropertiesListenerを日報管理システムでも利用
  • application.properties のファイルをGitの対象外に
Gitに初期コミット
$ git init
Initialized empty Git repository in /Applications/Eclipse_4.6.3.app/Contents/workspace/daily_report_system/.git/

$ git add .

$ git commit -m "Initial commit"
[master (root-commit) efcb51c] Initial commit
 2 files changed, 26 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 WebContent/META-INF/MANIFEST.MF

MavenでJDBCドライバ等のインストール。

プロジェクトをMavenプロジェクトへ変換。グループIdはjp.exampleにしておく。

pom.xmlの「依存関係」
JDBCドライバ
  • グループId:mysql
  • アーティファクトId:mysql-connector-java
  • バージョン:5.1.45
Hibernate
  • グループId:org.hibernate
  • アーティファクトId:hibernate-core
  • バージョン:5.2.13.Final
JSTL(1)
  • グループId:org.apache.taglibs
  • アーティファクトId:taglibs-standard-impl
  • バージョン:1.2.5
JSTL(2)
  • グループId:javax.servlet.jsp.jstl
  • アーティファクトId:javax.servlet.jsp.jstl-api
  • バージョン:1.2.1
ここまでをGitにコミット
$ git add .

$ git commit -m "Add pom.xml"
[master 141ad05] Add pom.xml
 1 file changed, 49 insertions(+)
 create mode 100644 pom.xml

EncodingFilterを追加。

サーブレットを作成。

  • URLマッピングは/TopPageIndexServletから /index.htmlに変更
    • /index.html で http://localhost:8080 という記述のみでトップページにアクセスできる

JSPを作成。

CSSを用意。

Tomcat8にプロジェクトを追加して動作確認。

http://localhost:8090/daily_report_system/

問題なし。

ここまでをGitにコミット
$ git add .

$ git commit -m "Add TopPage and EncodingFilter"
[master acc002c] Add TopPage and EncodingFilter
 6 files changed, 221 insertions(+)
 create mode 100644 WebContent/WEB-INF/views/layout/app.jsp
 create mode 100644 WebContent/WEB-INF/views/topPage/index.jsp
 create mode 100644 WebContent/css/reset.css
 create mode 100644 WebContent/css/style.css
 create mode 100644 src/controllers/toppage/TopPageIndexServlet.java
 create mode 100644 src/filters/EncodingFilter.java

データベースを新規作成。

// ログイン
$ mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1097
Server version: 5.7.31 MySQL Community Server (GPL)

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

// データベース作成
mysql> CREATE DATABASE daily_report_system DEFAULT CHARACTER SET utf8;
Query OK, 1 row affected (0.01 sec)

// アカウント作成(ユーザー名、パスワード)
mysql> CREATE USER 'repuser'@'localhost' IDENTIFIED BY '*******';
Query OK, 0 rows affected (0.06 sec)

// このアカウントにデータベースへの全権限を与えるコマンドを実行
mysql> GRANT ALL PRIVILEGES ON daily_report_system.* to 'repuser'@'localhost';
Query OK, 0 rows affected (0.00 sec)

JPAプロジェクトへ変換。

JPAプロジェクトへ変換
  • Java(バージョン:1.8):☑︎
  • JPA(バージョン:2.1):☑︎
  • 動的webモジュール(バージョン:3.1):☑︎
  • プラットフォーム:Generic 2.1
  • JPA実装:ライブラリー構成を無効
  • 接続:なし
  • 永続化クラス管理:注釈付きクラスをpersistence.xmlに記述
  • 「指定された接続がないプロジェクト」:無視
persistence.xmlに各種設定を追加
一般
  • 名前:daily_report_system
  • 永続化プロバイダー:org.hibernate.jpa.HibernatePersistenceProvider
接続
  • トランザクション・タイプ:リソース・ローカル
  • JDBC接続プロパティーの各項目
    • ドライバー:com.mysql.jdbc.Driver
    • URL:jdbc:mysql://localhost/daily_report_system?useSSL=false&useUnicode=true&characterEncoding=utf8
    • ユーザー:repuser
    • パスワード:*******
スキーマ生成
  • Database action:作成
  • Scripts generation:デフォルト(なし)
プロパティー
名前
hibernate.dialectorg.hibernate.dialect.MySQL5Dialect
hibernate.show_sqltrue
hibernate.format_sqltrue

DBUtilクラスを作成。

ここまでをGitにコミット
$ git add .

$ git commit -m "Add database files"
[master 32b0636] Add database files
 2 files changed, 38 insertions(+)
 create mode 100644 src/META-INF/persistence.xml
 create mode 100644 src/utils/DBUtil.java

今日の反省と明日の目標。

今日はHerokuでwebアプリをデプロイする方法について学びました。思っていたよりも3倍ぐらい簡単で拍子抜けしちゃった。ただ、実用的かと言われると微妙なところがありますね、もちろん無料プランの話です。試験的なものや小さめのサービスだったら使えるかも。

それでいろいろ調べてみたけど、サーバーはクラウドが良さそうな気がしています。AWSやGCP、Azureなどがあるそうですが、どれが良いのかはまだピンと来ないのが実情です。ポートフォリオはできればちゃんとしたのを作りたいですね。

最後に、日報管理システムを作っていくにあたり、初期設定だけ機械的に済ましておきました。明日からはログイン機能も含めたサーブレットやフィルターを学習するので面白そうです。

閉じる