三分鐘搞定!無需服務(wù)器和域名,快速部署你的線上項目
之前的時候?qū)戇^一個 從0到1,手把手教你部署自己的線上項目 的文章。正常情況下,我們想要部署項目,那么免不了需要使用到 服務(wù)器、域名、web服務(wù) 等等的東西。
但是,很多同學(xué)因為沒有系統(tǒng)的學(xué)習(xí)過,所以乍一看到這些內(nèi)容的時候,難免一臉懵逼。所以說,就會有同學(xué)問:“那有沒有更簡單的方式,可以讓我部署線上項目呢?” 肯定是有的,今天咱們就來看一看
Vercel
Vercel
是一個面向開發(fā)人員的端到端平臺,可創(chuàng)建和部署 Web 應(yīng)用程序。它提供了更快地構(gòu)建和部署 Web 應(yīng)用程序所需的工具、工作流程和基礎(chǔ)設(shè)施,而無需進行額外的配置。支持開箱即用的流行前端框架,其可擴展、安全的基礎(chǔ)架構(gòu)分布在全球,可以從靠近用戶的數(shù)據(jù)中心提供內(nèi)容,以實現(xiàn)最佳速度。
如果但看官方的描述,難免有點不好理解。所以大家就記住一個大白話:可以從 npm 下載一個叫做 Vercel 的包,然后利用這個包就可以直接部署項目。這就是 Vercel
的一個核心作用。
想要使用它也非常簡單,一共可以分為幾步:
1.注冊賬號
首先,我們需要登錄到 Vercel 的官網(wǎng)(https://vercel.com/
)注冊賬號,當(dāng)然你也可以直接選擇 github
賬號進行登錄:
圖片
2.全局安裝 vercel
我們可以直接通過 npm i -g vercel
完成全局安裝,安裝完成之后,可以直接通過 vercel -v
查看到對應(yīng)版本:
圖片
3.創(chuàng)建項目
做好以上兩步之后,vercel
的前置準(zhǔn)備工作就完成了。
那么接下來,我們就可以去創(chuàng)建項目了。創(chuàng)建項目提供了兩種方式:
- 使用 vercel 的現(xiàn)有模板
- 導(dǎo)入原本的項目
那么這里,咱們就使用第二種方式完成。
- 首先使用
vite
創(chuàng)建一個全新的項目npm create vite@latest
圖片
- 接下來通過
vercel --cwd [path-to-project]
命令,部署剛創(chuàng)建的項目
圖片
- 然后我們會進入到交互界面,完成此交互即可完成項目部署
4.基于 vercel 完成部署
共分為 5 步
- 選擇你的 git 倉庫
因為最初已經(jīng)創(chuàng)建過 vercel
的賬戶,并且完成過登錄了,所以可以直接完成登錄
圖片
- 登錄成功之后,會讓我們選擇需要部署的項目,因為咱們是新創(chuàng)建的項目,所以直接按照它的提示進行后續(xù)操作即可
圖片
- 以上操作執(zhí)行完成,那么會有一個打包、部署的等待過程。這個過程一般不會太長,部署完后完成之后,即可得到 配置地址(
Inspect
)、訪問地址(Production
) 等
圖片
比如,根據(jù)這個提示,我們就可以直接通過 https://vite-project-mqy5rs74b-lgd8981289s-projects.vercel.app/
地址完成項目訪問!
圖片
整個過程, 3 分鐘應(yīng)該也用不了吧!