Remix、Prisma、MongoDBを使用したフルスタックアプリの構築：デプロイメント

目次

• イントロダクション
  • 開発環境
• GitHubでプロジェクトをホストする
• Vercelでプロジェクトを設定する
• 環境変数を設定する
• デプロイ
• MongoDBのアクセス設定を更新する
• まとめと終わりに

イントロダクション

このシリーズの最後のパートでは、ユーザーがプロフィール設定の更新、プロフィール写真の追加、アカウントと関連データの削除を行う方法を提供することで、Kudosアプリケーションの開発を完了しました。

このパートでは、Vercelを使用してアプリケーションをユーザーにデプロイします。

注意：このプロジェクトの開始点は、GitHubリポジトリのpart-4ブランチで入手できます。

開発環境

提供される例に従うには、以下のものが必要になります...

• ... Node.js がインストールされていること。
• ... Git がインストールされていること。
• ... TailwindCSS VSCode Extension がインストールされていること（オプション）。
• ... Prisma VSCode Extension がインストールされていること（オプション）。

注意：オプションの拡張機能は、TailwindとPrismaに非常に優れたインテリセンスと構文ハイライトを追加します。

GitHubでプロジェクトをホストする

アプリケーションをデプロイするには、Vercelを使用します。Vercelは、Git連携を提供しており、これにより、アプリを簡単にデプロイし、将来的に更新することができます。

このプロセスの最初のステップは、プロジェクトがGitHubでホストされていることを確認することです。プロジェクトと最新の変更がGitHubリポジトリにある場合は、次のステップに進んでください。

コードベースをリポジトリに設定する必要がある場合は、まずGitHubにサインインする必要があります。GitHubのホームページで、画面の左上にある緑色のNewボタンをクリックして、新しいリポジトリを作成します。

これにより、リポジトリについていくつかの詳細とオプションを設定するように求められるページに移動します。必要に応じて入力し、下部にあるCreate repositoryボタンを押します。

リポジトリを作成すると、ビューの上部にQuick setupセクションがあるリポジトリページに移動します。このセクションには、コードベースをリポジトリにプッシュするために使用する接続文字列があります。

ターミナルで、ファイルシステムのkudosプロジェクトに移動し、次のコマンドを実行して、リポジトリのURLを指定します。

完了したら、GitHubのリポジトリページに移動します。コードベースがプッシュされ、GitHubで利用可能になっているはずです。

Vercelでプロジェクトを設定する

次に、Vercelアカウントにログインします。まだアカウントをお持ちでない場合は、GitHubアカウントでサインアップするのが最も簡単な方法です。

サインインすると、ダッシュボードにNew Projectボタンが表示されます。そのボタンを押して、プロジェクトの設定を開始します。

このページでは、GitHubリポジトリをインポートするか、プリメイドテンプレートを選択するように求められます。GitHubアカウントをVercelアカウントにまだリンクしていない場合は、ここでリンクします。

Import Git Repositoryの下のリポジトリのリストからプロジェクトのリポジトリを選択します。

リポジトリのImportをクリックすると、プロジェクトを設定してデプロイできるページに移動します。

このページのFramework Presetセクションで、まだ選択されていない場合は、"Remix"を値として選択して、これがRemixプロジェクトであることをVercelに知らせます。これにより、ビルドおよびデプロイオプションの一部がこの情報で自動的に設定されます。

環境変数を設定する

Environment Variablesブロック内で、環境変数をデプロイ環境に追加できます。

これらは、プロジェクトの.envファイルで設定した変数に対応します。すべての環境変数をここに追加します。例として、下の画像では、DATABASE_URL変数の情報が入力されています。各変数のフォームに入力した後、Addを押します。

デプロイ

すべての環境変数が設定されたら、フォームの下部にあるDeployボタンをクリックして進みます。

このボタンをクリックすると、アプリケーションのビルドプロセスが開始され、実行する必要のあるチェックが実行され、VercelによってプロビジョニングされたURLでアプリケーションがデプロイされます。

デプロイが完了したら、ダッシュボードに戻ると、kudosプロジェクトが利用可能になり、プロビジョニングされたドメインでアクセスできるようになっているはずです。

このページのVisitボタンをクリックすると、サイトのライブバージョンに移動するはずです！おめでとうございます！

MongoDBのアクセス設定を更新する

ただし、まだ完了していません。ライブサイトでサインインまたはサインアップしようとすると、厄介なエラーが発生する可能性があります。

これは、MongoDBデータベースが開発マシンのIPアドレスからのみアクセスできるように構成されているためです。

Vercelはデプロイされた関数にランダムなIPアドレスを自動的に割り当てるため、任意のIPアドレス接続を許可するように開放する必要があります。

注意：Vercelはサーバーレス環境にデプロイするため、有効なIPアドレスのリストを特定することはできません。強力なパスワードとデータベースロールおよびユーザーの適切な使用が適切に行われている限り、これは依然として安全な構成と見なされます。

MongoDBダッシュボードを開き、左側のメニューのNetwork Accessタブに移動します。

ここに、ADD IP ADDRESSというラベルの付いた緑色のボタンがあります。それをクリックすると、以下のモーダルが表示されます。

このモーダルで、ALLOW ACCESS FROM ANYWHEREボタンを押し、下部にある緑色のConfirmボタンを押します。

これにより、データベースが任意のIPアドレスからの接続に対して開放され、Vercelによって管理されるサーバーレス設定で接続できるようになります。

ここで、デプロイされたアプリケーションに戻り、サインインまたはサインアップを試みると、アクションを正常に完了できるはずです！

まとめと終わりに

おめでとうございます！ 🎉

このシリーズを通して、あなたは

• MongoDBデータベースを簡単に操作できるようにするPrismaが提供する機能について深く掘り下げました。
• PrismaとRemixのおかげで、エンドツーエンドのタイプ安全性を実装しました。
• アプリのすべてのReactコンポーネントを構築し、TailwindCSSでスタイルを設定しました。
• 画像を保存するためにAWS S3バケットを設定しました。
• Vercelでアプリケーションをデプロイしました。

このシリーズの主なポイントは、アプリケーション全体のセットアップ、構築、デプロイは非常に実現可能で（そして楽しい）経験であり、今日利用可能なツールの多くが多くの面倒な作業を代わりに行ってくれ、エクスペリエンスをスムーズかつ簡単にすることです。

このプロジェクトのソースコードは、GitHubにあります。問題に気付いた場合は、リポジトリでissueを提起するか、PRを送信してください。

ご不明な点がございましたら、Twitterでお気軽にお問い合わせください。