Localhost 教學｜本機開發環境設定入門指南

引言：踏出本機開發的第一步

你是否曾經好奇，那些網站開發者是怎麼在自己電腦上測試網站的？答案就是 Localhost——一個讓你的電腦變身成開發伺服器的神奇技術。

不論你是想學習網頁開發的新手，還是準備建立第一個專案的初學者，了解如何設定本機開發環境都是必備技能。本篇教學將從零開始，帶你一步步設定好自己的 localhost 環境，讓你可以在自己的電腦上開發、測試網站。

要點一－本機開發環境是什麼？（為什麼需要它？）

在正式進入設定教學之前，讓我們先了解什麼是「本機開發環境」，以及為什麼每個開發者都需要它。

本機開發環境的定義

本機開發環境（Local Development Environment）是指在你自己的電腦上建立的開發測試空間。簡單來說，就是讓你的電腦模擬一台網路伺服器，讓你可以：

• 在本機測試程式碼：不需要上傳到網路就能看到結果
• 快速修改與除錯：改了程式碼馬上就能看到效果
• 安全地進行實驗：不會影響到正式上線的網站
• 離線也能開發：不需要網路連線也能工作

為什麼不直接在正式環境開發？

很多新手可能會問：「為什麼不直接在正式網站上改程式碼？」

這就像問「為什麼不直接在高速公路上學開車」一樣。在正式環境直接開發會有以下風險：

• 程式錯誤會直接影響使用者：一個小 bug 可能讓整個網站掛掉
• 除錯困難：無法自由地加入測試程式碼
• 安全風險：開發過程中可能暴露敏感資訊
• 版本混亂：無法控制測試中的功能何時上線

Localhost 與本機開發環境的關係

Localhost 就是本機開發環境的核心。當你在瀏覽器輸入 localhost 或 127.0.0.1 時，電腦會連接到自己，而不是連到外部網路。

這個機制讓你可以：

1. 在自己電腦上執行伺服器程式
2. 用瀏覽器瀏覽本機上的網站
3. 模擬真實的網站運作環境

💡 延伸閱讀：如果你還不熟悉 localhost 的基本概念，建議先閱讀 Localhost 是什麼？127.0.0.1 完整解析

要點二－如何啟動 Localhost？（3 種常見方式）

現在讓我們進入實作階段。以下介紹三種最常見的 localhost 啟動方式，從簡單到進階排列。

方式一：使用程式語言內建伺服器

這是最簡單的方式，適合快速測試靜態網頁。

Python 使用者（Python 3）：

# 進入你的專案資料夾
cd /path/to/your/project

# 啟動簡易伺服器
python -m http.server 8000

啟動後，打開瀏覽器輸入 http://localhost:8000 即可看到你的網頁。

Node.js 使用者：

# 安裝 http-server（只需要一次）
npm install -g http-server

# 進入專案資料夾並啟動
cd /path/to/your/project
http-server

預設會在 http://localhost:8080 啟動。

PHP 使用者（PHP 5.4+）：

# 進入專案資料夾
cd /path/to/your/project

# 啟動 PHP 內建伺服器
php -S localhost:8000

方式二：使用整合開發環境

如果你需要完整的 Web + Database 環境，整合開發環境是最方便的選擇。

XAMPP（跨平台，免費）：

XAMPP 包含 Apache 網頁伺服器、MySQL 資料庫、PHP 和 Perl。

1. 前往 XAMPP 官網 下載
2. 安裝完成後打開 XAMPP Control Panel
3. 點擊 Apache 旁的「Start」按鈕
4. 瀏覽器輸入 http://localhost 即可

MAMP（Mac 專用，免費版可用）：

1. 前往 MAMP 官網 下載
2. 安裝後打開 MAMP
3. 點擊「Start Servers」
4. 預設在 http://localhost:8888 啟動

Laragon（Windows 專用，輕量快速）：

