· 4,339 chars · 5 min Updated

部署

準備工作

#Hynan

準備工作

在開始之前，請確保您已擁有以下平台的帳號：

  • GitHub：託管原始碼

  • Supabase：後端服務（認證、資料庫、Edge Functions）

  • Vercel：前端網站部署

  • Google Cloud Console：設定 Google 登入與 Google Calendar API

Step 1. 本機環境驗證

請確保本機已安裝 Node.js 18+ (建議24 LTS)。

  1. 安裝依賴：Bash
npm install
  1. 設定環境變數：程式碼片段 複製 \.env\.example 並命名為 \.env：
VITE_SUPABASE_URL=https://你的-project-ref.supabase.co
VITE_SUPABASE_ANON_KEY=你的-supabase-publishable-anon-key
  1. 啟動本地開發伺服器：Bash
npm run dev

注意：預設網址通常為 http://localhost:5173。確認畫面可正常開啟後再進行下一步。

Step 2. 建立 GitHub Repository

將專案推送到您的 GitHub 儲存庫：

Bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/你的帳號/hynan.git
git push -u origin main

注意：請務必確認 \.env 已列入 \.gitignore 中，切勿推送到 GitHub 公開儲存庫。

Step 3. Supabase 基礎設定

1. 建立專案

  • 前往 Supabase Dashboard 建立新專案。

  • 設定 Project name（如 hynan）、強密碼，並選擇合適的 Region。

2. 獲取 API 金鑰

  • 前往 Project Settings > API，複製 Project URL 與 publishable anon key，更新至本機 \.env 及保留給後續 Vercel 使用。

3. 初始化資料庫結構

  • 前往 SQL Editor，開啟新查詢。

  • 複製專案中 supabase/schema\.sql 的完整內容，貼入並執行。

  • 執行後，至 Table Editor 確認以下資料表已成功建立並啟動 RLS (Row Level Security)：

    workspaces, tasks, tags, daily\_entries, google\_calendar\_connections, google\_calendar\_workspace\_calendars, google\_calendar\_sync\_queue

Step 4. Google Cloud Console 設定

1. 建立專案與啟用 API

  • 前往 Google Cloud Console 建立名為 Hynan 的專案。

  • 搜尋 Google Calendar API 並點擊 啟用 (Enable)。

  • 進入 APIs & Services > OAuth consent screen，User Type 選擇 External。

  • 填寫 App name (Hynan)、支援與開發者 Email。

  • 測試使用者 (Test users)：若 App 處於 Testing 狀態，請務必將您要用來登入測試的 Google 帳號加入列表中，否則將無法通過認證。

3. 建立 OAuth 憑證

  • 進入 APIs & Services > Credentials，點擊 Create Credentials > OAuth client ID。

  • Application type：選擇 Web application。

  • Authorized JavaScript origins：

    • 本地：http://localhost:5173

    • 正式：https://你的\-vercel\-app\.vercel\.app

  • Authorized redirect URIs（注意結尾必須帶 /）：

    • 本地：http://localhost:5173/

    • 正式：https://你的\-vercel\-app\.vercel\.app/

  • 建立完成後，複製 Client ID 與 Client Secret。

Step 5. 對接 Supabase 與 Google Auth

1. 啟用 Google Provider

  • 回到 Supabase Dashboard > Authentication > Providers > Google。

  • 啟用開關，填入剛剛獲取的 Google Client ID 與 Client Secret 並儲存。

2. 設定重導向網址 (URL Configuration)

  • 前往 Authentication > URL Configuration：

    • Site URL：https://你的\-vercel\-app\.vercel\.app (本機測試時可先填 http://localhost:5173)

    • Redirect URLs： - http://localhost:5173/

      - `https://你的\-vercel\-app\.vercel\.app/`

Step 6. 部署 Supabase Edge Function

  1. 全域安裝 Supabase CLI 并登入：Bash
npm install -g supabase
supabase login
  1. 連結專案（project\-ref 可從 Supabase URL 中取得）：Bash
supabase link --project-ref 你的-project-ref
  1. 設定 Edge Function 密鑰：Bash
supabase secrets set GOOGLE_CLIENT_ID="你的-google-client-id"
supabase secrets set GOOGLE_CLIENT_SECRET="你的-google-client-secret"
supabase secrets set GOOGLE_TOKEN_ENCRYPTION_KEY="請換成一組32字元以上的隨機長字串"

注意：GOOGLE\_TOKEN\_ENCRYPTION\_KEY 用於加密 Google Token，請妥善保管，勿用範例弱密碼。

  1. 部署 Function（專案路徑需為 supabase/functions/google\-calendar/index\.ts）：Bash
supabase functions deploy google-calendar

Step 7. Vercel 前端部署

  1. 登入 Vercel，點擊 Add New > Project，導入您的 GitHub hynan 儲存庫。

  2. Framework Preset 選擇 Vite。

  3. 設定環境變數 (Environment Variables)，務必勾選 Production, Preview, Development：

    • VITE\_SUPABASE\_URL = 你的 Supabase URL

    • VITE\_SUPABASE\_ANON\_KEY = 你的 Supabase Anon Key

  4. 點擊 Deploy。部署成功後複製 Vercel 提供的正式網址。

  5. 注意事項：請將此正式網址同步更新回 Supabase Auth URL 與 Google OAuth Credentials 的允許清單中（參見 Step 4 與 Step 5）。如有變更環境變數，記得在 Vercel 點選 Redeploy。

驗證與自我測試

部署完成後，請依序執行以下測試以確保功能完整：

  • [ ] Google 登入：是否能正常跳轉、成功登入，且 Supabase 後台有產生對應 User。

  • [ ] 資料庫讀寫：新增任務、標籤、每日筆記，檢查 Supabase Table Editor 是否有即時寫入資料。

  • [ ] 行事曆連動：在設定中點擊「連接 Google Calendar」，確認是否成功跳出授權並於 Google Calendar 中建立 Hynan 行事曆。

  • [ ] 雙向同步：建立有日期的任務，點擊立即同步，檢查 Google Calendar 是否出現事件；反之於 Google 修改，確認能同步回 App。

常見問題排查 (FAQ)

Google 登入失敗？

  1. 檢查 Google Cloud 的 Authorized redirect URIs 結尾是否有加 /。

  2. 檢查 Supabase 的 Site URL 與 Redirect URLs 是否包含完整的部署網址與 /。

  3. 確認測試帳號是否有加入 Google OAuth Consent Screen 的 Test users 中。

Google Calendar 連接或同步失敗？

  1. 確認 Google Cloud 專案中已啟動 Google Calendar API。

  2. 檢查 Supabase Edge Function 是否成功部署，且名稱精確為 google\-calendar。

  3. 前往 Supabase Dashboard > Edge Functions > google-calendar > Logs 查看具體報錯訊息（如：Missing secret 代表環境變數未設定成功）。

重新整理頁面後出現 Vercel 404 錯誤？

  • 專案根目錄必須包含 vercel\.json 檔案。其內容需設定將所有路由導回 /index\.html（SPA 路由支援）。請確認該檔案是否有被推送到 Git 並成功部署。

資料看得見，但無法新增或修改？

  • 這通常是資料庫 schema 沒有完整建立，或是 RLS Policy 阻擋了寫入。請前往 Supabase SQL Editor 重新完整執行一遍 schema\.sql。

相关推荐