Heroku 無料プランを使ってみよう (Mattermostを例に)

DX向けチャットツール Mattermost を題材に、はじめてのHeroku

無料プランのあるPaaSである、「Heroku(へろく)」の登録と、Mattermost 6.3.9 を例にアプリケーションの簡単なデプロイ(導入)について取り扱います。

令和4年度、にいがた市民大学「通販から飛行機まで、あらゆる分野で使われるクラウド」のハンズオン資料を兼ねています。

目次

関連コンテンツ


Herokuについて

Herokuは、PaaS (プラットフォーム アズ ア サービス) に分類されるクラウドコンピューティングのサービスです。米国のセールスフォース・ドットコムが運営しています。無料プランがあり、利用規約に基づき、使用は16歳以上の方向けです。セールスフォースドットコムの日本法人は、株式会社セールスフォース・ジャパンで、本社は東京都千代田区の大手町駅近くにオフィスがあります。

Herokuの登録とログイン/ログアウト操作

  1. パソコンで、https://jp.heroku.com/ にアクセスし、画面右上の「新規登録」をクリックします。

    • もしスマートフォンから直接登録しようとしている場合は、画面右上の「三」をタッチ(パソコンでクリック)します。

    • その後に表示される「新規登録」をタッチ(パソコンでクリック)します。

       

  2. 表示される項目に入力します。また、「私はロボットではありません」にチェックを入れます。

  3. 画像による確認を求められることがあります。たとえば、下記のように階段が含まれる画像を選ぶ操作などです。求められた場合は、画面指示に応じて操作します。画像を選んで、「確認」をクリック(スマートフォンではタッチ)します。

  4. 「私はロボットではありません」にチェックが入ります。

  5. 「無料アカウント作成」をクリック(スマートフォンではタッチ)します。

  6. 本人確認メールが届きます。英語メールです。本文内の、https://id.heroku.comとなっているURLをクリック(スマートフォンではタッチ)します。

  7. herokuを使うためのパスワード設定画面が表示されます。「パスワード」と「パスワードの確認」にそれぞれ同じものを入力します。Password requirements を満たす必要があります。「Herokuによるより開発経験のため…」と表示されているチェックボックスは、メールで各種案内が配信されるため、不要の場合は、チェックを外してください。

  8. 「パスワードを設定しログインする」をクリック(スマートフォンではタッチ)します。

  9. ようこそ画面が表示されます。

  10. 「ここをクリックして次に進んでください」をクリック(スマートフォンではタッチ)します。

  11. 2段階認証の設定を求められた場合は、「後で(Later)」をクリック(スマートフォンではタッチ)して次に進みます。<< 表示されない場合があります。

  12. 利用規約の同意画面が表示されます。利用規約を読み、画面下の「承認」をクリック(スマートフォンではタッチ)します。英語表示の場合は、「Accept」をクリック(スマートフォンではタッチ)します。

  13. 「Create a new app」と表示される、「Welcome to Heroku」画面が表示されます。下図のようになれば、Herokuの登録は完了です。これで、HerokuというPaaSが利用可能になります。無料プランが適用されています。

  14. ログアウト(サインアウト)する場合は、画面右上の「New」の上のアバターのアイコンをクリック(スマートフォンではタッチ)します。画面右上にアバターのアイコンがあります。

  15. 「サインアウト」をクリック(スマートフォンではタッチ)します。

  16. これでログアウトができます。

  17. ログイン画面が表示されます。登録したメールアドレスとパスワードを入力することで、ログインすることができます。

もし、画面を閉じてしまった場合は、https://id.heroku.com/login にアクセスすることで、Herokuにログインすることができます。

アプリケーションを動かしてみよう

(1) Button (ボタン)によるアプリケーション導入

Herokuでは、自分で開発したアプリケーションを動かすことができます。また、既存のオープンソースソフトウェアを利用することも可能です。最も簡単な手段は、「Buttons」と呼ばれるボタンを使うことです。Webブラウザ上でボタンを押すだけで、Herokuでアプリケーションを動かすことができます。あなたが開発したアプリケーションを公開する場合は、HerokuのButtonsを使うことは手段の1つになります。

https://elements.heroku.com/buttons

(2) DX向けチャットツール Mattermost(またーもすと) のインストール

パソコンが手元にない場合は、スマートフォンを使うことも多いでしょう。幸い、HerokuとMattermostは、スマートフォンのみでも導入作業ができます。Mattermost は日本語対応のチャットツールです。

下記にアクセスします。

https://heroku.com/deploy?template=https://github.com/mattermost/mattermost-heroku

ログインを求められた場合は、先ほど登録したメールアドレスとパスワードでログインしましょう。ログインした際に、下図のように2段階認証を求められることがあります。その場合は「Later」をクリックします。

「Create New App」画面が表示されます。「App name」に、英数字でアプリケーション名を入力しましょう。アプリケーション名は、ユニークなもので、小文字、数字、-(ハイフン, ダッシュ) が使えます。緑色のチェックが表示されるようにしましょう。

 

画面下に移動します。「MATTERMOST_DOWNLOAD_URI」に表示されているURLのうち、「5.32.1」と表示されている部分を「6.3.9」に書き換えます。これは2か所あります。

「5.32.1」と表示されている部分を「6.3.9」に2か所書き換え後、「Deploy app」をクリック(スマートフォンではタッチ)します。予め準備されているプログラムが動き出し、導入作業が始まりますので、しばらく待ちます。エラーが起きずに、無事に導入(デプロイ)が終われば、次のように表示されます。

「View」をクリック(スマートフォンではタッチ)します。Mattermostの初期セットアップ画面が表示されます。「View in Browser」をクリック(スマートフォンではタッチ)します。しばらく英語ですが、後で日本語画面に変更することができます。

