Chapter 02

環境構築 & Webアプリ起動

arahabica
arahabica
2022.01.17に更新

2.1 GitPodの拡張の導入

Google Chromeにて、gitpod の拡張を追加します。

2.2 GitPodの追加

https://github.com/Arahabica/liff-rails-handson-2022 にアクセスし、GitPodに追加します。

GitPod

Githubからログインし、プロジェクトを作成します。

ログインが成功すると、下記のようなページが開きます。

GitPodInitial

2.3 アプリケーションの起動

環境変数を.envファイルで管理するので、まずこれを.env.defaultからコピーして作ります。

$ cp .env.default .env

そして、.envファイルのYOUR_DB_PASSWORDの部分をランダムな文字列で書き換えてください。
下記は一例です。

- DB_PASSWORD=YOUR_DB_PASSWORD
+ DB_PASSWORD=7qfewafgsdgarewa0lbfqfx8

次に、アプリケーションをビルドします。docker-composeを利用しているプロジェクトになっているので下記のようなコマンドになります。

$ docker-compose build

アプリケーションを起動します。

$ docker-compose up

docker-composeのログからアプリケーションが起動したことを確認したら、新しいTerminalを開きます。
openOtherTerminal

DBの初期化、マイグレーション、シードの登録を行います。

$ docker-compose run web rails db:create
$ docker-compose run web rails db:migrate
$ docker-compose run web rails db:seed_fu

2.4 公開

次にこのアプリケーションを公開していきます。

下図のようにRemote Explorerタブをクリックし、3000ポートを公開し、「Open Browser」ボタンを押します。

MakePublic

すると、下記のようなエラー画面になるはずです。

RailsError001

これはRailsの設定にgitpodが発行したホストが登録されていないために発生するものになります。
.envのHOSTの設定をgitpodが発行したホストに修正して、アプリケーションを再起動すると治ります。

上図の場合は下記のような修正になります。
※環境によってホストの値は違います。

- RAILS_HOST=YOUR_RAILS_HOST
+ RAILS_HOST=3000-salmon-shrew-au9p5250.ws-us25.gitpod.io

その後、docker-compose upをしているTerminalをCtrl+Cで中断し、再度docker-compose upを実行してください。

$ docker-compose up

その後、もう一度同じURLにアクセスすると下記のような画面になります。

initialApp

おめでとうございます🎉スタンプラリーアプリができました!

2.5 アプリを触ってみる。

早速アプリを触っていきましょう。

まず、モバイルが前提のアプリなので、Chromeの開発者ツールでモバイル表示に切り替えます。
次に下図のように、下部にある「テスト用」というボタンをおして、出てきた七福神のリンクをタップします。
InitialApp001

すると、下図のようにスタンプが表示され、スタンプをタップするとスタンプシートにスタンプが押されます。(音が出ます。)

InitialApp002

これを繰り返していくと、下図のようにスタンプが全て揃う形になります。
InitialApp003

実際のアプリの場合はリンクをタップするのではなく、現地でQRコードを読み込むという形になると思います。

2.6 Next Step

おめでとうございます🎉アプリ完成しましたね!
ハンズオンはこれにて終了です🥳

と言いたいところですが、実際はここからがスタートです。
LINEアプリ上で表示するLIFFアプリになっていませんし、「クーポンを送りました」とありますがクーポンは送られていませんし、db/schema.rbを見てみると分かりますが、Userテーブルも作られていないのでユーザごとのスタンプの管理ができていません。(誰かがスタンプを押すと全員に反映される状態です。)

次章では、このWebアプリをLINEアプリ上で表示するLIFFアプリにしていきます。