1. 前往 Laragon 官網 下載
2. 安裝後打開 Laragon
3. 點擊「Start All」
4. 瀏覽器輸入 http://localhost 即可

方式三：使用前端框架的開發伺服器

現代前端框架都內建開發伺服器，功能更完整。

React（Create React App / Vite）：

# Create React App
npx create-react-app my-app
cd my-app
npm start
# 預設在 localhost:3000

# Vite
npm create vite@latest my-app
cd my-app
npm install
npm run dev
# 預設在 localhost:5173

Vue.js：

npm create vue@latest my-app
cd my-app
npm install
npm run dev
# 預設在 localhost:5173

Next.js：

npx create-next-app@latest my-app
cd my-app
npm run dev
# 預設在 localhost:3000

要點三－Hosts 檔案設定教學（自訂網域名稱）

除了使用 localhost，你還可以透過修改 hosts 檔案來自訂本機網域名稱，例如 mysite.local 或 dev.test。

什麼是 Hosts 檔案？

Hosts 檔案是作業系統中的一個特殊文字檔，用來將網域名稱對應到 IP 位址。當你在瀏覽器輸入網址時，系統會先查詢 hosts 檔案，再去查詢 DNS 伺服器。

透過修改 hosts 檔案，你可以：

• 將自訂網域指向 localhost（127.0.0.1）
• 模擬正式網域的開發環境
• 測試多個專案使用不同網域

Windows 設定步驟

Step 1：以系統管理員身份開啟記事本

1. 按下 Windows 鍵，搜尋「記事本」
2. 右鍵點擊「記事本」，選擇「以系統管理員身份執行」

Step 2：開啟 hosts 檔案

1. 在記事本中選擇「檔案」→「開啟」
2. 在檔案路徑輸入：C:\Windows\System32\drivers\etc\hosts
3. 檔案類型選擇「所有檔案」
4. 點擊「開啟」

Step 3：新增自訂網域

在檔案最後新增一行：

127.0.0.1    mysite.local

Step 4：儲存檔案

按 Ctrl+S 儲存。現在你可以用 http://mysite.local 存取 localhost 了。

macOS 設定步驟

Step 1：開啟終端機

按下 Command + 空白鍵，輸入「Terminal」並開啟。

Step 2：編輯 hosts 檔案

sudo nano /etc/hosts

輸入你的密碼（輸入時不會顯示字元）。

Step 3：新增自訂網域

在檔案最後新增：

127.0.0.1    mysite.local

Step 4：儲存並離開

按 Ctrl+O 儲存，按 Enter 確認，再按 Ctrl+X 離開。

Step 5：清除 DNS 快取

sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder

Linux 設定步驟

Step 1：編輯 hosts 檔案

sudo nano /etc/hosts

Step 2：新增自訂網域

127.0.0.1    mysite.local

Step 3：儲存並離開

按 Ctrl+O 儲存，按 Ctrl+X 離開。

常用的本機開發網域命名

⚠️ 注意：.dev 網域已被 Google 購買，會強制使用 HTTPS。建議本機開發使用 .local 或 .test。

要點四－本機開發環境工具推薦（依用途分類）

選擇合適的開發工具可以大幅提升開發效率。以下依照不同用途推薦適合的工具。

靜態網頁開發

如果你只需要開發 HTML、CSS、JavaScript 靜態網頁：

VS Code Live Server 安裝方式：

1. 開啟 VS Code
2. 按 Ctrl+Shift+X 開啟擴充功能
3. 搜尋「Live Server」
4. 點擊「安裝」
5. 在 HTML 檔案上右鍵，選擇「Open with Live Server」

動態網頁開發（需要後端 + 資料庫）

現代前端框架開發

容器化開發

🚀 想把 Localhost 專案上線嗎？

統計數據：超過 70% 的開發者在本機開發完成後，都會遇到「如何讓別人看到我的作品」的問題。

