From 6f640aa124af2f14ff202979cd3ab97422855f51 Mon Sep 17 00:00:00 2001 From: Shane DeWael Date: Wed, 20 Jan 2021 10:19:47 -0800 Subject: [PATCH] Add localized heroku deployment guide --- docs/_deployments/aws-lambda.md | 2 - docs/_deployments/heroku.md | 2 - docs/_deployments/ja_heroku.md | 264 ++++++++++++++++++++++++++++++++ 3 files changed, 264 insertions(+), 4 deletions(-) create mode 100644 docs/_deployments/ja_heroku.md diff --git a/docs/_deployments/aws-lambda.md b/docs/_deployments/aws-lambda.md index 7e1a8b8b1..a17acabb5 100644 --- a/docs/_deployments/aws-lambda.md +++ b/docs/_deployments/aws-lambda.md @@ -5,8 +5,6 @@ slug: aws-lambda lang: en layout: tutorial permalink: /deployments/aws-lambda -redirect_from: - - /deployments --- # Deploying to AWS Lambda diff --git a/docs/_deployments/heroku.md b/docs/_deployments/heroku.md index 27341e764..c74026c2f 100644 --- a/docs/_deployments/heroku.md +++ b/docs/_deployments/heroku.md @@ -5,8 +5,6 @@ slug: heroku lang: en layout: tutorial permalink: /deployments/heroku -redirect_from: - - /deployments --- # Deploying to Heroku diff --git a/docs/_deployments/ja_heroku.md b/docs/_deployments/ja_heroku.md new file mode 100644 index 000000000..bc29cb377 --- /dev/null +++ b/docs/_deployments/ja_heroku.md @@ -0,0 +1,264 @@ +--- +title: Heroku へのデプロイ +order: 0 +slug: heroku +lang: ja-jp +layout: tutorial +permalink: /ja-jp/deployments/heroku +--- +# Heroku へのデプロイ + +
+このガイドでは、[Bolt for JavaScript](/bolt-js/ja-jp)と[Heroku プラットフォーム](https://heroku.com/)を使ってSlack アプリを用意して、デプロイするまでの手順を説明します。全体の流れとしては、Bolt Slack アプリをダウンロードし、Heroku 用の準備を済ませ、デプロイする流れになります。 +
+ +この手順を全て終わらせたら、あなたはきっと️⚡️[getting-started-with-heroku][deploy-heroku-app]のサンプルアプリを動作させたり、それに変更を加えたり、自分のアプリを作ったりすることができるようになるでしょう。 + +--- + +### Bolt Slack アプリを入手する + +Bolt アプリを作るのが初めてという場合は、まず[Bolt 入門ガイド][getting-started-guide]に沿って進めてみましょう。または、以下のテンプレートアプリをクローンしてもよいでしょう。 + +```shell +git clone https://github.com/slackapi/bolt-js-getting-started-app.git +``` + +ダウンロードしたBolt アプリのディレクトリに移動します。 + +```shell +cd bolt-js-getting-started-app/ +``` + +次に、このアプリをHeroku で動かすための準備をします。 + +--- + +### アプリをHeroku で動かすための準備する + +Heroku は、作ったアプリをホストできる柔軟性の高いプラットフォームで、少し設定が必要です。このセクションでは、Bolt アプリに変更を加え、Heroku に対応させます。 + +**1. Git リポジトリを使用する** + +Heroku にアプリをデプロイするには、まずGit リポジトリが必要です。まだGit を使ったことがない場合は、[Git をインストール](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)し、[Git リポジトリを作成](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository)します + +> 💡 前のセクションで`git clone`を使用した場合、Git リポジトリはすでに存在しますので、この手順はスキップできます + +**2. Procfile を追加する** + +Heroku アプリでは、必ず`Procfile`という専用のファイルが必要です。このファイルを使ってHeroku にアプリの起動方法を伝えます。Bolt Slack アプリは、公開されたWeb アドレスを持つWeb サーバーとして起動します。 + +アプリのルートディレクトリに、拡張子なしの`Procfile`という名前のファイルを作成し、次の内容を貼りつけます。 + +```yaml +web: node app.js +``` + +ファイルを保存したら、ローカルのGit リポジトリにコミットします。 + +```shell +git add Procfile +git commit -m "を作成" +``` + +> 💡 既存のBolt アプリを使ってこのガイドに沿って進めている場合は、[Preparing a Codebase for Heroku Deployment](https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment#4-listen-on-the-correct-port)のガイドを参考に、適切なポートをリッスンするようにしてください。 + +--- + +### Heroku ツールをセットアップする + +ローカルマシンでHeroku ツールのセットアップを行います。このツールは、Heroku プラットフォームを使用するアプリの管理、デプロイ、デバッグを行う場合に便利です。 + +**1. Heroku CLI をインストールする** + +Heroku ツールは、コマンドラインインターフェイス（CLI）の形で提供されています。さっそく[macOS、Windows、Linux 用のHeroku CLI](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)をインストールしましょう。macOS では次のコマンドを実行します。 + +```shell +brew install heroku/brew/heroku +``` + +インストールが完了したら、Heroku CLI を試してみましょう。どのようなコマンドが使えるかを一覧表示してみます。 + +```shell +heroku help +``` + +> 💡 `heroku`コマンドが見つからない場合は、パスを更新するため新しいターミナルセッションまたはターミナルタブを開いてください。 + +**2. Heroku CLI にログインする** + +Heroku CLI では、ローカルマシンからHeroku アカウントに接続します。[無料のHeroku アカウントを新規登録](https://heroku.com)して、次のコマンドでHeroku CLI にログインします。 + +```shell +heroku login +``` +> 💡 ファイアウォールを使っている場合、Heroku CLI で使用される[プロキシ環境変数](https://devcenter.heroku.com/articles/using-the-cli#using-an-http-proxy)の設定が必要なことがあります。 + +**3. Heroku CLI へのログインが成功したか確認する** + +ログインできたかどうか確認しましょう。次のコマンドを実行すると、Heroku CLI に現在接続されているアカウント名が表示されます。 + +```shell +heroku auth:whoami +``` + +これでHeroku ツールのセットアップが完了しました。それではHeroku アプリの作成の本編に進みましょう。 + +--- + +### Heroku アプリを作成する + +先ほどインストールしたツールを使って、[Heroku アプリを作成](https://devcenter.heroku.com/articles/creating-apps)します。アプリを作成するときは、ユニークな名前を自分で指定するか、ランダムな名前を生成することができます。 + + +> 💡 [Heroku アプリはあとから名前を変更することもできます](https://devcenter.heroku.com/articles/renaming-apps)が、リモートのGit アドレスとパブリックのWeb アドレスも変更になります。 + +**1. Heroku アプリを作成する** + +ユニークな名前を指定してHeroku アプリを作成します。 + +```shell +heroku create my-unique-bolt-app-name +``` + +または、ランダムな名前を楽しむならこちらで。 + +```shell +heroku create +# Creating sharp-rain-871... done, stack is heroku-18 +# https://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git +``` + +Heroku アプリが作成されると、いくつかの情報が表示されます。これらの情報は次のセクションで使用します。この例では、次のようになります。 + +- アプリ名: `sharp-rain-871` +- Web アドレス: `https://sharp-rain-871.herokuapp.com/` +- 空のリモートGit リポジトリ: `https://git.heroku.com/sharp-rain-871.git` + +**2. Heroku のリモートGit リポジトリを確認する** + +Heroku CLI は、自動的に`heroku`という名前のリモートGit リポジトリをローカルに追加します。リモートGit リポジトリを一覧して、`heroku`が存在することを確認しましょう。 + +```shell +git remote -v +# heroku https://git.heroku.com/sharp-rain-871.git (fetch) +# heroku https://git.heroku.com/sharp-rain-871.git (push) +``` + +**3. アプリをデプロイする** + +Slack アプリの認証情報をHeroku アプリに設定します。 + +```shell +heroku config:set SLACK_SIGNING_SECRET= +heroku config:set SLACK_BOT_TOKEN=xoxb- +``` + +> 💡 認証情報の入手場所がわからない場合、Bolt 入門ガイドで[署名シークレットとトークンのエクスポート](/bolt-js/ja-jp/tutorial/getting-started#トークンとアプリのインストール)について参照してください。 + +ローカルでのアプリの準備と、Heroku アプリの作成が完了しました。次のステップは、デプロイです。 + +--- + +### アプリをデプロイする + +アプリをデプロイするため、ローカルのコードをHeroku にプッシュします。その後Slack アプリの設定を更新し、Heroku アプリに"hello" と声をかけてみましょう。 ✨ + +**1. Heroku にアプリをデプロイする** + +Heroku へのアプリのデプロイには、通常`git push`コマンドを使用します。これにより、ローカルリポジトリのコードがリモートの`heroku`リポジトリにプッシュされます。 + +次のコマンドでアプリをデプロイしましょう。 + +```shell +git push heroku main +``` +Heroku でデプロイされるのは、[master またはmain ブランチ](https://devcenter.heroku.com/articles/git-branches)のコードです。それ以外のブランチにプッシュした場合、デプロイ処理はトリガーされません + +> 💡 Heroku deploys code that's pushed to the [master or main branches](https://devcenter.heroku.com/articles/git-branches). Pushing to other branches will not trigger a deployment. + +最後に、Heroku CLI を使ってWeb サーバーインスタンスを起動します。 + +```shell +heroku ps:scale web=1 +``` + +**2. Slack アプリの設定を更新する** + +次に、Heroku のWeb アドレスをリクエストURL に指定し、Slack からのイベントやアクションがこのURL に送信されるようにします。 + +次のコマンドを使ってHeroku のWeb アドレスを取得します。 + +```shell +heroku info +# ... +# Web URL: https://sharp-rain-871.herokuapp.com/ +``` + +この例では、`https://sharp-rain-871.herokuapp.com/`がWeb アドレスとなります。 + +[Slack アプリのページ](https://api.slack.com/apps)を開き、アプリ名を選択します。次に、リクエストURLを自分で確認したWeb アドレスに変更します。設定する場所は2 か所あります。 + +> 💡 リクエストURL の末尾は`/slack/events`です。例えば`https://sharp-rain-871.herokuapp.com/slack/events`のようになります。 + +つ目の場所は、サイドパネルの「**Interactivity & Shortcuts**」です。これを選択し、リクエスト**URLを**更新します。 + +![Interactivity & Shortcuts page](../../assets/interactivity-and-shortcuts-page.png "Interactivity & Shortcuts") + +2 つ目の場所は、サイドパネルの「**Event Subscriptions**」です。これを選択し、リクエスト**URLを**更新します。 + +![Event Subscriptions page](../../assets/event-subscriptions-page.png "Event Subscriptions") + +> 💡 無料プランで使用するHeroku アプリは、非アクティブな状態が続くとスリープします。💤 認証が失敗した場合、すぐに再試行してみてください。 + +**3. Slack アプリをテストする** + +アプリのデプロイが完了し、Slack の設定変更も行いました。アプリを試してみましょう。 + +アプリが参加しているSlack チャンネルを開き、半角の小文字で"hello" と書き込みます。[Bolt 入門ガイド](/bolt-js/ja-jp/tutorial/getting-started#アクションの送信と応答)のとおり、アプリから応答があるはずです。応答がない場合、リクエスト**URLを**確認し、もう一度試してください。 + +--- + +### 変更をデプロイする + +Slack アプリを構築するなかで、変更を加えてデプロイする必要があります。一般的な流れでは、変更を加え、コミットし、Heroku にプッシュするという順番です。 + +この流れをつかむため、アプリが"goodbye" というメッセージに応答するように変更を加えてみましょう。次のコードを`app.js` に追加します（[GitHub のソースコードはこちら](https://github.com/slackapi/bolt-js/blob/main/examples/deploy-heroku/app.js)）。 + +```javascript +// "goodbye" が含まれるメッセージの着信をリッスン +app.message('goodbye', async ({ message, say }) => { + // say() で、イベントがトリガーされたチャンネルにメッセージを送信する + await say(`See ya later, <@${message.user}> :wave:`); +}); +``` + +変更内容をローカルのGit リポジトリにコミットします。 + +```shell +git commit -am "ユーザーに'goodbye' を返す" +``` + +変更内容をリモートのherokuリポジトリにプッシュし、デプロイします。 + +```shell +git push heroku main +``` + +デプロイ処理が完了したら、アプリが参加しているSlack チャンネルを開き、半角の小文字で"goodbye" と書き込みます。Slack アプリから、さよならの挨拶が返ってくるはずです。 + +--- + +### 次のステップ + +これではじめて️⚡Bolt for JavaScript アプリをHerokuへデプロイすることに成功しました。🚀 + +基本的なアプリのデプロイができましたので、次はアプリのカスタマイズやモニタリングを行う方法を調べてみましょう。おすすめのステップをいくつか紹介します。 + +- [How Heroku Works](https://devcenter.heroku.com/articles/how-heroku-works)を読んでHeroku の動作の理解を深めたり、[Heroku アプリを無料で使う場合の制限](https://devcenter.heroku.com/articles/free-dyno-hours)をチェックしたりする。 +- [Bolt の基本的な概念](/bolt-js/ja-jp/concepts#basic)を参考にしてアプリを拡張したり、[Heroku Add-ons](https://elements.heroku.com/addons)をアプリに取り入れたりする +- [Bolt の応用コンセプト](/bolt-js/ja-jp/concepts#advanced)でログの表示について学習し、[Heroku でのログメッセージの確認方法](https://devcenter.heroku.com/articles/getting-started-with-nodejs#view-logs)を把握する。 +- [Heroku アプリのスケール方法](https://devcenter.heroku.com/articles/getting-started-with-nodejs#scale-the-app)に従って、アクセスの増加に対処する。 + +[deploy-heroku-app]: https://github.com/slackapi/bolt-js/tree/main/examples/deploy-heroku +[getting-started-guide]: /bolt-js/ja-jp/tutorial/getting-started \ No newline at end of file