メインコンテンツまでスキップ

NetlifyアプリとMomentoをIntegrateする

Netlifyは、モダンなウェブサイトやアプリを構築、デプロイ、スケーリングするための人気のプラットフォームです。先進的なグローバルCDN、Gitに統合されたCI/CD、無料の自動HTTPSサポートなどを提供しています。デプロイプロセスは Git リポジトリと直接統合されており、最初のデプロイはリポジトリの選択と同じくらい簡単です。いったんデプロイされると、サイトやアプリの更新は変更を Git にプッシュすることで自動的に行われます。

このチュートリアルでは、Javascript SDK のシンプルなサンプル Next.js チャットアプリケーション を使います。 このチュートリアルが終わるころには、ブラウザベースのリアルタイムチャットアプリケーションが完成し、そのURLで友達をチャットに招待できるようになっていることでしょう。

前提条件​

このアプリをデプロイして実行するには、以下のものが必要です：

Netlify のアカウントと、Git プロバイダーのアカウントに Momento Javascript SDK のコピーまたはフォークがあれば、Momento コンソール を使って Momento 側を設定する準備が整います。コンソールにアカウントを作成するには、メールアドレスを入力するか、既存の Google または GitHub アカウントをリンクします。コンソールにログインしたら、ページの右上にある Create Cache ボタンをクリックします：

Create Cache button

chatというキャッシュを作成します。キャッシュはAWSかGCPの好きなクラウドプロバイダーに、好きなリージョンで作成できます。

Create cache form

Createボタンを押すと、利用可能なキャッシュのリストに新しいchatキャッシュが表示されます。

Chat cache

キャッシュを作成したリージョンもキャッシュのリストに表示されていることに注意してください。次のステップでMomento API キーを生成する際に、同じリージョンを選択していることを確認する必要があります。api-keys ページに移動し、キャッシュの作成に使用したクラウドプロバイダとリージョンを選択し、Super User Key トークンタイプを選択し、Generate Key ボタンをクリックします。

Generate Key

APIキーをコピーして安全な場所に保存してください。後でNetlifyのデプロイを設定する際に、チャットアプリで使用する環境変数として追加する必要があります。

Generated Key

Netlifyを使ったデプロイ​

いよいよ Netlify にログインして、アプリケーションの設定とデプロイを行います。前述したように、リポジトリに Momento Javascript SDK のコピーが必要です。この例では、オリジナル からフォークした GitHub リポジトリからデプロイします。

Fork SDK Repository

Netlify にログインした後、チームの Sites ページに移動し、Add New Site -> Import an Existing Project を選択します。

Netlify Add Site Button

Gitプロバイダーを選択すると、リポジトリの一覧が表示されます。

Netlify Git providers

利用可能なリポジトリのリストから、client-sdk-javascriptを選択します。

Netlify repository list

次の画面では、デプロイの設定を行います。mainブランチからデプロイします。Momento Javascript SDK のサブディレクトリからサンプルアプリケーションをデプロイするので、ページの Build settings セクションで Base directory を設定する必要があります。チャットサンプルのパスは /examples/web/nextjs-chat なので、Base directory にそれを入力します。

ベースディレクトリが正しく入力されていれば、いくつかのマジックが起こるはずです。Netlifyはベースディレクトリの中身を調べ、私たちのプロジェクトがNext.jsを使っていることを検出しました。これで、ビルド設定フォームの残りの部分を埋めてくれるようになりました。Netlifyが選んだ値は良さそうなので、設定の最終段階である環境変数に進むことができます。

Netlify build settings

このアプリケーションで使用するために、先ほどMomento APIキーを生成して保存したことを思い出してください。ビルド設定の下にある Add environment variables ボタンを使って、MOMENTO_API_KEY をキー、生成したトークンを値とする環境変数を追加します。次に、NEXT_PUBLIC_MOMENTO_CACHE_NAMEをキー、chatを値として2つ目の環境変数を追加し、アプリを先ほど作成したキャッシュに向ける。以上でデプロイの設定は完了だ。Deploy client-sdk-javascript`ボタンを押すと、アプリがデプロイされます。

デプロイ中、Netlifyはあなたのサイトを構築し、公開するために何を行っているかを示す詳細なログを表示し、必要に応じてデプロイの失敗を報告し、トラブルシューティングを支援します。すべてが計画通りに進んでいれば、デプロイメントを要約したページが表示されます。

Netlify site published

これで友達とチャットする準備ができました！左のナビのSite overviewに移動して、あなたのサイトに生成されたURLを見つけてください。もちろん、本番用のアプリであればカスタムドメインを設定するでしょうが、生成されたnetlify.appのURLで十分です。

Netlify site overview

概要にあるhttps://charming-salmiakki-e07713.netlify.app/リンクをクリックすると（もちろんあなたのURLは違うでしょう）、チャットアプリのロビー画面が表示されます。チャットルームの名前は chat とします。どんな名前でもかまいませんが、chatを使うと覚えやすく、共有しやすくなります。存在しない場合はチャットルームが作成されます。

Chat app lobby

最後のステップは、チャットのユーザー名を選択することです。

Chat app username

あとは、チャットに招待したい人たちとURL、キャッシュ、ルーム名を共有するだけです！

Chat app chat

結論​

この簡単なチュートリアルで、Netlifyを使ってMomentoを搭載したアプリケーションをデプロイすることがいかにシンプルで簡単であるかを理解していただけたと思います。もちろん、このチャットのコード にも自由に飛び込んでみてください。特にポーリングやウェブソケットなどの代替アプローチと比較した場合、チャットを動かすMomentoトピック機能のシンプルさを楽しんでいただければと思います。また、Momento を使用してお客様が今後どのようなものを構築し、展開されるかを楽しみにしています！