使用 Remix、Prisma 和 MongoDB 構建全端應用程式：部署

目錄

• 簡介
  • 開發環境
• 在 GitHub 上託管您的專案
• 在 Vercel 中設定您的專案
• 設定環境變數
• 部署
• 更新 MongoDB 訪問設定
• 總結與最終想法

簡介

在本系列的上一部分中，您完成了 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（建立儲存庫）按鈕。

建立儲存庫後，您將進入儲存庫頁面，並且在檢視頂部有一個Quick setup（快速設定）部分。此部分將包含一個連線字串，您將使用該字串將您的程式碼庫推送到儲存庫。

在終端機中，導航到您檔案系統中的 kudos 專案，並執行以下命令，提供您的儲存庫的 URL

完成後，前往 GitHub 上的儲存庫頁面。您應該會看到您的程式碼庫已推送並可在 GitHub 上使用。

在 Vercel 中設定您的專案

接下來，登入您在 Vercel 上的帳戶。如果您還沒有帳戶，最簡單的選擇是使用您的 GitHub 帳戶註冊。

登入後，在您的儀表板上，您將看到一個New Project（新專案）按鈕。點擊該按鈕開始配置您的專案。

在此頁面上，系統會要求您匯入 GitHub 儲存庫或選擇預製範本。如果您尚未將您的 GitHub 帳戶連結到您的 Vercel 帳戶，您也將在此處執行此操作。

從Import Git Repository（匯入 Git 儲存庫）下的儲存庫列表中選擇您的專案儲存庫。

在您的儲存庫上點擊Import（匯入）後，您將被帶到一個頁面，您可以在該頁面上配置專案並部署它。

在此頁面的Framework Preset（框架預設）部分下，如果尚未選取，請選取 "Remix" 作為值，讓 Vercel 知道這是一個 Remix 專案。它將自動為您設定一些建置和部署選項，並提供此資訊。

設定環境變數

在Environment Variables（環境變數）區塊內，您可以將您的環境變數新增到部署環境。

這些將與您在專案的 .env 檔案中設定的變數相關聯。在此處新增您的所有環境變數。例如，在下圖中，資訊已針對 DATABASE_URL 變數填寫。在為每個變數填寫表單後，點擊Add（新增）。

部署

配置完所有環境變數後，繼續點擊表單底部的Deploy（部署）按鈕。

點擊此按鈕將啟動應用程式的建置過程、執行任何需要進行的檢查，並使用 Vercel 提供的 URL 部署應用程式。

部署完成後，如果您回到儀表板，您應該會看到您的 kudos 專案可用，並且可以透過提供的網域訪問。

如果您點擊此頁面上的Visit（訪問）按鈕，您應該會導航到您網站的線上版本！恭喜！

更新 MongoDB 訪問設定

但是，您還沒有完全完成。您可能會注意到，如果您嘗試在您的線上網站上登入或註冊，您會收到一個糟糕的錯誤。

這是因為您的 MongoDB 資料庫仍然配置為僅可從您的開發機器的 IP 位址訪問。

這需要開放，以允許任何 IP 位址連線，因為 Vercel 會自動為您的已部署函數分配隨機 IP 位址。

注意：由於 Vercel 在無伺服器環境中部署，因此無法確定有效 IP 位址的列表。只要設定了強密碼並正確使用資料庫角色和使用者，這仍然被認為是安全的配置。

開啟 MongoDB 儀表板，然後導航到左側選單上的Network Access（網絡訪問）標籤。

在這裡，您會找到一個標記為ADD IP ADDRESS（新增 IP 位址）的綠色按鈕。點擊它，您將看到下面的模態視窗。

在此模態視窗中，點擊ALLOW ACCESS FROM ANYWHERE（允許從任何位置訪問）按鈕，然後點擊底部的綠色Confirm（確認）按鈕。

這將向來自任何 IP 位址的連線開放您的資料庫，讓您可以在 Vercel 管理的無伺服器設定中連線。

現在，如果您回到您已部署的應用程式並嘗試登入或註冊，您現在應該能夠成功完成操作！

總結與最終想法

恭喜！🎉

在本系列中，您

• 深入了解 Prisma 提供的功能，這些功能讓您可以輕鬆地使用 MongoDB 資料庫。
• 借助 Prisma 和 Remix 實作了端到端類型安全。
• 建置了所有應用程式的 React 元件，並使用 TailwindCSS 設定了樣式。
• 配置了 AWS S3 儲存桶以儲存圖片。
• 使用 Vercel 部署了您的應用程式。

本系列的主要重點是，設定、建置和部署整個應用程式是非常可行的（且令人愉悅的）體驗，因為現在許多可用的工具都為您處理了許多繁瑣的工作，並使體驗變得順暢而輕鬆。

此專案的原始碼可在 GitHub 上找到。如果您發現問題，請隨時在儲存庫中提出 issue 或提交 PR。

如果您有任何問題，也請隨時在 Twitter 上與我聯繫。