Localhost 轉正式上線指南｜從本機到雲端部署完整流程

引言：從「在我電腦可以跑」到「全世界都能用」

程式開發完成了，在 localhost 跑得很順，接下來呢？

正式上線是讓專案真正有價值的關鍵一步。這篇文章會教你：

• 部署前需要準備什麼
• 前端和後端應該選哪個平台
• 完整的部署流程
• 網域設定和常見問題解決

不管你是第一次部署還是想換個更好的平台，這篇文章都能幫到你。

要點一－從 Localhost 到正式上線：你需要知道的事

臨時分享 vs 正式上線

先釐清你需要的是什麼：

如果只是要給客戶看 Demo，用 Ngrok 就夠了。但如果是要長期服務，就需要正式部署。

部署的本質

部署（Deploy）就是把程式從你的電腦搬到雲端伺服器：

localhost:3000 (你的電腦)
       ↓ 部署
yourdomain.com (雲端伺服器)
       ↓
任何人隨時都能連線

需要花錢嗎？

好消息：很多平台有免費方案，足夠個人專案和小型應用使用。

要點二－部署前準備工作

在按下「Deploy」之前，確認這些準備工作：

1. 程式碼上 Git

幾乎所有現代部署平台都需要從 Git 拉取程式碼：

# 初始化 Git
git init

# 加入所有檔案
git add .

# 提交
git commit -m "Initial commit"

# 推送到 GitHub
git remote add origin https://github.com/username/repo.git
git push -u origin main

2. 環境變數處理

千萬不要把密碼、API Key 等敏感資訊寫在程式碼裡：

// ❌ 錯誤示範
const API_KEY = "sk-1234567890abcdef";

// ✅ 正確做法
const API_KEY = process.env.API_KEY;

部署時在平台設定環境變數。

3. 確認 Build 指令

確認你的專案可以正確 build：

# React / Next.js
npm run build

# Vue
npm run build

# 確認沒有錯誤

4. 準備設定檔

不同框架可能需要特定設定檔：

5. 確認相依套件

# 確認 package.json 有所有相依套件
npm install

# 測試本機 build
npm run build
npm start

要點三－選擇部署平台：前端 vs 後端

選擇平台前，先確定你的專案類型：

純前端（靜態網站）

如果你的專案：
- 只有 HTML、CSS、JavaScript
- 使用 React、Vue、Angular 等框架（只有前端）
- 不需要伺服器端邏輯

推薦平台：Vercel、Netlify、GitHub Pages

有後端 API

如果你的專案：
- 有 Node.js、Python、Ruby 等後端程式
- 需要連接資料庫
- 有 API endpoints

推薦平台：Railway、Render、Fly.io

全端應用

如果你的專案：
- Next.js、Nuxt 等全端框架
- 前後端合在一起

推薦平台：Vercel（Next.js 最佳化）、Railway

快速選擇指南

你的專案是什麼？
│
├── 純靜態網站（HTML/CSS/JS）
│   └── GitHub Pages（完全免費）
│
├── React / Vue / Angular（SPA）
│   └── Vercel 或 Netlify
│
├── Next.js / Nuxt（全端框架）
│   └── Vercel（Next.js）或 Netlify（Nuxt）
│
├── Node.js / Express API
│   └── Railway 或 Render
│
├── Python / Django / Flask
│   └── Railway 或 Render
│
└── 需要資料庫
    └── Railway（內建資料庫服務）

💡 不確定該選哪個平台？ 可以聯繫我們讓工程師幫你評估最適合的方案。

要點四－前端部署：Vercel / Netlify

Vercel 部署教學

適合：React、Next.js、Vue、Nuxt 等

Step 1：連接 GitHub

1. 前往 vercel.com
2. 點擊「Sign up」用 GitHub 登入
3. 點擊「Import Project」
4. 選擇你的 repository

Step 2：設定專案

Vercel 通常會自動偵測框架：

Framework Preset: Next.js (自動偵測)
Build Command: npm run build (自動)
Output Directory: .next (自動)

Step 3：設定環境變數

如果有環境變數，在這裡加入：

API_KEY = your-api-key
DATABASE_URL = your-database-url

Step 4：部署

點擊「Deploy」，等待 1-2 分鐘。

部署完成後會得到網址：your-project.vercel.app

Netlify 部署教學

適合：靜態網站、SPA、Nuxt

Step 1：連接 GitHub

1. 前往 netlify.com
2. 點擊「Sign up」用 GitHub 登入
3. 點擊「New site from Git」
4. 選擇你的 repository

