このシリーズ最後の記事へようこそ!ここでは、MongoDB、Prisma、Remix を使ってゼロからフルスタックアプリケーションを構築する方法を学んでいます。このパートでは、これまでに構築してきたアプリケーションを Vercel を使ってデプロイします。
目次
はじめに
このシリーズの前回のパートでは、ユーザーがプロフィール設定を更新したり、プロフィール画像を追加したり、アカウントと関連データを削除したりする方法を提供することで、Kudosアプリケーションの開発を完了しました。
このパートでは、Vercel を使ってアプリケーションをユーザーにデプロイします。
注: このプロジェクトの開始点は、GitHub リポジトリの part-4 ブランチで利用できます。
開発環境
提供されている例に従うには、以下が想定されます...
- ... Node.js がインストールされていること。
- ... Git がインストールされていること。
- ... TailwindCSS VSCode 拡張機能がインストールされていること。 (任意)
- ... Prisma VSCode 拡張機能がインストールされていること。 (任意)
注: オプションの拡張機能により、Tailwind と Prisma の非常に優れたインテリセンスとシンタックスハイライトが追加されます。
プロジェクトをGitHubでホストする
アプリケーションをデプロイするには、Vercel を使用します。Vercel はGit統合を提供しており、アプリを簡単にデプロイし、将来的に更新することができます。
このプロセスにおける最初のステップは、プロジェクトが GitHub でホストされていることを確認することです。プロジェクトと最新の変更が GitHub リポジトリにある場合は、次のステップに進んでください。
コードベースをリポジトリに設定する必要がある場合は、まずGitHubにサインインする必要があります。GitHubのホームページで、画面左上の緑色のNewボタンをクリックして、新しいリポジトリを作成します。
リポジトリに関する詳細と設定オプションを尋ねるページに移動します。必要に応じてそれらを入力し、下部のCreate repositoryボタンをクリックします。
リポジトリを作成すると、ビューの上部に「クイックセットアップ」セクションがあるリポジトリページが表示されます。このセクションには、コードベースをリポジトリにプッシュするために使用する接続文字列が含まれています。
ターミナルで、ファイルシステム内の kudos プロジェクトに移動し、リポジトリの URL を指定して以下のコマンドを実行します。
それが完了したら、GitHub のリポジトリページに移動してください。コードベースがプッシュされ、GitHub で利用可能になっているはずです。
Vercelでプロジェクトをセットアップする
次に、Vercel のアカウントにログインします。まだアカウントをお持ちでない場合は、GitHub アカウントでサインアップするのが最も簡単な選択肢です。
サインインすると、ダッシュボードにNew Projectボタンが表示されます。このボタンをクリックして、プロジェクトの設定を開始します。
このページでは、GitHubリポジトリをインポートするか、既存のテンプレートを選択するように求められます。まだGitHubアカウントとVercelアカウントを連携させていない場合は、ここで行うことになります。
「Gitリポジトリのインポート」の下にあるリポジトリのリストから、プロジェクトのリポジトリを選択します。
リポジトリのImportをクリックすると、プロジェクトを設定してデプロイできるページに移動します。
このページのFramework Presetセクションで、まだ選択されていない場合は、VercelにRemixプロジェクトであることを知らせるために、値として"Remix"
を選択してください。この情報に基づいて、ビルドおよびデプロイオプションの一部が自動的に設定されます。
環境変数をセットアップする
環境変数ブロック内では、環境変数をデプロイ環境に追加することができます。
これらは、プロジェクトの.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によって管理されるサーバーレス環境で接続できるようになります。
これで、デプロイされたアプリケーションに戻ってサインインまたはサインアップを試みると、正常に操作を完了できるはずです!
まとめ & 最終的な所見
おめでとうございます!🎉
このシリーズを通してあなたは
- Prisma が提供する、MongoDB データベースを簡単に操作できる機能について深く掘り下げました。
- Prisma と Remix のおかげで、エンドツーエンドの型安全性を実装しました。
- アプリのすべての React コンポーネントを構築し、TailwindCSS でスタイルを設定しました。
- 画像を保存するために AWS S3 バケットを設定しました。
- Vercel を使用してアプリケーションをデプロイしました。
このシリーズの主な教訓は、アプリケーション全体のセットアップ、構築、デプロイは非常に実行可能で(そして楽しい)経験であるということです。今日利用できる多くのツールが、多くの面倒な作業を代わりに行ってくれ、スムーズで簡単な経験にしてくれるからです。
このプロジェクトのソースコードはGitHubで見つけることができます。問題に気づいた場合は、お気軽にリポジトリに課題を提起したり、プルリクエストを送信したりしてください。
ご質問があれば、お気軽にTwitterでご連絡ください。
次の投稿をお見逃しなく!
Prismaニュースレターに登録する