# 專案部署上線教程

你好，我是程式設計師魚皮。

在前面的文章中，我們學習了如何開發各種專案。但是如果專案只能在本地運行，那就太可惜了。這篇文章，我會教你如何把專案部署到網際網路上，讓全世界的人都能訪問。

需要先說明的是，如果你用的是 Bolt.new、Lovable、美團 NoCode、百度秒搭等 AI 零代碼平台，它們一般自帶了部署功能，點擊發布按鈕就能上線，非常方便。但是如果你想更靈活地部署，比如使用自己的域名、選擇不同的伺服器、或者部署更複雜的全端專案，那就需要學習更多的部署方式。

下面我會介紹多種部署方式，從最新的 AI 自動部署、到最流行的 Vercel 一鍵部署、再到專業的伺服器部署。你可以根據自己的專案類型和需求，選擇合適的部署方式。



## 一、部署方式概覽

在開始之前，先了解一下有哪些部署方式。

對於前端專案（靜態網頁、單頁應用等），最簡單的方式是使用託管平台，比如 Vercel、GitHub Pages、EdgeOne Pages 等。這些平台提供免費的託管服務，只需要上傳代碼，就能自動部署並生成訪問連結。

對於全端專案（包含前端和後端），可以選擇容器化部署（Docker）、雲伺服器部署（阿里雲、騰訊雲等）、或者 Serverless 部署。這些方式相對複雜一些，但功能更強大。

下面我會詳細介紹每種部署方式。



## 二、讓 AI 自動部署（最新最酷）

先來分享一個最新的技巧，讓 AI 幫你部署網站。

以前，我們開發一個網站，需要先提出需求、再設計方案、再寫代碼開發、最後部署上線。我們都知道 AI 現在寫代碼越來越溜了，慢慢地替代了我們程式設計師寫代碼的部分工作；但其實，AI 的能力不止於此，利用 MCP，它甚至可以直接幫我們把網站部署上線！

好好好，合著我只要提個一句話需求，寫代碼和部署都不用我來幹了，讓我退化是吧？