Step 2：設定 Build

Build command: npm run build
Publish directory: dist (或 build、out)

Step 3：部署

點擊「Deploy site」，完成後得到：your-site.netlify.app

Vercel vs Netlify

建議：Next.js 選 Vercel，其他都行。

要點五－後端部署：Railway / Render / Fly.io

Railway 部署教學

適合：Node.js、Python、Go、Rust、以及需要資料庫的專案

Step 1：連接 GitHub

1. 前往 railway.app
2. 用 GitHub 登入
3. 點擊「New Project」→「Deploy from GitHub repo」
4. 選擇 repository

Step 2：設定環境變數

Railway 會自動偵測語言，你只需要設定環境變數。

Step 3：新增資料庫（如需要）

New → Database → PostgreSQL/MySQL/MongoDB

Railway 會自動產生 DATABASE_URL 環境變數。

Step 4：部署完成

得到網址：your-app.up.railway.app

Render 部署教學

適合：Node.js、Python、Docker 容器

Step 1：建立服務

1. 前往 render.com
2. 登入後點擊「New」→「Web Service」
3. 連接 GitHub repository

Step 2：設定服務

Environment: Node
Build Command: npm install
Start Command: npm start

Step 3：部署

點擊「Create Web Service」

比較表

💡 後端部署很複雜？ VibeFix 程式部署服務幫你從環境設定到上線一次搞定。

要點六－全端應用部署策略

方案一：單一平台部署

把前後端都部署在同一個平台：

Next.js 全端 → Vercel（前後端一起）
Nuxt 全端 → Netlify
Node.js + React → Railway（同一個 repo）

優點：簡單，一個平台搞定

缺點：靈活度較低

方案二：前後端分離部署

前端和後端分開部署到不同平台：

前端 (React) → Vercel
後端 (Node.js API) → Railway

設定前端 API URL

// 前端環境變數
NEXT_PUBLIC_API_URL=https://api.yourdomain.com

設定後端 CORS

// Express 範例
app.use(cors({
  origin: 'https://yourdomain.com'
}));

優點：各自獨立擴展，靈活度高

缺點：需要處理 CORS 和 API 通訊

選擇建議

要點七－網域與 DNS 設定

購買網域

推薦的網域註冊商：

設定自訂網域（以 Vercel 為例）

Step 1：新增網域

Vercel Dashboard → 專案 → Settings → Domains → Add

輸入：yourdomain.com

Step 2：設定 DNS

Vercel 會告訴你需要新增的 DNS 記錄：

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Step 3：到網域註冊商設定

在你的網域管理介面新增這些 DNS 記錄。

Step 4：等待生效

DNS 設定需要時間生效，通常幾分鐘到 24 小時。

SSL 憑證

好消息：Vercel、Netlify、Railway 都會自動配置 SSL，不需要手動設定。

💡 網域和 DNS 設定很複雜？ 可以聯繫我們讓工程師幫你處理。

要點八－部署後檢查清單

部署完成後，確認以下項目：

功能測試

• [ ] 首頁正常載入
• [ ] 所有頁面可以訪問
• [ ] 表單提交正常
• [ ] API 請求正常回應
• [ ] 圖片和資源載入正常

效能檢查

• [ ] 使用 PageSpeed Insights 測試速度
• [ ] 確認 LCP（最大內容繪製）< 2.5 秒
• [ ] 確認沒有大型未優化圖片

安全性

• [ ] HTTPS 正常運作（鎖頭圖示）
• [ ] 環境變數沒有暴露在前端
• [ ] API 有適當的身份驗證

SEO 檢查

• [ ] 頁面有正確的 <title> 標籤
• [ ] 有 <meta description>
• [ ] 有 robots.txt 和 sitemap.xml
• [ ] Open Graph 標籤正確設定

監控設定

• [ ] 設定錯誤通知
• [ ] 設定 uptime 監控
• [ ] 查看部署平台的 logs

要點九－常見部署問題排解

問題一：Build 失敗

錯誤訊息：Build failed、Exit code 1

可能原因：
1. 程式碼有錯誤
2. 缺少相依套件
3. Node 版本不符

解決方法：

# 先在本機測試 build
npm run build

# 確認沒有錯誤後再部署

如果是版本問題，在設定檔指定版本：

// package.json
{
  "engines": {
    "node": "18.x"
  }
}

問題二：環境變數讀不到

症狀：undefined、process.env.XXX is not defined

