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

2020 4 Aug

Tue, 4 Aug 2020 21:52:38 Sun, 4 Apr 2021 13:06:43

@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

package filters;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

/**
 * Servlet Filter implementation class EncodingFilter
 */
@WebFilter("/*")
public class EncodingFilter implements Filter {

    /**
     * Default constructor.
     */
    public EncodingFilter() {
        // TODO Auto-generated constructor stub
    }

    /**
     * @see Filter#destroy()
     */
    public void destroy() {
        // TODO Auto-generated method stub
    }

    /**
     * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
     */
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        chain.doFilter(request, response);
    }

    /**
     * @see Filter#init(FilterConfig)
     */
    public void init(FilterConfig fConfig) throws ServletException {
        // TODO Auto-generated method stub
    }

}

サーブレットを作成。

src / controllers / toppage

package controllers.toppage;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class TopPageIndexServlet
 */
@WebServlet("/index.html")
public class TopPageIndexServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public TopPageIndexServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/topPage/index.jsp");
                rd.forward(request, response);
        }

}

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

JSPを作成。

WebContent / WEB-INF / views / layout

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>日報管理システム</title>
        <link rel="stylesheet" href="<c:url value='/css/reset.css' />">
        <link rel="stylesheet" href="<c:url value='/css/style.css' />">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>日報管理システム</h1>
            </div>
            <div id="content">
                ${param.content}
            </div>
            <div id="footer">
                by Keiten Kiki.
            </div>
        </div>
    </body>
</html>

WebContent / WEB-INF / views / topPage

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="../layout/app.jsp">
    <c:param name="content">
        <h2>日報管理システムへようこそ</h2>
    </c:param>
</c:import>

CSSを用意。

WebContent / css

@CHARSET "UTF-8";
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

@CHARSET "UTF-8";

body {
    color: #333333;
    font-family: "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", Helvetica,
        Arial, sans-serif;
}

#header {
    width: 100%;
    height: 70px;
    background-color: #333333;
}

#content {
    width: 94%;
    margin-top: 15px;
    padding-left: 3%;
}

h1 {
    width: 94%;
    padding-top: 17px;
    padding-left: 3%;
    font-size: 24px;
    color: #eeeeee;
}

h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

li {
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    margin-top: 15px;
    margin-bottom: 15px;
}

a {
    text-decoration: none;
    color: #24738e;
}

table, tr, th, td {
    border: 1px solid #cccccc;
}

table {
    width: 100%;
    table-layout: fixed;
}

th {
    width: 26%;
    padding: 10px 2%;
}

td {
    width: 66%;
    padding: 10px 2%;
}

button {
    font-size: 14px;
    padding: 5px 10px;
}

#footer {
    text-align: center;
}

#flush_success {
    width: 100%;
    padding-top: 28px;
    padding-left: 2%;
    padding-bottom: 28px;
    margin-bottom: 15px;
    color: #155724;
    background-color: #d4edda;
}

#flush_error {
    width: 100%;
    padding-top: 28px;
    padding-left: 2%;
    padding-bottom: 28px;
    margin-bottom: 15px;
    color: #721c24;
    background-color: #f8d7da;
}

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

package utils;

import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;

public class DBUtil {
    private static final String PERSISTENCE_UNIT_NAME = "daily_report_system";
    private static EntityManagerFactory emf;

    public static EntityManager createEntityManager() {
        return _getEntityManagerFactory().createEntityManager();
    }

    private static EntityManagerFactory _getEntityManagerFactory() {
        if (emf == null) {
            emf = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);
        }

        return emf;
    }
}

ここまでを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などがあるそうですが、どれが良いのかはまだピンと来ないのが実情です。ポートフォリオはできればちゃんとしたのを作りたいですね。

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

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

今日の学習時間。

学習内容について。

Herokuでデプロイする手順。

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

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

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

EncodingFilterを追加。

サーブレットを作成。

JSPを作成。

CSSを用意。

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

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

JPAプロジェクトへ変換。

DBUtilクラスを作成。

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

To comment Cancel reply