使用 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 主頁上，點選螢幕左上角的綠色新建按鈕以建立新的倉庫。

這將帶您進入一個頁面，您需要在此頁面填寫有關倉庫的一些詳細資訊和配置選項。請按您喜歡的方式填寫，然後點選底部的建立倉庫按鈕。

建立倉庫後，您將進入倉庫頁面，檢視頂部有一個快速設定部分。此部分將包含一個連線字串，您將使用它將程式碼庫推送到倉庫。

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

完成後，前往 GitHub 上的倉庫頁面。您應該會看到您的程式碼庫已被推送並可在 GitHub 上訪問。

在 Vercel 中設定您的專案

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

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

在此頁面上，系統會要求您匯入 GitHub 倉庫或選擇一個預製模板。如果您尚未將 GitHub 賬戶關聯到您的 Vercel 賬戶，您也將在此處完成。

從匯入 Git 倉庫下的倉庫列表中選擇您專案的倉庫。

在您的倉庫上點選匯入後，您將進入一個頁面，您可以在其中配置專案並部署它。

在此頁面的框架預設部分，如果尚未選擇，請選擇 "Remix" 作為值，以告知 Vercel 這是一個 Remix 專案。Vercel 將根據此資訊自動為您設定一些構建和部署選項。

設定環境變數

在環境變數塊中，您可以將環境變數新增到部署環境。

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

部署

配置完所有環境變數後，請點選表單底部的部署按鈕。

點選此按鈕將啟動應用程式的構建過程，執行任何必要的檢查，並使用 Vercel 提供的 URL 部署應用程式。

部署完成後，如果您返回儀表板，您應該會看到您的 kudos 專案在所提供的域名下可用並可訪問。

如果您點選此頁面上的訪問按鈕，您應該會導航到您網站的即時版本！恭喜！

更新 MongoDB 訪問設定

然而，您還沒有完全完成。您可能會注意到，如果您嘗試在您的即時網站上登入或註冊，您會收到一個討厭的錯誤。

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

因此需要將其開放以允許任何 IP 地址連線，因為 Vercel 會自動為您的部署函式分配隨機 IP 地址。

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

開啟 MongoDB 儀表板，然後導航到左側選單上的網路訪問選項卡。

在這裡您會找到一個標有新增 IP 地址的綠色按鈕。點選它，您將看到下面的模態框。

在此模態框中，點選允許從任何地方訪問按鈕，然後點選底部的綠色確認按鈕。

這將向任何 IP 地址的連線開放您的資料庫，允許您在 Vercel 管理的無伺服器環境中連線。

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

總結和最終說明

恭喜！🎉

在本系列中，您

• 深入瞭解了 Prisma 提供的功能，讓您可以輕鬆地使用 MongoDB 資料庫。
• 藉助 Prisma 和 Remix 實現了端到端的型別安全。
• 構建了應用程式的所有 React 元件並使用 TailwindCSS 進行樣式化。
• 配置了 AWS S3 儲存桶以儲存圖片。
• 使用 Vercel 部署了您的應用程式。

本系列的主要收穫是，設定、構建和部署整個應用程式是一個非常可行（且愉快的）體驗，因為現在許多可用工具都為您處理了大量繁瑣的工作，使體驗流暢而簡單。

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

如果您有任何問題，也請隨時透過 Twitter 與我聯絡。