VibeFix 如何幫助你？

✅ 快速部署服務：讓你的 localhost 專案一鍵上線
✅ 免費 SSL 憑證：自動設定 HTTPS，安全又專業
✅ 自訂網域綁定：使用你自己的網域名稱
✅ 24/7 穩定運作：不再需要電腦一直開著
✅ 專業技術支援：遇到問題隨時有人幫忙

💡 為什麼選擇 VibeFix？

• 簡單易用：不需要複雜的伺服器設定知識
• 價格透明：沒有隱藏費用，清楚知道花費
• 台灣在地：中文介面、中文客服

限時優惠：新用戶首次部署享 8 折優惠！

👉 立即點擊了解 VibeFix 專業部署服務！

要點五－第一個 Localhost 網頁實作（完整步驟）

理論說完了，讓我們實際動手建立你的第一個本機網頁！

實作目標

建立一個簡單的「Hello World」網頁，並在 localhost 上執行。

Step 1：建立專案資料夾

Windows：

1. 開啟檔案總管
2. 在你想要的位置（如桌面）右鍵 →「新增」→「資料夾」
3. 命名為 my-first-website

macOS / Linux：

mkdir ~/Desktop/my-first-website
cd ~/Desktop/my-first-website

Step 2：建立 HTML 檔案

在專案資料夾中建立 index.html 檔案，內容如下：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網站</title>
    <style>
        body {
            font-family: 'Microsoft JhengHei', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            text-align: center;
            padding: 2rem;
        }
        h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 Hello, Localhost!</h1>
        <p>恭喜！你已成功在本機啟動網站。</p>
        <p>現在時間：<span id="time"></span></p>
    </div>
    <script>
        function updateTime() {
            document.getElementById('time').textContent =
                new Date().toLocaleTimeString('zh-TW');
        }
        updateTime();
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Step 3：啟動本機伺服器

選擇以下任一方式：

方式 A：使用 Python

cd ~/Desktop/my-first-website
python -m http.server 8000

方式 B：使用 Node.js

cd ~/Desktop/my-first-website
npx http-server

方式 C：使用 VS Code Live Server

1. 用 VS Code 開啟專案資料夾
2. 點擊右下角的「Go Live」

Step 4：在瀏覽器查看

打開瀏覽器，輸入：

• Python 方式：http://localhost:8000
• Node.js 方式：http://localhost:8080
• Live Server：會自動開啟瀏覽器

你應該會看到一個漂亮的紫色漸層背景，顯示「Hello, Localhost!」和即時更新的時間。

常見問題排解

Q：瀏覽器顯示「無法連線」？

• 確認伺服器有成功啟動（終端機應該顯示「Serving HTTP on...」）
• 確認 Port 號輸入正確
• 嘗試使用 127.0.0.1 替代 localhost

Q：網頁沒有顯示樣式？

• 確認 HTML 檔案有正確儲存
• 清除瀏覽器快取（Ctrl+Shift+R）

Q：修改程式碼後沒有更新？

• 使用 Live Server 可以自動重新整理
• 手動方式需要按 F5 或 Ctrl+R 重新整理

要點六－常見問題與下一步學習

FAQ

Q1：如何啟動 localhost？

最簡單的方式是使用 Python 內建伺服器。在專案資料夾中執行 python -m http.server 8000，然後瀏覽器輸入 http://localhost:8000 即可。

Q2：Hosts 檔案在哪裡？

• Windows：C:\Windows\System32\drivers\etc\hosts
• macOS / Linux：/etc/hosts

修改 hosts 檔案需要管理員權限。

Q3：哪個本機開發工具最好用？

沒有「最好」的工具，只有「最適合」的工具：

• 純前端開發：VS Code + Live Server
• PHP/WordPress：XAMPP 或 Laragon
• 現代前端框架：使用框架內建的開發伺服器
• 團隊開發：Docker

下一步學習建議

