初めに
⚠️自分で学んだことをメモとしてまとめています．
⚠️実装が終了するまで．最後にTodoを表示します．
こちら を参照しております．
目的
完全なMessengerアプリを自身のサーバー上で実行したいです．
ドキュメントを読んだ経験が少ないので，自分の知見を向上させるための備忘録です．
Messengerアプリをデプロイするための条件
- Facebookページ
- Facebook開発者アカウント
- Facebookアプリ
ページとアプリを設定する
各種情報の取得
このセクションの目的は、Messengerアプリがメッセージを正常に送受信するために必要なすべてのアクセストークンとIDを収集することです。
とあります．
必要なアクセストークンは以下です．
PAGE_ID=
APP_ID=
PAGE_ACCESS_TOKEN=
APP_SECRET=
実際に取得してみましょう！
各アプリページに遷移します．
メニューバーをみましょう．
- PAGE_ID
- プロダクトの[＋]を選択し，Messengerを選択します．
- アクセストークンにて新しいページを選択します．
- ページが追加されるとページのIDが表示されています．(※2)
- APP_ID
- ベーシックを選択します．
- ページ上部に表示されます.(※1)
- PAGE_ACCESS_TOKEN
- アクセストークンにてトークンを生成を選択します．
- モーダルウィンドウで表示されます．(※2)
- APP_SECRET
- ベーシックを選択します．
- ページ上部に表示されます.(※1)
※1.アプリメニューバー → 設定 → ベーシック
※2.アクセストークン
PAGE_ACCESS_TOKENとPAGE_IDに関しては
アクセストークンデバッガーにて，ページトークンを入力して，取得することも可能です．
ローカル環境で実行する
私はbash環境で確認をしました．
- node.jsのversion確認
$ node -v
v14.15.0 //こちらで実行します．
- ローカルマシンにこのリポジトリのクローンを複製
git clone https://github.com/fbsamples/original-coast-clothing.git //original-coast-clothingリポジトリの複製
cd original-coast-clothing // ディレクトリ移動
- コードの依存関係をインストール
yarn install
こちらで私はyarnがinstallされていなくて怒られてしまいました．
同じだ〜💦という方は こちら（まだ用意できていません🙇♂️） を確認してください．
ローカルトンネルを使用して受信メッセージを取得する
メッセージを受信するには、Facebookサーバーからの受信Webhooksを取得できることが前提となります．
公式ページにあるようにLocaltunnelを使用します．
- ローカルトンネルのインストール
npm install -g localtunnel
- 新しいターミナルタブを開き、好きなポートを指定してローカルサーバーへのトンネルをリクエスト
lt --port 3000
このコマンドを叩くと，URLが取得され，そちらを後の.envファイルのAPP_URL変数に設定します．
このコマンドを実行するたびに，新しいアドレスが提供されるため，このウィンドウは開いたままにしましょう．
WebhooksとMessengerプロフィールを設定する
- 最初のターミナルで，提供されているテンプレートを使用して，すべての環境値を入力
mv .sample.env .env
( Todo mvコマンドでやっていること ! )
.env ファイルを編集して先に取得した値を全て追加しましょう．
VERYFY_TOKEN には任意の値を設定してください．
- ビルトインウェブサーバーを使用してローカルでアプリを実行
node app.js
私はこれで，ブラウザから http://localhost:3000 にアクセスできました．