LoginSignup
5
0

More than 1 year has passed since last update.

AizuHack LINEBot勉強会 Vol.4

Last updated at Posted at 2022-07-13

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

GCPの無料枠について

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

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

  1. こちらにアクセスして、「無料で開始」をクリック
    スクリーンショット 2022-07-12 10.24.33.png
  2. 必要事項を入力して「続行」をクリック
    スクリーンショット 2022-07-12 10.37.11.png
  3. 電話番号を入力して「コードを送信」をクリック
    スクリーンショット 2022-07-12 10.38.12.png
  4. SMSで確認コードが届くので、入力して「確認」をクリック
    スクリーンショット 2022-07-12 10.39.11.png
  5. クレジットカード番号、住所などを入力して「無料トライアルを開始」をクリック
    スクリーンショット 2022-07-12 10.46.58.png

これで作成完了です!

スクリーンショット 2022-07-12 10.55.50.png

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

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

  1. こちらのGitHubリポジトリにアクセスする
  2. 右上の「Fork」を選択してリポジトリをForkする
    スクリーンショット 2022-07-11 20.11.31.png
  3. Ownerに自分のアカウントを選択して、「Create fork」をクリックする
    スクリーンショット 2022-07-11 20.22.23.png

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

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

  1. GCPのコンソールを開き、プロジェクトを選択するプルダウンをクリックする
    スクリーンショット 2022-07-12 10.57.44.png
  2. プロジェクトの選択画面が表示されるので、「新しいプロジェクト」を選択する
    スクリーンショット 2022-07-11 20.51.16.png
  3. 好きなプロジェクト名を入力して、「作成」をクリックする
    スクリーンショット 2022-07-11 20.53.57.png
  4. 再度プロジェクトを選択するプルダウンをクリックして、先ほど作成したプロジェクトを選択する(表示されない場合はリロードする)
    スクリーンショット 2022-07-11 20.50.09.png
    スクリーンショット 2022-07-11 20.57.15.png

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

Secretを登録しよう

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

  1. 上にある検索バーをクリックし、「secret manager」と検索する
    スクリーンショット 2022-07-11 20.59.30.png
  2. 「Secret Manager」を選択する
    スクリーンショット 2022-07-11 21.03.14.png
  3. 「有効にする」を選択
    スクリーンショット 2022-07-11 21.03.43.png
  4. 「シークレットを作成」を選択
    スクリーンショット 2022-07-11 21.09.22.png
  5. 「名前」にCHANNEL_ACCESS_TOKEN、「シークレットの値」にMessaging APIのチャネルアクセストークンを入力し、「シークレットを作成」をクリック
    スクリーンショット 2022-07-11 21.54.38.png
  6. シークレットが作成されるので、シークレットの一覧ページに戻る
    スクリーンショット 2022-07-11 22.17.02.png
  7. もう一度「シークレットを作成」をクリック
    スクリーンショット 2022-07-11 22.17.50.png
  8. 「名前」にCHANNEL_SECRET、「シークレットの値」にMessaging APIのチャネルシークレットを入力し、「シークレットを作成」をクリックする
    スクリーンショット 2022-07-11 22.28.18.png

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

Cloud Runを作成しよう

