@Contents
今日の学習時間。
- 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ファイルを作成。
message_board
を右クリック→Maven→プロジェクトの更新message_board
を右クリック→エクスポート→WARファイルを選択- 場所をホームディレクトリ直下に指定し作成
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分ぐらいかかる
https://servlet-message-board-kiki.herokuapp.com/index
一応載せるけど、ただの掲示板みたいな感じ。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を追加。
src
/ filters
サーブレットを作成。
src
/ controllers
/ toppage
- URLマッピングは
/TopPageIndexServlet
から/index.html
に変更/index.html
で http://localhost:8080 という記述のみでトップページにアクセスできる
JSPを作成。
WebContent
/ WEB-INF
/ views
/ layout
WebContent
/ WEB-INF
/ views
/ topPage
CSSを用意。
WebContent
/ 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.dialect | org.hibernate.dialect.MySQL5Dialect |
hibernate.show_sql | true |
hibernate.format_sql | true |
DBUtilクラスを作成。
src
/ utils
ここまでを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などがあるそうですが、どれが良いのかはまだピンと来ないのが実情です。ポートフォリオはできればちゃんとしたのを作りたいですね。
最後に、日報管理システムを作っていくにあたり、初期設定だけ機械的に済ましておきました。明日からはログイン機能も含めたサーブレットやフィルターを学習するので面白そうです。