解決方法：
1. 確認在平台有設定環境變數
2. 前端環境變數要加 prefix
- Next.js：NEXT_PUBLIC_
- Vite：VITE_
3. 重新部署

問題三：API 請求失敗

症狀：CORS 錯誤、Network Error

解決方法：

// 後端設定 CORS
app.use(cors({
  origin: ['https://yourdomain.com', 'https://www.yourdomain.com'],
  credentials: true
}));

問題四：頁面 404

症狀：首頁正常，但其他頁面 404

原因：SPA 路由沒有正確設定

Netlify 解決方法：

建立 public/_redirects：

/*    /index.html   200

Vercel 解決方法：

建立 vercel.json：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

問題五：部署後速度很慢

可能原因：
1. 圖片太大
2. Bundle 太大
3. 沒有使用 CDN

解決方法：
1. 壓縮圖片，使用 WebP 格式
2. 使用 lazy loading
3. 確認部署平台的 CDN 有啟用

💡 部署問題解不開？ 讓工程師幫你處理，24 小時內回覆。

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

常見問題 FAQ

Q1：Localhost 程式怎麼上線？

有兩種方式：
1. 臨時分享：用 Ngrok 或 Cloudflare Tunnel 產生臨時公開網址
2. 正式上線：部署到 Vercel、Netlify、Railway 等雲端平台

正式上線需要把程式碼推到 GitHub，然後連接部署平台。

Q2：Vercel 和 Netlify 哪個好？

兩者都很優秀：
- Next.js 專案 → 選 Vercel（官方支援最佳化）
- 其他前端專案 → 都可以，Netlify 表單功能更方便
- 需要邊緣函式 → 都支援

Q3：後端程式可以免費部署嗎？

可以：
- Railway：每月 $5 免費額度
- Render：有免費方案（會休眠）
- Fly.io：有免費額度

對於個人專案和小型應用來說通常夠用。

Q4：部署後網址怎麼設定？

平台會給你一個預設網址（如 xxx.vercel.app）。如果要自訂網域：
1. 購買網域（Cloudflare、Namecheap 等）
2. 在部署平台新增網域
3. 設定 DNS 指向平台提供的 IP 或 CNAME
4. 等待 DNS 生效（幾分鐘到 24 小時）

延伸閱讀

• 如何讓 Localhost 上線？5 種方法總覽
• Ngrok 教學｜一鍵讓 Localhost 變成公開網址
• Cloudflare Tunnel 教學｜免費讓本機程式上線
• Localhost 是什麼？127.0.0.1 完整指南

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

圖片描述

插圖 1：部署流程概念圖
- 檔名 slug: localhost-to-production-flow
- 圖片類型: 概念示意圖
- 主要視覺元素:
- 左側：開發者電腦顯示 localhost
- 中間：上升階梯或道路
- 右側：雲端伺服器和地球圖示
- 文字標註: 階梯上標註「準備」「選擇平台」「部署」「設定網域」
- 色調與風格: 藍綠色調，積極向上的感覺
- 構圖建議: 從左下到右上的上升趨勢，代表進步

插圖 2：Vercel 部署介面示意
- 檔名 slug: vercel-deploy-interface
- 圖片類型: 介面示意圖
- 主要視覺元素:
- Import Project 頁面
- GitHub 連接選項
- Repository 列表
- Build Settings 區塊
- 文字標註: "Import Project"、"Deploy"按鈕
- 色調與風格: Vercel 品牌黑白配色
- 構圖建議: 完整介面畫面，用箭頭或框線標示重點區域

插圖 3：部署檢查清單示意
- 檔名 slug: deployment-checklist
- 圖片類型: 資訊圖表
- 主要視覺元素:
- 四個區塊：功能、效能、安全、SEO
- 每個區塊有多個項目和勾選框
- 綠色勾勾表示已完成
- 文字標註: 各項檢查項目名稱
- 色調與風格: 清晰易讀的檢查清單風格
- 構圖建議: 2x2 網格排列，每個區塊有清楚的標題

插圖 4：平台選擇決策樹
- 檔名 slug: deployment-platform-decision
- 圖片類型: 決策流程圖
- 主要視覺元素:
- 樹狀決策結構
- 問題節點和選擇分支
- 最終推薦平台
- 文字標註: 問題文字、平台名稱和 logo
- 色調與風格: 流程圖風格，不同路徑用不同顏色
- 構圖建議: 從頂部問題開始，向下分支到各平台推薦