![](https://pic.yupi.icu/1/1752213314439-7925d7ba-0d1d-46f1-9f70-b1d391ac854d.png)

下面就來帶大家實操一下，讓 AI 幫我生成並部署個人部落格網站。



### 準備工具

我們需要用到的工具包括：

- Cursor：AI 編程工具，負責調用 AI 生成代碼
- EdgeOne Pages MCP：能夠將網站快速部署到 CDN 並生成公開訪問連結的服務

什麼是 EdgeOne Pages MCP 呢？拆解一下這幾個單詞。

EdgeOne 是騰訊雲提供的 CDN 加速服務，可以把用戶的網站資源緩存到離用戶最近的邊緣節點，提升網站性能。

![](https://pic.yupi.icu/1/1752216739540-3dbb9132-3ae0-4a5d-9949-2a4299663c39.png)

EdgeOne Pages 是基於這個 CDN 的網站部署服務，可以讓你輕鬆地將網站部署到 CDN 上，並且得到公開訪問地址，完全不需要自己搭建伺服器。

![](https://pic.yupi.icu/1/1752216784265-0a71fe3a-7944-40b2-b5ce-87215df060fe.png)

MCP 則是目前很火的模型上下文協議，讓 AI 模型能夠輕鬆地使用各種工具來增強能力，完成更複雜的任務。

![](https://pic.yupi.icu/1/1752216828838-510154d5-6a89-4089-84b9-fadeccb9d724.png)

EdgeOne Pages MCP 的作用就顯而易見了 —— 給 AI 提供網站部署工具，這也是一個比較熱門的 MCP。

![](https://pic.yupi.icu/1/1752217054075-0f149a76-9e42-482e-ae26-e23762c7ad1e.png)



### 快速實戰

1）開通 Pages 服務

首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 開通 Pages 服務：

![](https://pic.yupi.icu/1/1752209404627-3a3193d9-4c94-4f80-ad02-435ff22f16ed.png)

開通服務後，默認進入了專案管理頁面，我們先不急著創建專案：

![](https://pic.yupi.icu/1/1752209421726-11d8eff7-7bdd-4a85-accf-c70f74ead15a.png)

由於等下要通過 MCP 完成網站部署，所以要先獲取 API Token，作為調用服務的憑證：

![](https://pic.yupi.icu/1/1752209504079-6741bbd0-438e-48a4-86be-6eddfc3efa83.png)



2）配置 MCP

新建一個專案資料夾 `yupi-blog`，在 Cursor 中打開，然後進入設置，添加 MCP 服務：

![](https://pic.yupi.icu/1/1752209949437-369134bc-303b-46fc-bca1-e1a57a335f82.png)

將這段配置複製粘貼到 MCP 配置文件中：

```json
{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"],
      "env": {
        "EDGEONE_PAGES_API_TOKEN": "你的API Token",
        "EDGEONE_PAGES_PROJECT_NAME": ""
      }
    }
  }
}
```

注意要把 API Token 改成你自己的，並且把註釋刪除掉，否則會報錯：

![](https://pic.yupi.icu/1/1752210048110-15bf78cc-da14-4f7f-b9d5-3ec510332bf7.png)

正常情況下，你會看到 MCP 服務成功加載，綠了綠了！

![](https://pic.yupi.icu/1/1752211512400-a59c2010-8701-4b75-80d9-014ad03e8b4a.png)

這個服務提供了 2 個工具：

- deploy_html：部署 HTML 內容到 EdgeOne Pages，返回公開訪問 URL
- deploy_folder_or_zip：部署資料夾或 ZIP 文件到 EdgeOne Pages，返回公開訪問 URL

注意，這個 MCP 服務需要 NPX 工具才能在本地成功啟動。NPX 可以直接運行 NPM 包中的命令而無需全局安裝，常用於執行腳手架工具和一次性命令。

如果你沒有 NPX 命令、或者 Node.js 版本過低（最好不要低於 20），都會導致工具無法加載。

![](https://pic.yupi.icu/1/1752211437222-1400be90-e460-4948-b7f3-45a6a78ffe7d.png)

這時，你只需要到 [官網安裝 Node.js](https://nodejs.org/zh-cn)，會自動幫你安裝 NPM 和 NPX 工具：

![](https://pic.yupi.icu/1/1752209643527-73a7c2cc-046c-4faa-8531-2a22da95d4bd.png)

如果沒有自動安裝 NPX 工具，那就用 NPM 包管理工具安裝 NPX：

```bash
npm i -g npx
```



3）生成並部署網站

準備好 MCP 服務後，下面就來生成網站。輸入下列提示詞，讓 AI 幫我生成個人部落格網站：

```
幫我根據程式設計師魚皮的 GitHub 生成個人部落格網站，極客風格，簡潔大氣；生成完成後部署網站
@https://github.com/liyupi
```

查看 AI 的思考過程，它已經想到要使用 EdgeOne Pages 去部署網站了：

![](https://pic.yupi.icu/1/1752211869664-b74dc4d9-57b1-4bb7-9f02-703112b613eb.png)

很快網站就生成並部署完成，可以看到 AI 調用了 MCP 部署 HTML 的工具，得到了訪問地址：

![](https://pic.yupi.icu/1/1752212029384-16cfba8f-babb-49c0-9d41-3b76ee78eecf.png)

直接打開網址就看到效果了，不要太方便！

![](https://pic.yupi.icu/1/1752212096367-0a0fac32-118e-485a-9277-8dd507ff66d3.png)

不過目前生成的網站比較簡單，就一個 HTML 頁面，甚至沒有在本地創建代碼文件。



4）部署網站目錄

再來嘗試一個更複雜的專案吧，使用下面的提示詞，讓 AI 利用前端框架開發多頁面網站：

```
幫我根據程式設計師魚皮的 GitHub 生成個人部落格網站，極客風格，簡潔大氣；
需要包含多個頁面，要求使用 Vue 框架模組化開發；
生成完成後部署網站
@https://github.com/liyupi/
```

![](https://pic.yupi.icu/1/1752212265608-6aa96245-199f-487f-9c57-bc2f0550cdf6.png)

這次要等待的時間會比較久，魚皮建議大家趁這個時間接杯水，起來活動活動。最近久坐不動，我感覺自己的肩膀已經硬如磐石了。

![](https://pic.yupi.icu/1/1752217850836-e83f0d59-a657-4048-94cd-a515e960a4d7.png)

我們會發現，雖然生成了一大堆代碼，但是並沒有自動部署，只是給出了部署建議：

![](https://pic.yupi.icu/1/1752213747665-192b57be-90a5-44e4-92b1-5cd468394707.png)

看一下 AI 的思考過程，原來是使用部署工具失敗了：

![](https://pic.yupi.icu/1/1752214113764-2afad6bc-5777-4e9e-b2d2-745476caadc2.png)

經過我的測試發現，如果想部署網站目錄或壓縮包，最好先在 Pages 網頁版創建一個專案，然後讓 MCP 把網站文件傳到這個專案內。

那就先利用官方提供的例子，隨便部署一個網站：

![](https://pic.yupi.icu/1/1752215857055-9a84b9d5-4787-4181-b054-8883884c34b2.png)

修改專案的名稱為 `yupi-blog`，直接點擊 "開始部署" 就好：

![](https://pic.yupi.icu/1/1752215971422-9e57abea-077a-4847-88b3-bd1cd1de4217.png)

等待部署中，30 秒左右就好了：

![](https://pic.yupi.icu/1/1752216002653-9d7c5127-642a-4b3c-b542-c9e6cfcd0dde.png)

專案部署成功後，我們修改 Cursor MCP 的配置，填入剛剛創建的專案名稱：

![](https://pic.yupi.icu/1/1752216064120-e1e8e58e-0eaa-4b9c-814b-605c664c35a3.png)

然後再跟 AI 對話，讓它幫我部署網站目錄：

![](https://pic.yupi.icu/1/1752213933060-071efc16-a9ac-4333-8fd9-53beeeeedd90.png)

可以看到這次 AI 成功執行了部署工具，並且得到了訪問地址：

![](https://pic.yupi.icu/1/1752216306792-fb4c2e9c-d600-4b7c-b3c4-d5ae02614974.png)

看下網站效果，還不錯吧，很有科技感！

![](https://pic.yupi.icu/1/1752216337356-667e0577-b0a5-4f44-b147-5bb3ab14824e.png)

不過要注意，生成的網站默認使用臨時域名，有效期比較短：

![](https://pic.yupi.icu/1/1752216364625-c93f7b26-133a-4aac-a849-77ee6840e6f1.png)

如果你有域名的話，建議配置一下自定義域名，就可以無限期訪問啦~

![](https://pic.yupi.icu/1/1752216408600-03b16e94-4668-4295-b7bb-2a07bc5592c7.png)

怎麼樣，是不是很簡單？等能夠輕鬆在手機上使用 MCP 的時候，試想一下，你走在路上跟朋友聊天，朋友向你推薦了一位博主 —— 程式設計師魚皮，你只需要跟 AI 說一句話，2 分鐘後，就能給朋友訪問介紹這個博主的網站，跟變魔術似的。

![](https://pic.yupi.icu/1/1752218294278-9d31872f-e883-4736-a3f6-584ee31e9ad7.png)

值得一提的是，EdgeOne Pages 目前應該是免費的，真香了。

![](https://pic.yupi.icu/1/1752216569752-fbd0f243-7d43-44de-af69-d3d6eb954f8a.png)



## 三、Vercel 一鍵部署（推薦）

[Vercel](https://vercel.com) 是目前最流行的前端部署平台，特別適合 React、Next.js、Vue、靜態網站等前端專案。

Vercel 的優點是個人專案完全免費，部署速度極快（一般 1 ~ 2 分鐘），自動配置 HTTPS 和 CDN 加速；還和 GitHub 深度集成，能夠在你推送代碼到 GitHub 倉庫後自動部署。



### 使用步驟

1）首先訪問 [Vercel 官網](https://vercel.com) 註冊賬號，建議使用 GitHub 賬號註冊登錄。

2）創建專案，可以直接綁定 GitHub 並選擇已經託管的專案，點擊 "Deploy" 部署按鈕：

![](https://pic.yupi.icu/1/image-20260109111323983.png)

3）等待 1 ~ 2 分鐘，專案就上線了！

部署成功後 Vercel 會自動給你一個域名，比如 `your-project.vercel.app`，你也可以綁定自己的域名。而且每次你往 GitHub 推送代碼，Vercel 都會自動重新部署，完全不用手動操作。



### 命令行部署

除了網頁操作，Vercel 還提供了命令行工具，可以讓我們通過一行命令把自己的專案部署到平台。先用 NPM 安裝 Vercel CLI 工具：

```bash
npm i -g vercel@latest
```

然後，直接在想部署的專案資料夾下輸入 `vercel` 命令，就能部署當前專案了：

![](https://pic.yupi.icu/1/1752218682107-8c8457e4-3fbe-40d8-afb8-f6cb0691beee.png)

讓 AI 完成自動部署的方法也很簡單，你只需要在提示詞中告訴 AI 「你可以使用 vercel 命令行工具完成網站部署」，聰明如它，一定能幫你完成任務。

💡 具體過程可以看魚皮的視頻教程：https://www.bilibili.com/video/BV1TV4y1j76t

除了 Vercel，還有 [Netlify](https://www.netlify.com/) 這個類似的平台。Netlify 和 Vercel 功能差不多，但功能更全面一些，支持更多的框架和靜態站點生成器，有表單處理、無伺服器函數等功能，免費額度更大、還支持 A/B 測試和分析。使用方式和 Vercel 類似：註冊賬號 => 連接 GitHub => 選擇專案 => 點擊部署。如果你的專案不是 Next.js（Next.js 用 Vercel 最好），可以考慮用 Netlify。



## 四、GitHub Pages 部署

[GitHub Pages](https://pages.github.com/) 是 GitHub 提供的免費靜態網站託管服務。優點是完全免費、無限流量、和 GitHub 無縫集成。

使用方法巨簡單，在 GitHub 創建倉庫並上傳網站文件後，直接在倉庫設置中啟用 GitHub Pages：

![](https://pic.yupi.icu/1/image-20260109111917547.png)

然後就能通過 `username.github.io/repo-name` 訪問了。適合個人主頁、專案文檔、簡單的靜態網站。

GitHub Pages 的限制是只能部署靜態網站，不能運行後端代碼。但對於純前端專案來說，完全夠用了。而且完全免費，不用擔心流量限制。



## 五、雲伺服器部署

如果你想要更多的控制權，可以租一台雲伺服器，自己部署專案。國內主流的雲服務商有阿里雲、騰訊雲、華為雲等。

雲伺服器部署的基本流程：

1）購買雲伺服器（推薦 2 核 4G 配置起步，第一次購買有新用戶優惠）

2）安裝運行環境，比如 Node.js、Nginx、MySQL 數據庫等

3）上傳代碼到伺服器

4）配置 Nginx 反向代理

5）配置域名和 SSL 證書

這個過程對於純新手來說會有點兒複雜，但可以使用寶塔面板或 1Panel 這樣的可視化管理工具，大大簡化操作。這些面板提供了圖形化界面，不需要記複雜的命令，點點鼠標就能完成配置。

![](https://pic.yupi.icu/1/1736821032080-4be9c9e5-6dfe-434b-8db8-7eb8d7068a16.png)

雲伺服器部署的優點是你有完全的控制權，可以隨時調整配置，而且更穩定