[GitHub Global] Translate Vibe Coding 零基础教程/20 项目实战/06 项目部署上线教程.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
2c1dffef3d
commit
a4cc2bf9fc
@@ -0,0 +1,312 @@
|
||||
# 專案部署上線教程
|
||||
|
||||
你好，我是程式設計師魚皮。
|
||||
|
||||
在前面的文章中，我們學習了如何開發各種專案。但是如果專案只能在本地運行，那就太可惜了。這篇文章，我會教你如何把專案部署到網際網路上，讓全世界的人都能訪問。
|
||||
|
||||
需要先說明的是，如果你用的是 Bolt.new、Lovable、美團 NoCode、百度秒搭等 AI 零代碼平台，它們一般自帶了部署功能，點擊發布按鈕就能上線，非常方便。但是如果你想更靈活地部署，比如使用自己的域名、選擇不同的伺服器、或者部署更複雜的全端專案，那就需要學習更多的部署方式。
|
||||
|
||||
下面我會介紹多種部署方式，從最新的 AI 自動部署、到最流行的 Vercel 一鍵部署、再到專業的伺服器部署。你可以根據自己的專案類型和需求，選擇合適的部署方式。
|
||||
|
||||
|
||||
|
||||
## 一、部署方式概覽
|
||||
|
||||
在開始之前，先了解一下有哪些部署方式。
|
||||
|
||||
對於前端專案（靜態網頁、單頁應用等），最簡單的方式是使用託管平台，比如 Vercel、GitHub Pages、EdgeOne Pages 等。這些平台提供免費的託管服務，只需要上傳代碼，就能自動部署並生成訪問連結。
|
||||
|
||||
對於全端專案（包含前端和後端），可以選擇容器化部署（Docker）、雲伺服器部署（阿里雲、騰訊雲等）、或者 Serverless 部署。這些方式相對複雜一些，但功能更強大。
|
||||
|
||||
下面我會詳細介紹每種部署方式。
|
||||
|
||||
|
||||
|
||||
## 二、讓 AI 自動部署（最新最酷）
|
||||
|
||||
先來分享一個最新的技巧，讓 AI 幫你部署網站。
|
||||
|
||||
以前，我們開發一個網站，需要先提出需求、再設計方案、再寫代碼開發、最後部署上線。我們都知道 AI 現在寫代碼越來越溜了，慢慢地替代了我們程式設計師寫代碼的部分工作；但其實，AI 的能力不止於此，利用 MCP，它甚至可以直接幫我們把網站部署上線！
|
||||
|
||||
好好好，合著我只要提個一句話需求，寫代碼和部署都不用我來幹了，讓我退化是吧？
|
||||
|
||||
|
||||
|
||||
下面就來帶大家實操一下，讓 AI 幫我生成並部署個人部落格網站。
|
||||
|
||||
|
||||
|
||||
### 準備工具
|
||||
|
||||
我們需要用到的工具包括：
|
||||
|
||||
- Cursor：AI 編程工具，負責調用 AI 生成代碼
|
||||
- EdgeOne Pages MCP：能夠將網站快速部署到 CDN 並生成公開訪問連結的服務
|
||||
|
||||
什麼是 EdgeOne Pages MCP 呢？拆解一下這幾個單詞。
|
||||
|
||||
EdgeOne 是騰訊雲提供的 CDN 加速服務，可以把用戶的網站資源緩存到離用戶最近的邊緣節點，提升網站性能。
|
||||
|
||||
|
||||
|
||||
EdgeOne Pages 是基於這個 CDN 的網站部署服務，可以讓你輕鬆地將網站部署到 CDN 上，並且得到公開訪問地址，完全不需要自己搭建伺服器。
|
||||
|
||||
|
||||
|
||||
MCP 則是目前很火的模型上下文協議，讓 AI 模型能夠輕鬆地使用各種工具來增強能力，完成更複雜的任務。
|
||||
|
||||
|
||||
|
||||
EdgeOne Pages MCP 的作用就顯而易見了 —— 給 AI 提供網站部署工具，這也是一個比較熱門的 MCP。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 快速實戰
|
||||
|
||||
1）開通 Pages 服務
|
||||
|
||||
首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 開通 Pages 服務：
|
||||
|
||||
|
||||
|
||||
開通服務後，默認進入了專案管理頁面，我們先不急著創建專案：
|
||||
|
||||
|
||||
|
||||
由於等下要通過 MCP 完成網站部署，所以要先獲取 API Token，作為調用服務的憑證：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）配置 MCP
|
||||
|
||||
新建一個專案資料夾 `yupi-blog`，在 Cursor 中打開，然後進入設置，添加 MCP 服務：
|
||||
|
||||
|
||||
|
||||
將這段配置複製粘貼到 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 改成你自己的，並且把註釋刪除掉，否則會報錯：
|
||||
|
||||
|
||||
|
||||
正常情況下，你會看到 MCP 服務成功加載，綠了綠了！
|
||||
|
||||
|
||||
|
||||
這個服務提供了 2 個工具：
|
||||
|
||||
- deploy_html：部署 HTML 內容到 EdgeOne Pages，返回公開訪問 URL
|
||||
- deploy_folder_or_zip：部署資料夾或 ZIP 文件到 EdgeOne Pages，返回公開訪問 URL
|
||||
|
||||
注意，這個 MCP 服務需要 NPX 工具才能在本地成功啟動。NPX 可以直接運行 NPM 包中的命令而無需全局安裝，常用於執行腳手架工具和一次性命令。
|
||||
|
||||
如果你沒有 NPX 命令、或者 Node.js 版本過低（最好不要低於 20），都會導致工具無法加載。
|
||||
|
||||
|
||||
|
||||
這時，你只需要到 [官網安裝 Node.js](https://nodejs.org/zh-cn)，會自動幫你安裝 NPM 和 NPX 工具：
|
||||
|
||||
|
||||
|
||||
如果沒有自動安裝 NPX 工具，那就用 NPM 包管理工具安裝 NPX：
|
||||
|
||||
```bash
|
||||
npm i -g npx
|
||||
```
|
||||
|
||||
|
||||
|
||||
3）生成並部署網站
|
||||
|
||||
準備好 MCP 服務後，下面就來生成網站。輸入下列提示詞，讓 AI 幫我生成個人部落格網站：
|
||||
|
||||
```
|
||||
幫我根據程式設計師魚皮的 GitHub 生成個人部落格網站，極客風格，簡潔大氣；生成完成後部署網站
|
||||
@https://github.com/liyupi
|
||||
```
|
||||
|
||||
查看 AI 的思考過程，它已經想到要使用 EdgeOne Pages 去部署網站了：
|
||||
|
||||
|
||||
|
||||
很快網站就生成並部署完成，可以看到 AI 調用了 MCP 部署 HTML 的工具，得到了訪問地址：
|
||||
|
||||
|
||||
|
||||
直接打開網址就看到效果了，不要太方便！
|
||||
|
||||
|
||||
|
||||
不過目前生成的網站比較簡單，就一個 HTML 頁面，甚至沒有在本地創建代碼文件。
|
||||
|
||||
|
||||
|
||||
4）部署網站目錄
|
||||
|
||||
再來嘗試一個更複雜的專案吧，使用下面的提示詞，讓 AI 利用前端框架開發多頁面網站：
|
||||
|
||||
```
|
||||
幫我根據程式設計師魚皮的 GitHub 生成個人部落格網站，極客風格，簡潔大氣；
|
||||
需要包含多個頁面，要求使用 Vue 框架模組化開發；
|
||||
生成完成後部署網站
|
||||
@https://github.com/liyupi/
|
||||
```
|
||||
|
||||
|
||||
|
||||
這次要等待的時間會比較久，魚皮建議大家趁這個時間接杯水，起來活動活動。最近久坐不動，我感覺自己的肩膀已經硬如磐石了。
|
||||
|
||||
|
||||
|
||||
我們會發現，雖然生成了一大堆代碼，但是並沒有自動部署，只是給出了部署建議：
|
||||
|
||||
|
||||
|
||||
看一下 AI 的思考過程，原來是使用部署工具失敗了：
|
||||
|
||||
|
||||
|
||||
經過我的測試發現，如果想部署網站目錄或壓縮包，最好先在 Pages 網頁版創建一個專案，然後讓 MCP 把網站文件傳到這個專案內。
|
||||
|
||||
那就先利用官方提供的例子，隨便部署一個網站：
|
||||
|
||||
|
||||
|
||||
修改專案的名稱為 `yupi-blog`，直接點擊 "開始部署" 就好：
|
||||
|
||||
|
||||
|
||||
等待部署中，30 秒左右就好了：
|
||||
|
||||
|
||||
|
||||
專案部署成功後，我們修改 Cursor MCP 的配置，填入剛剛創建的專案名稱：
|
||||
|
||||
|
||||
|
||||
然後再跟 AI 對話，讓它幫我部署網站目錄：
|
||||
|
||||
|
||||
|
||||
可以看到這次 AI 成功執行了部署工具，並且得到了訪問地址：
|
||||
|
||||
|
||||
|
||||
看下網站效果，還不錯吧，很有科技感！
|
||||
|
||||
|
||||
|
||||
不過要注意，生成的網站默認使用臨時域名，有效期比較短：
|
||||
|
||||
|
||||
|
||||
如果你有域名的話，建議配置一下自定義域名，就可以無限期訪問啦~
|
||||
|
||||
|
||||
|
||||
怎麼樣，是不是很簡單？等能夠輕鬆在手機上使用 MCP 的時候，試想一下，你走在路上跟朋友聊天，朋友向你推薦了一位博主 —— 程式設計師魚皮，你只需要跟 AI 說一句話，2 分鐘後，就能給朋友訪問介紹這個博主的網站，跟變魔術似的。
|
||||
|
||||
|
||||
|
||||
值得一提的是，EdgeOne Pages 目前應該是免費的，真香了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 三、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" 部署按鈕：
|
||||
|
||||
|
||||
|
||||
3）等待 1 ~ 2 分鐘，專案就上線了！
|
||||
|
||||
部署成功後 Vercel 會自動給你一個域名，比如 `your-project.vercel.app`，你也可以綁定自己的域名。而且每次你往 GitHub 推送代碼，Vercel 都會自動重新部署，完全不用手動操作。
|
||||
|
||||
|
||||
|
||||
### 命令行部署
|
||||
|
||||
除了網頁操作，Vercel 還提供了命令行工具，可以讓我們通過一行命令把自己的專案部署到平台。先用 NPM 安裝 Vercel CLI 工具：
|
||||
|
||||
```bash
|
||||
npm i -g vercel@latest
|
||||
```
|
||||
|
||||
然後，直接在想部署的專案資料夾下輸入 `vercel` 命令，就能部署當前專案了：
|
||||
|
||||
|
||||
|
||||
讓 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：
|
||||
|
||||
|
||||
|
||||
然後就能通過 `username.github.io/repo-name` 訪問了。適合個人主頁、專案文檔、簡單的靜態網站。
|
||||
|
||||
GitHub Pages 的限制是只能部署靜態網站，不能運行後端代碼。但對於純前端專案來說，完全夠用了。而且完全免費，不用擔心流量限制。
|
||||
|
||||
|
||||
|
||||
## 五、雲伺服器部署
|
||||
|
||||
如果你想要更多的控制權，可以租一台雲伺服器，自己部署專案。國內主流的雲服務商有阿里雲、騰訊雲、華為雲等。
|
||||
|
||||
雲伺服器部署的基本流程：
|
||||
|
||||
1）購買雲伺服器（推薦 2 核 4G 配置起步，第一次購買有新用戶優惠）
|
||||
|
||||
2）安裝運行環境，比如 Node.js、Nginx、MySQL 數據庫等
|
||||
|
||||
3）上傳代碼到伺服器
|
||||
|
||||
4）配置 Nginx 反向代理
|
||||
|
||||
5）配置域名和 SSL 證書
|
||||
|
||||
這個過程對於純新手來說會有點兒複雜，但可以使用寶塔面板或 1Panel 這樣的可視化管理工具，大大簡化操作。這些面板提供了圖形化界面，不需要記複雜的命令，點點鼠標就能完成配置。
|
||||
|
||||
|
||||
|
||||
雲伺服器部署的優點是你有完全的控制權，可以隨時調整配置，而且更穩定
|
||||
Reference in New Issue
Block a user