Next如何部署到靜態(tài)網(wǎng)站托管

時(shí)間：2023-07-13 07:24:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-13 07:24:02 來源：網(wǎng)站運(yùn)營

Next如何部署到靜態(tài)網(wǎng)站托管：?我們知道部署web應(yīng)用程序的最佳方式是作為靜態(tài)HTML應(yīng)用程序，因?yàn)樗麑λ阉饕婧苡押?，速度快等等，這對我們寫個(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)目

1. 利用腳手架創(chuàng)建一個(gè)項(xiàng)目 npx create-next-app 項(xiàng)目名稱 此處項(xiàng)目名稱為你的項(xiàng)目根目錄名稱
   
2. 創(chuàng)建完成后我們進(jìn)入到項(xiàng)目中 cd 項(xiàng)目名稱
   
3. 我們需要在跟目錄中新建一個(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文件寫入，如果只是測試生成首頁和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'} }; },};

1. 在package中加入一個(gè)script命令 "export": "next export"
2. 我們運(yùn)行下列代碼來生成靜態(tài)文件

npm run buildnpm 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)對環(huán)境進(jìn)行初始化(此過程大概2~3分鐘)。

初始化成功后我們進(jìn)到對應(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下查看

上傳完成后我們在靜態(tài)網(wǎng)站托管中可以看到我們out目錄下的所有文件


云開發(fā)默認(rèn)提供了一個(gè)與環(huán)境對應(yīng)的默認(rèn)域名，可以通過這個(gè)默認(rèn)域名進(jìn)行訪問。

總結(jié)

我們總結(jié)一下步驟，大體上只有三步

1. 創(chuàng)建Next項(xiàng)目并生成靜態(tài)文件

2. 開通云環(huán)境與靜態(tài)網(wǎng)站托管服務(wù)

3. 使用云開發(fā)工具cloudbase/cli命令進(jìn)行部署上傳