次はCloud Runを作成します

  1. 検索バーにcloud runと入力します
    スクリーンショット 2022-07-11 20.59.30.png
  2. Cloud Runを選択します
    スクリーンショット 2022-07-11 22.32.30.png
  3. 「サービスの作成」を選択する
    スクリーンショット 2022-07-11 22.37.27.png
  4. 「ソース リポジトリから新しいリビジョンを継続的にデプロイする」を選択し、「SET UP WITH CLOUD BUILD」をクリックする
    スクリーンショット 2022-07-11 22.39.04.png
  5. 「CLOUD BUILD APIを有効にする」、「CONTAINER ANALYSIS APIを有効にする」をクリック
    スクリーンショット 2022-07-11 22.40.44.png
  6. 「認証」をクリック
    スクリーンショット 2022-07-12 12.55.32.png
  7. 「続行」を選択
    スクリーンショット 2022-07-12 12.56.27.png
  8. GitHubのページに飛ばされるので、認証をする
  9. 「Manage connected repositories」をクリックする
    スクリーンショット 2022-07-12 12.58.14.png
  10. 自分のアカウントを選択する
    スクリーンショット 2022-07-11 22.45.39.png
  11. 「Only select repositories」を選択し、aizuhack-botリポジトリを選択する
    スクリーンショット 2022-07-11 22.46.39.png
  12. 「Install」をクリック
    スクリーンショット 2022-07-11 22.47.56.png
  13. 「リポジトリ」でaizuhack-botを選択し、チェックボックスにチェックをして「次へ」をクリック
    スクリーンショット 2022-07-11 22.49.07.png
  14. 「ブランチ」は^master$、「BuildType」はGo、Node.js、Python、Java、.NET Core、Ruby(Google Cloud Buildpacks を使用)を選択し、「保存」をクリックする
    スクリーンショット 2022-07-11 22.51.18.png
  15. 「リージョン」はasia-northeast1(東京)を選択
    スクリーンショット 2022-07-11 22.53.39.png
  16. 「認証」は未認証の呼び出しを許可を選択
    スクリーンショット 2022-07-11 22.55.04.png
  17. 「コンテナポート」には3000を入力
    スクリーンショット 2022-07-11 22.56.24.png
  18. 「変数とシークレット」を選択
    スクリーンショット 2022-07-12 17.28.07.png
  19. 最初のビルドを成功させるため、以下のようにダミーの環境変数を設定する
    スクリーンショット 2022-07-12 17.32.25.png
  20. 以上の操作を行うと、設定は以下のようになる
    FireShot Capture 003 - Cloud Run – aizuhack-prj – Google Cloud Console - console.cloud.google.com.png
    スクリーンショット 2022-07-12 17.33.04.png
  21. ページ最下部にある「作成」をクリックする
  22. しばらくするとデプロイが完了するので、「新しいリビジョンの編集とデプロイ」をクリックする
    スクリーンショット 2022-07-12 13.07.29.png
  23. 「変数とシークレット」をクリックする
    スクリーンショット 2022-07-12 13.17.41.png
  24. 環境変数の右側にカーソルを持っていくとゴミ箱マークのボタンが出てくるので、それをクリックしてダミーの環境変数を両方削除する
    スクリーンショット 2022-07-12 17.41.53.png
    スクリーンショット 2022-07-12 17.42.03.png
  25. 「シークレットの参照」をクリック
    スクリーンショット 2022-07-11 23.00.43.png
  26. 「Secret」はCHANNEL_ACCESS_TOKEN、「参照の方法」は「環境変数として公開」を選択して、「名前1」にchannelAccessTokenと入力して「バージョン1」はlatestを選択する
    スクリーンショット 2022-07-11 23.02.45.png
  27. 以下のような表示が出るので、「付与」をクリックする
    スクリーンショット 2022-07-11 23.14.34.png
  28. 「完了」をクリックする
  29. 再び「シークレットの参照」をクリックする
    スクリーンショット 2022-07-11 23.04.40.png
  30. 「Secret」はCHANNEL_SECRET、「参照の方法」は「環境変数として公開」を選択して、「名前1」にchannelSecretと入力して「バージョン1」はlatestを選択する
    スクリーンショット 2022-07-11 23.05.34.png
  31. 以下のような表示が出るので、「付与」をクリックする
    スクリーンショット 2022-07-11 23.14.34.png
  32. 「完了」をクリックする
  33. 「デプロイ」をクリックする
    スクリーンショット 2022-07-12 13.24.24.png

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

Webhook URLを設定しよう

  1. 5分ほど待つとデプロイが完了するので、サービス名の右にあるURLをコピーする
    スクリーンショット 2022-07-11 23.33.48.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

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

スクリーンショット 2022-07-12 13.47.58.png

さいごに

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

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0