近期在處理一個新的專案,該專案是一個靜態的網站,所以之後要部屬的伺服器就可以朝向靜態託管的方向來尋找,既便宜部屬又方便。靜態託管顧名思義就是託管的網站是不需要依賴主伺服器後端的處理,又或者網站的後端邏輯是利用其他服務來達成,單純利用前端的架構來呈現整體網頁。靜態託管非常適合前端團隊或是想要呈現自己個人前端作品時的呈現解決方案,目前市面上有許多靜態託管的免費方案(Cloudflare Pages、Github Pages 等等),各家都有優缺點,可以依照每個人的需求以及喜好來挑選。這一篇就來針對 Vercel 來介紹介紹。
Vercel 是一個提供很多現代前端架構的網頁託管平台( Next.js、React、Vue、Angular、Blazor….等等)。使用這一類的靜態託管平台,可以不用煩惱建置以及部屬的困擾,Vercel 有整合 Github、GitLab、Bitbucket 三大 Git 原始碼託管平台,只需要設定一次,之後如果有新的推送時,就會自動化部屬建置新的程式。Vercel 也提供了 100GB 的流量可以免費使用,對於網站的初期或是小範圍的使用應該是蠻足夠的。這一次的教學會著重於 Vercel 的使用,以及將 Blazor WebAssembly 部屬到這一類靜態託管平台。就讓我們開始吧!
網站資訊
網站名稱-Vercel
網站網址-vercel.com
重點免費項目
- 100GB 頻寬
- SSL
- CI/DI 建置
- CDN
- 自定義個人網域
- DDoS
- Serverless Function
新增專案
註冊帳號後就可以開始新增一個新的專案
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_001.jpg?resize=1012.5%2C659&ssl=1)
選擇你的 Git 儲存庫,看你將程式碼放在哪裡。而這邊使用 Github 來做示範。選擇完後就會列出你 Git 儲存庫中的所有專案,並選擇你要部屬的專案。
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_002.jpg?resize=1012.5%2C659&ssl=1)
專案設定
由於這一次我要使用 Blazor WebAssembly 來操作示範。而大多這一類靜態託管建置都不支援 .NET,所以這邊 Framework Preset 就選擇 Other,後面再來設定建置參數。
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_003.jpg?resize=1012.5%2C659&ssl=1)
設定主要專案的位置,根據 .NET 專案資料夾架構來說要指定到你要建置的專案資料夾
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_004.jpg?resize=1012.5%2C659&ssl=1)
下面就是 .NET 專案建置的基本指令。由於示範的專案版本是 .NET8,所以下面是以 .NET8 的環境來建置,可以依照個人需求來調整建置的版本。貼上建置指令時直接貼上到 BUILD COMMAND 即可
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh;
chmod +x dotnet-install.sh;
./dotnet-install.sh -c 8.0 -InstallDir ./dotnet8;
./dotnet8/dotnet --version;
./dotnet8/dotnet publish -c Release -o output;
OUTPUT DIRECTORY 也代表是建置輸出的位置
/output/wwwroot
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_005.jpg?resize=1012.5%2C659&ssl=1)
部屬 / 建置
設定沒問題後就可以開始建置與部署了!整體來說 Vercel 建置速度算快了(跟隔壁的 Cloudflare Pages 比較)
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_006.jpg?resize=1012.5%2C659&ssl=1)
建置完成
如果沒有什麼問題的話,就可以看到灑花的畫面,之後就可以到後台做更進階的設定。
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_007.jpg?resize=1012.5%2C661&ssl=1)
到後台後,點擊 Visit 就可以直接到剛剛部屬好的網頁了!
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_008.jpg?resize=1012.5%2C659&ssl=1)
自定義域名
原本 Vercel 只要建置成功就會給你一個預設的域名。但往往我們想要有個人化的域名,來提升品牌的見識度。在 Vercel 的個人化域名也是屬於免費項目的其中一項。
設定方式也很簡單,首先要到 Settings > Domains 來做設定。輸入完你的個人化域名後按 Add
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_009.jpg?resize=1012.5%2C659&ssl=1)
接著發現它要求我們設定 DNS
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_010.jpg?resize=1012.5%2C659&ssl=1)
這邊以 Cloudflare 來當作操作範例。輸入剛剛看到的 DNS 資訊後照著輸入即可。有一個特別需要注意的地方,Cloudflare 需要關掉 Proxy 狀態,單純以 DNS 來處理,Vercel 才會通過設定。
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_011.jpg?resize=1012.5%2C313&ssl=1)
設定完成!
![](https://i0.wp.com/zerotech.club/wp-content/uploads/2022/01/Vercel_012.jpg?resize=1012.5%2C659&ssl=1)
本次範例 Git Repositories
專案名稱-Blazor.WASM.Loading
專案網址-github.com/KacterLin/Blazor.WASM.Loading
部屬網址-blazor-wasm-loading.vercel.app