AizuHack LINEBot勉強会 Vol.4

# AizuHack LINEBot勉強会 Vol.4

## 資料一覧

- [LINEBotとは](https://docs.google.com/presentation/d/1U1vl67gJNOdO5in7H__jPXWieT3Lv0cFmv350AmAKHA/edit?usp=sharing)
- [AizuHack LINEBot勉強会 Vol.1](https://qiita.com/shinbunbun_/items/7efef6db31514831143d)
- [AizuHack LINEBot勉強会 Vol.2](https://qiita.com/shinbunbun_/items/4034e9c2c7553ed3107e)
- [AizuHack LINEBot勉強会 Vol.3](https://qiita.com/shinbunbun_/items/0dfc42584518dc60e3e7)
- AizuHack LINEBot勉強会 Vol.4(本記事)

## はじめに

こんにちは、会津大学学部二年のしんぶんぶんです。
今回はGCP(Google Cloud Platform)のCloud Runへのデプロイ方法について解説します。

## 今回やる内容について

前回まではBotのサーバをローカルで立ててngrokで外部公開していましたが、PCを落とすとサーバも落ちてしまうため、このままでは作ったBotをリリースできません。今回はBotをクラウドにホスティングすることで、サービスとしてリリースできる形にします。

今回はGCPのCloud Runというサービスを使用し、BotのソースコードがあるGitHubリポジトリのmasterブランチにpushされたら自動でデプロイされるような、継続的デプロイ（CD）を実装します。

継続的デプロイの構成図は以下のようになります。

![cloud_run_bot.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/3f12c2de-ecb7-af32-f512-61193903642a.png)

## GCPの無料枠について

今回使う中でSecret Managerだけ無料枠がありません。微量ですが課金が発生するため、ご注意ください。
課金を発生させたくない場合は、Secret Managerを使う作業をスキップして、Cloud Runの環境変数に直接TokenとSecretを保存する方法をとることもできます（非推奨ですが）。
本記事の途中でdummyの環境変数を登録する操作があるため、その際に本物の値を入力してください。

## GCPのアカウントを作成しよう

1. [こちら](https://cloud.google.com/free)にアクセスして、「無料で開始」をクリック
![スクリーンショット 2022-07-12 10.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/8e3ed0c6-518d-ad7f-a9f2-f6f0abb3f727.png)
2. 必要事項を入力して「続行」をクリック
![スクリーンショット 2022-07-12 10.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/7a37cd24-0ca8-190c-10f4-8aed4daac620.png)
3. 電話番号を入力して「コードを送信」をクリック
![スクリーンショット 2022-07-12 10.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/793eff0a-2381-3105-b2bf-2044cecfdad1.png)
4. SMSで確認コードが届くので、入力して「確認」をクリック
![スクリーンショット 2022-07-12 10.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/6e1c55dd-7bb1-a8e2-5a0b-5d41a5d82329.png)
5. クレジットカード番号、住所などを入力して「無料トライアルを開始」をクリック
![スクリーンショット 2022-07-12 10.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/5965f8f2-a652-45ea-8541-31acb3d0e0a5.png)

これで作成完了です！

![スクリーンショット 2022-07-12 10.55.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/60e9a64c-0554-9c56-b81d-8eb4ef74b1df.png)

## リポジトリをフォークしよう

自分のアカウントにサンプルコードのリポジトリをForkします

1. [こちら](https://github.com/shinbunbun/aizuhack-bot)のGitHubリポジトリにアクセスする
2. 右上の「Fork」を選択してリポジトリをForkする
![スクリーンショット 2022-07-11 20.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/a94174b0-b075-cfaa-45ed-d44d9d9972a0.png)
3. Ownerに自分のアカウントを選択して、「Create fork」をクリックする
![スクリーンショット 2022-07-11 20.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/8e676f81-692b-202b-e032-16a9ab681670.png)

これでフォーク完了です！

## GCPのプロジェクトを作成しよう

1. GCPのコンソールを開き、プロジェクトを選択するプルダウンをクリックする
![スクリーンショット 2022-07-12 10.57.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/9ae8fc32-5562-4423-e27c-e1c037a600c1.png)
2. プロジェクトの選択画面が表示されるので、「新しいプロジェクト」を選択する
![スクリーンショット 2022-07-11 20.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/125105c1-0739-4e2d-8d2d-907e377778e5.png)
3. 好きなプロジェクト名を入力して、「作成」をクリックする
![スクリーンショット 2022-07-11 20.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/de02ae91-88c3-8ad5-4887-c3ef4ceeebdc.png)
4. 再度プロジェクトを選択するプルダウンをクリックして、先ほど作成したプロジェクトを選択する（表示されない場合はリロードする）
![スクリーンショット 2022-07-11 20.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/52bbbe54-fff3-31fd-08b1-17d65d60253e.png)
![スクリーンショット 2022-07-11 20.57.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/8fd97aee-c50a-1025-414a-6c8c003e9593.png)

これでプロジェクトの作成が完了しました！

## Secretを登録しよう

環境変数としてサーバに読み込ませるシークレットを登録します。

1. 上にある検索バーをクリックし、「secret manager」と検索する
![スクリーンショット 2022-07-11 20.59.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/c76566f5-f943-6c06-3b3c-a1f6c6d8d3fc.png)
2. 「Secret Manager」を選択する
![スクリーンショット 2022-07-11 21.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/d2ea3b0e-c482-adb4-fbb1-1b8c1dcd4d49.png)
3. 「有効にする」を選択
![スクリーンショット 2022-07-11 21.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e4b3d1ba-0d62-ea77-0cc6-d1a2819ebef9.png)
4. 「シークレットを作成」を選択
![スクリーンショット 2022-07-11 21.09.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/11bc81ed-efd8-ddb3-0e85-e577522c1d26.png)
5. 「名前」に`CHANNEL_ACCESS_TOKEN`、「シークレットの値」にMessaging APIのチャネルアクセストークンを入力し、「シークレットを作成」をクリック
![スクリーンショット 2022-07-11 21.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/228dbaab-fd8a-b61c-7a5a-586fb300434f.png)
6. シークレットが作成されるので、シークレットの一覧ページに戻る
![スクリーンショット 2022-07-11 22.17.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/8636a675-c74e-66f1-65c6-1f4d111ae29f.png)
7. もう一度「シークレットを作成」をクリック
![スクリーンショット 2022-07-11 22.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/72a39e54-f58b-020d-a0d1-bf699f39c00c.png)
8. 「名前」に`CHANNEL_SECRET`、「シークレットの値」にMessaging APIのチャネルシークレットを入力し、「シークレットを作成」をクリックする
![スクリーンショット 2022-07-11 22.28.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/0af5072c-8771-2787-9e8c-07b4e97f74ed.png)

これでシークレットの作成が完了しました！

## Cloud Runを作成しよう

次はCloud Runを作成します

1. 検索バーに`cloud run`と入力します
![スクリーンショット 2022-07-11 20.59.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/c76566f5-f943-6c06-3b3c-a1f6c6d8d3fc.png)
2. Cloud Runを選択します
![スクリーンショット 2022-07-11 22.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/ad7fd365-33b8-f187-8ae3-1c5fc3edf7d9.png)
3. 「サービスの作成」を選択する
![スクリーンショット 2022-07-11 22.37.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/0a5a0725-f6d0-ec83-810c-b5960d631a80.png)
4. 「ソース リポジトリから新しいリビジョンを継続的にデプロイする」を選択し、「SET UP WITH CLOUD BUILD」をクリックする
![スクリーンショット 2022-07-11 22.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/b0155323-06f9-97bc-273b-9b9cb1ef0b2b.png)
5. 「CLOUD BUILD APIを有効にする」、「CONTAINER ANALYSIS APIを有効にする」をクリック
![スクリーンショット 2022-07-11 22.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/ae88103a-a035-50d8-45c7-3bd72faf9ca3.png)
6. 「認証」をクリック
![スクリーンショット 2022-07-12 12.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/0fd6772f-6560-ca6c-f582-268253ae93ae.png)
7. 「続行」を選択
![スクリーンショット 2022-07-12 12.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/9fdfdc51-90cc-1fbc-07d3-5e466162bcba.png)
8. GitHubのページに飛ばされるので、認証をする
9. 「Manage connected repositories」をクリックする
![スクリーンショット 2022-07-12 12.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/c2908772-73db-adb5-83cf-5eb924b7a374.png)
10.  自分のアカウントを選択する
![スクリーンショット 2022-07-11 22.45.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/4624c15d-e55e-782b-1383-6ebfd02671f3.png)
11. 「Only select repositories」を選択し、`aizuhack-bot`リポジトリを選択する
![スクリーンショット 2022-07-11 22.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/fc626b34-2bda-61cf-c241-93e1c1d9aa94.png)
12. 「Install」をクリック
![スクリーンショット 2022-07-11 22.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/272d2e23-1fc0-9b36-2d58-c6f126ec9b9a.png)
13. 「リポジトリ」で`aizuhack-bot`を選択し、チェックボックスにチェックをして「次へ」をクリック
![スクリーンショット 2022-07-11 22.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/ed33f666-2a55-2398-5833-0e35a3e6583c.png)
14. 「ブランチ」は`^master$`、「BuildType」は`Go、Node.js、Python、Java、.NET Core、Ruby（Google Cloud Buildpacks  を使用）`を選択し、「保存」をクリックする
![スクリーンショット 2022-07-11 22.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/cd4b45d0-7167-0283-0cda-1e6574dfa883.png)
15. 「リージョン」は`asia-northeast1(東京)`を選択
![スクリーンショット 2022-07-11 22.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/c204ee3e-182c-9bdf-fa79-f1b923b829ce.png)
16. 「認証」は`未認証の呼び出しを許可`を選択
![スクリーンショット 2022-07-11 22.55.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/1700e84f-9d56-334f-45ca-8a9038671cd5.png)
17. 「コンテナポート」には`3000`を入力
![スクリーンショット 2022-07-11 22.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/c097a161-efe1-5091-22e6-256a077a8e9e.png)
18. 「変数とシークレット」を選択
![スクリーンショット 2022-07-12 17.28.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/5ce9bcc8-1e7b-2e8a-17ee-261fe9ddc5cc.png)
19. 最初のビルドを成功させるため、以下のようにダミーの環境変数を設定する
![スクリーンショット 2022-07-12 17.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/df64a2fe-1ebf-6820-b807-e4ee26ec096c.png)
20. 以上の操作を行うと、設定は以下のようになる
![FireShot Capture 003 - Cloud Run – aizuhack-prj – Google Cloud Console - console.cloud.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/48481bdf-5b55-a506-21eb-60b22adc7fd6.png)
![スクリーンショット 2022-07-12 17.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/3ca4db63-515d-8e95-f319-8700a91c2c62.png)
21.  ページ最下部にある「作成」をクリックする
22. しばらくするとデプロイが完了するので、「新しいリビジョンの編集とデプロイ」をクリックする
![スクリーンショット 2022-07-12 13.07.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/ca995a86-1f9c-df7c-657a-49dd2c88bd18.png)
24. 「変数とシークレット」をクリックする
![スクリーンショット 2022-07-12 13.17.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/f9f85fe4-b691-19b9-8978-463526b914d3.png)
25.  環境変数の右側にカーソルを持っていくとゴミ箱マークのボタンが出てくるので、それをクリックしてダミーの環境変数を両方削除する
![スクリーンショット 2022-07-12 17.41.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e8bb788f-9d1e-5c75-755f-4fe1db474ccd.png)
![スクリーンショット 2022-07-12 17.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e7cfa0ac-404f-4525-b1ab-62ab9b96247c.png)
26.  「シークレットの参照」をクリック
![スクリーンショット 2022-07-11 23.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e592b8be-bd3c-b9eb-d2f0-a3f016dfde57.png)
27.  「Secret」は`CHANNEL_ACCESS_TOKEN`、「参照の方法」は「環境変数として公開」を選択して、「名前1」に`channelAccessToken`と入力して「バージョン1」は`latest`を選択する
![スクリーンショット 2022-07-11 23.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e9496a05-b18b-ea36-a10e-2852f9ed1045.png)
28. 以下のような表示が出るので、「付与」をクリックする
![スクリーンショット 2022-07-11 23.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e353931f-586f-459d-d091-98b010320410.png)
29. 「完了」をクリックする
30.  再び「シークレットの参照」をクリックする
![スクリーンショット 2022-07-11 23.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/eaee7cda-a38e-1d69-97dd-dc64a28e472b.png)
31.  「Secret」は`CHANNEL_SECRET`、「参照の方法」は「環境変数として公開」を選択して、「名前1」に`channelSecret`と入力して「バージョン1」は`latest`を選択する
![スクリーンショット 2022-07-11 23.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/35edc25a-c527-f2a6-b1d7-e72ed0f6ed51.png)
32. 以下のような表示が出るので、「付与」をクリックする
![スクリーンショット 2022-07-11 23.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e353931f-586f-459d-d091-98b010320410.png)
33. 「完了」をクリックする
34. 「デプロイ」をクリックする
![スクリーンショット 2022-07-12 13.24.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/e66e55c6-b4f8-e841-a96c-7e88050c718a.png)

これでCloud Runの作成は完了です！

## Webhook　URLを設定しよう

1. 5分ほど待つとデプロイが完了するので、サービス名の右にあるURLをコピーする
![スクリーンショット 2022-07-11 23.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/b9c0395f-ac9a-36a9-45ae-514b39472d6a.png)
2. URLにアクセスし、`Deploy succeeded`と表示されることを確認する（ビルドが終わっていないことがあるので、エラーが表示された場合は5分くらい待ってから再試行する）
3. Messaging APIのチャネルのページに移動し、「Messaging API設定」→「Webhook設定」→「Webhook URL」の「編集」をクリックし、コピーしたURLの末尾に`/webhook`を付与したものを入力する（e.g.`https://XXXXXX.XXXXXXX.a.run.app/webhook`）
4. 「検証」ボタンをクリックし、「成功」と表示されることを確認する

以上でCloud Runへのデプロイは完了です！お疲れ様でした！

## ログの確認方法

「ログ」のタブを選択すると、サーバのログが確認できます。下にスクロールするほど新しいログになり、最下部でさらにスクロールするとログが更新されます。リクエストがきてからログが表示されるまでには若干のラグがあります。
![スクリーンショット 2022-07-12 13.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/d1ecd854-7fba-81d6-ed2b-7a7e7b448937.png)

右上のこのボタンを押すと、さらに詳しくログの検索や絞り込みができます。

![スクリーンショット 2022-07-12 13.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/50d2ec6a-5f84-29fc-899c-da1023584217.png)

## さいごに

皆さんここまでお疲れ様でした！
Vol.1でLINEBotの基礎を学び、Vol.2でさらにリッチなLINEBotの作り方、Vol.3で外部API, DBとの連携、Vol.4（今回）でクラウドへのデプロイ方法を学びました。ここまでの知識があればたいていのLINEBotは作ってリリースできるようになるかと思います。皆さんも是非LINEBotをたくさん作って気軽にリリースしてみてください！