恭喜你完成本機開發環境的設定！接下來可以繼續學習：

1. 深入了解 Port：Localhost Port 完整對照表
2. 排解常見問題：Localhost 拒絕連線完整解決方案
3. 讓作品上線：如何讓 Localhost 上線？5 種方法
4. 進階工具：Localhost Docker 教學

結論：開始你的本機開發之旅

本文重點回顧

透過這篇教學，你已經學會了：

1. 本機開發環境的概念：為什麼需要在自己電腦上開發
2. 三種啟動 localhost 的方式：從簡單到進階都能搞定
3. Hosts 檔案設定：自訂網域名稱讓開發更專業
4. 工具選擇建議：依照你的需求選對工具
5. 實際動手操作：成功建立第一個本機網站

開發者成長的必經之路

每個資深開發者都曾經是新手，都曾經在 localhost 上建立第一個網站。本機開發環境就像是你的私人實驗室，讓你可以自由嘗試、大膽實驗。

記住，遇到問題是正常的。當你看到「localhost 拒絕連線」時不要慌張，這通常只是小問題。學會排解這些問題，也是成為開發者的一部分。

準備好上線了嗎？

當你的專案在本機開發完成，想讓全世界都能看到時，就是時候考慮部署上線了。VibeFix 提供簡單易用的部署服務，讓你的 localhost 專案輕鬆變成正式網站。

👉 點擊了解 VibeFix 部署服務，讓你的作品被世界看見！

參考資料

1. MDN Web Docs - 設定本地測試伺服器
2. XAMPP 官方網站
3. Visual Studio Code - Live Server 擴充功能
4. Python 官方文件 - http.server

圖片描述清單

插圖 1：localhost-tutorial-hero
- 用途：文章主視覺圖
- 建議尺寸：1200 x 630 px
- 描述：主視覺圖呈現本機開發概念。畫面中央是一台電腦顯示器，瀏覽器網址列顯示「localhost:3000」。螢幕周圍環繞著代表開發工具的圖示：齒輪（設定）、程式碼括號、伺服器機櫃。整體風格現代簡潔，使用藍色系配色，傳達「在自己電腦上開發網站」的概念。
- Slug：localhost-tutorial-hero

插圖 2：localhost-tutorial-comparison
- 用途：三種啟動方式比較
- 建議尺寸：1000 x 500 px
- 描述：資訊比較圖呈現三種啟動方式。左側是「程式語言內建」區塊，顯示 Python/Node.js/PHP 圖示，標註「最簡單、適合靜態網頁」。中間是「整合開發環境」區塊，顯示 XAMPP/MAMP/Laragon 圖示，標註「完整功能、含資料庫」。右側是「前端框架」區塊，顯示 React/Vue/Next.js 圖示，標註「現代開發、熱重載」。使用一致的圖示風格和配色。
- Slug：localhost-tutorial-comparison

插圖 3：localhost-tutorial-demo
- 用途：實作成果展示
- 建議尺寸：1000 x 600 px
- 描述：展示實作成果的截圖。瀏覽器視窗中，網址列顯示「localhost:8000」，網頁內容是紫色漸層背景，中央顯示「Hello, Localhost!」大標題和即時時間。瀏覽器使用現代風格（Chrome 或 Edge），整體呈現初學者成功完成第一個本機網站的成就感。
- Slug：localhost-tutorial-demo

插圖 4：localhost-tutorial-learning-path
- 用途：學習路徑導引
- 建議尺寸：1000 x 600 px
- 描述：學習路線圖以流程圖形式呈現。起點是「本篇：環境設定」，接著分支到三個方向：向上是「進階工具（Docker、WordPress）」，向右是「問題排解（拒絕連線、無法連線）」，向下是「正式上線（ngrok、部署）」。每個節點都有對應的圖示，整體風格清晰易讀，幫助讀者規劃下一步學習方向。
- Slug：localhost-tutorial-learning-path