免費(fèi)AI編程助手
云開發(fā) 部署 Next.js 項(xiàng)目
我們知道部署web應(yīng)用程序的最佳方式是作為靜態(tài)HTML應(yīng)用程序，因?yàn)樗麑?duì)搜索引擎很友好，速度快等等，這對(duì)我們寫個(gè)人博客這樣的小型網(wǎng)站無異于非常nice。如果你的應(yīng)用可以作為靜態(tài)HTML，那么可以試試Next.js。
它可以把一個(gè)應(yīng)用程序作為靜態(tài)頁面導(dǎo)出，那么導(dǎo)出的靜態(tài)頁面怎么部署到靜態(tài)托管呢？我們以云開發(fā)靜態(tài)托管服務(wù)為例。
什么是云開發(fā)？
可以理解為它為我們提前做好了很多的事(例如負(fù)載均衡，冷備熱備，網(wǎng)絡(luò)安全等等)，使我們只需關(guān)注業(yè)務(wù)邏輯即可。就像包餃子一樣，提前有人給你準(zhǔn)備好餃子餡和發(fā)好的面，我們只需要包餃子就可以了。詳細(xì)了解可以到云開發(fā)查看
首先我們需要準(zhǔn)備的環(huán)境以及工具如下：
必要環(huán)境:
node.js
開通云環(huán)境
開發(fā)工具：
create-next-app
@cloudbase/cli
下面我們來詳細(xì)操作~
首先我們進(jìn)行安裝create-next-app
npm i create-next-app
以及云開發(fā)工具@cloudbase/cli
npm i @cloudbase/cli
npm命令是在安裝node.js時(shí)自動(dòng)安裝
構(gòu)建Next項(xiàng)目
利用腳手架創(chuàng)建一個(gè)項(xiàng)目
npx create-next-app 項(xiàng)目名稱
此處項(xiàng)目名稱為你的項(xiàng)目根目錄名稱
創(chuàng)建完成后我們進(jìn)入到項(xiàng)目中
cd 項(xiàng)目名稱我們需要在跟目錄中新建一個(gè)next.config.js文件
module.exports = {
exportTrailingSlash: true,
exportPathMap: function () {
return {
'/': {page: '/'}
};
},
};
如果你希望生成的靜態(tài)文件不只包含首頁和404頁面(Next自動(dòng)生成),那么可以在next.config.js中加入'/about': {page: '/about/about'},并在pages下新建一個(gè)about文件夾并創(chuàng)建about.js文件寫入，如果只是測(cè)試生成首頁和404就夠了，那么直接跳到第4步即可
const about = () => (
<div>about</div>
)
export default about
附上next.config.js添加后的完整代碼：
module.exports = {
exportTrailingSlash: true,
exportPathMap: function () {
return {
'/': {page: '/'},
'/about': {page: '/about/about'}
};
},
};
在package中加入一個(gè)script命令
"export": "next export"
我們運(yùn)行下列代碼來生成靜態(tài)文件
npm run build
npm run export
我們發(fā)現(xiàn)根目錄中生成了一個(gè)out文件夾，該文件夾下的所有文件就是我們生成的靜態(tài)文件，所以接下來要做的事就是開通云環(huán)境并將其部署到靜態(tài)網(wǎng)站托管。
開通云環(huán)境
我們打開云開發(fā)并創(chuàng)建一個(gè)新的環(huán)境
這里要注意選擇是按量計(jì)費(fèi)的模式(只有按量計(jì)費(fèi)才能開通靜態(tài)網(wǎng)站托管)。
創(chuàng)建成功后會(huì)自動(dòng)對(duì)環(huán)境進(jìn)行初始化(此過程大概2~3分鐘)。
初始化成功后我們進(jìn)到對(duì)應(yīng)的環(huán)境中找到靜態(tài)網(wǎng)站托管并開始使用
等待靜態(tài)網(wǎng)站服務(wù)初始化后就可以使用啦~
部署上傳
首先在項(xiàng)目根目錄下執(zhí)行云開發(fā)登錄命令
tcb login
在彈出的頁面進(jìn)行授權(quán)操作
進(jìn)行上傳操作，這里我們希望out文件夾下所有的文件一并上傳，所以，我們執(zhí)行命令
tcb hosting:deploy ./out -e 你的云開發(fā)環(huán)境ID
云環(huán)境ID可在環(huán)境ID下查看
上傳完成后我們?cè)陟o態(tài)網(wǎng)站托管中可以看到我們out目錄下的所有文件
云開發(fā)默認(rèn)提供了一個(gè)與環(huán)境對(duì)應(yīng)的默認(rèn)域名，可以通過這個(gè)默認(rèn)域名進(jìn)行訪問。
總結(jié)
我們總結(jié)一下步驟，大體上只有三步
- 創(chuàng)建Next項(xiàng)目并生成靜態(tài)文件
- 開通云環(huán)境與靜態(tài)網(wǎng)站托管服務(wù)
- 使用云開發(fā)工具cloudbase/cli命令進(jìn)行部署上傳
更多建議：