管理者となるユーザー名とメールアドレスを入力します。ユーザー名はログインに使用しますので、英数字にしましょう。

入力後、「Create Account」をクリックします。「Create a team」をクリック(スマートフォンではタッチ)します。

チーム名を入力します。わかりやすく、ここは、DX Team としましょう。入力後、「Next」をクリック(スマートフォンではタッチ)します。

「Finish」をクリック(スマートフォンではタッチ)します。

Mattermostにチャットのための部屋、「DX Team」が作成されました。部屋の中には「チャンネル」と呼ばれる、議題別に話せる場所を作ることができます。
標準では、Town Square というチャンネルが用意されます。Town Squareは、雑談する場所ですね。

(3) ユーザー設定

Mattermostを使う上で、あなた自身の設定を行います。たとえば、プロフィール情報を入力したり、日本語画面に変更するなどです。プロフィール情報を求められていますが、後からでも設定できますので、ここでは日本語化を優先しましょう。
画面を下に移動します。

「Skip Getting Started」をクリック(スマートフォンではタッチ)します。

画面右上の「三」をクリック(スマートフォンではタッチ)します。画面を日本語化していきます。

「Profile」をクリック(スマートフォンではタッチ)します。

「Display」をクリック(スマートフォンではタッチ)します。

「Language」の項目で、「English(US)」と表示されている箇所をクリック(スマートフォンではタッチ)します。

「日本語」に変更します。変更後、「Save」をクリック(スマートフォンではタッチ)します。

日本語表示に切り替わります。画面右上、左上の「設定」の反対側にある「X」をクリック(スマートフォンではタッチ)します。

Town Square のチャンネルも日本語表示に切り替わりました。

これで、チャットができます。とはいえ、自分以外誰もいないので招待しましょう。

(4) 招待する

「ワークスペースに他の人を招待する」をクリック(スマートフォンではタッチ)します。この時点では、まだメールサーバーの設定を行っていませんので、「送信先」にメールアドレスを入れても招待できません。そこで、画面下の「招待リンクをコピー」を使います。

「招待リンクをコピー」をクリック(スマートフォンではタッチ)して、コピーしたURLを招待したい人に伝えます。メールなどに貼りつければ良いでしょう。メールを送信して招待します。

メールを受信した人は、メール内のURLをクリック(スマートフォンではタッチ)すると、ユーザー作成画面が表示されます。ユーザー作成後、個別に日本語化する必要があります。

パソコンから、Mattermostにアクセス

スマートフォンではなく、パソコンからアクセスすることで、Mattermostの管理画面( システムコンソール ) にアクセスすることができます。パソコンからアクセスする場合は、HerokuのApp Name が、mychat の場合、
https://mychat.herokuapp.com となります。mychatの部分は、Herokuに登録したApp Nameのため、それぞれ異なります。
Mattermostのインストール時に登録した管理者のユーザー名とパスワードでログインします。

管理画面 (システムコンソール) で全体を日本語化する

この操作を行うことで、招待時のユーザー作成など、すべて日本語化します。

画面左上の点が9つ正方形に並んでいる部分をクリックします。

「システムコンソール」をクリックします。

管理画面 (システムコンソール) が表示されます。無料の「Starter」プランが適用されていることがわかります。

画面左側で、「言語」設定をクリックします。下図のように、「デフォルトのサーバー言語」と「デフォルトのクライアント言語」として、「日本語」に変更し、「保存する」をクリックします。

管理画面(システムコンソール)から抜けるには、「< ○○〇に戻る」をクリックするか、画面左上の「三」>>「ログアウト」の順にクリックします。

ログアウトしてみるとすぐにわかりますが、先ほどまで英語だったログイン画面が、日本語に切り替わりました。

Mattermost上で、チームの追加

Mattermostインストール時に作成したチームは1つだけなので、他にもチームを作りたいことがあります。たとえば、他の部門もMattermostを使いたい場合などです。

管理者としてMattermostにアクセスします。下図はスマートフォンからログインした場合です。

画面右上の「三」>>「チームを作成する」の順にクリックします。

チーム名を入力し、チームを作成します。チーム名には日本語を含めことも可能です。チーム名を入力後、「次へ」をクリックします。

チームのURLを指定します。URLに使える文字は英数字とダッシュです。チームURLを入力後、「完了」をクリックします。

「ITサポート」というチームが作成され、同時にチーム内にTown Squareのチャンネルが用意されました。

画面左側のサイドバーで、DXをクリックすると、作成済みのDX Teamに表示を切り替えることができます。これは1人で2つのチームに所属しているためです。

無料プランの制限

Herokuの無料プランでは、稼働中のアプリケーションに対して、30分間なにもアクションがなければ、休眠状態となります。休眠状態の時にアクセスがあると、アプリケーションが起動しますが、起動するまで時間を要します。
そこで、休眠状態にせずに稼働し続ける方法があります。「Heroku 無料プランの30分自動停止回避方法」をご覧ください。

無料プランの制約はこちら >> https://jp.heroku.com/pricing にアクセスし、「詳細スペックの確認」をクリックしてください。

Herokuアプリケーションの削除

https://dashboard.heroku.com/apps にアクセスします。表示された一覧から、削除対象のアプリケーション名をクリックします。

「settings」タブをクリックします。

画面を下に移動し、「Delete app」をクリックします。

削除のための確認画面が表示されます。紫色の枠内に、対象のアプリケーション名を入力し、「Delete app」をクリックします。これで、アプリケーション削除ができます。

参考資料

Heroku ドキュメント

Mattermost ドキュメント

Heroku関連コンテンツ