云開發(fā) 部署 Next.js 項目

我們知道部署web應用程序的最佳方式是作為靜態(tài)HTML應用程序，因為他對搜索引擎很友好，速度快等等，這對我們寫個人博客這樣的小型網(wǎng)站無異于非常nice。如果你的應用可以作為靜態(tài)HTML，那么可以試試Next.js。

它可以把一個應用程序作為靜態(tài)頁面導出，那么導出的靜態(tài)頁面怎么部署到靜態(tài)托管呢？我們以云開發(fā)靜態(tài)托管服務為例。

什么是云開發(fā)？

可以理解為它為我們提前做好了很多的事(例如負載均衡，冷備熱備，網(wǎng)絡安全等等)，使我們只需關注業(yè)務邏輯即可。就像包餃子一樣，提前有人給你準備好餃子餡和發(fā)好的面，我們只需要包餃子就可以了。詳細了解可以到云開發(fā)查看

首先我們需要準備的環(huán)境以及工具如下：

必要環(huán)境:

node.js

開通云環(huán)境

開發(fā)工具：

create-next-app

@cloudbase/cli

下面我們來詳細操作~

首先我們進行安裝create-next-app

npm i create-next-app

以及云開發(fā)工具@cloudbase/cli

npm i @cloudbase/cli

npm命令是在安裝node.js時自動安裝

構建Next項目

利用腳手架創(chuàng)建一個項目

npx create-next-app 項目名稱

此處項目名稱為你的項目根目錄名稱

創(chuàng)建完成后我們進入到項目中

cd 項目名稱

我們需要在跟目錄中新建一個next.config.js文件

module.exports = {


    exportTrailingSlash: true,


    exportPathMap: function () {


         return {


            '/': {page: '/'}


         };


     },


};

如果你希望生成的靜態(tài)文件不只包含首頁和404頁面(Next自動生成),那么可以在next.config.js中加入'/about': {page: '/about/about'},并在pages下新建一個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'}


        };


     },


};

在package中加入一個script命令

"export": "next export"

我們運行下列代碼來生成靜態(tài)文件

npm run build
npm run export

我們發(fā)現(xiàn)根目錄中生成了一個out文件夾，該文件夾下的所有文件就是我們生成的靜態(tài)文件，所以接下來要做的事就是開通云環(huán)境并將其部署到靜態(tài)網(wǎng)站托管。

開通云環(huán)境

我們打開云開發(fā)并創(chuàng)建一個新的環(huán)境

這里要注意選擇是按量計費的模式(只有按量計費才能開通靜態(tài)網(wǎng)站托管)。

創(chuàng)建成功后會自動對環(huán)境進行初始化(此過程大概2~3分鐘)。

初始化成功后我們進到對應的環(huán)境中找到靜態(tài)網(wǎng)站托管并開始使用

等待靜態(tài)網(wǎng)站服務初始化后就可以使用啦~

部署上傳

首先在項目根目錄下執(zhí)行云開發(fā)登錄命令

tcb login

在彈出的頁面進行授權操作

進行上傳操作，這里我們希望out文件夾下所有的文件一并上傳，所以，我們執(zhí)行命令

tcb hosting:deploy ./out -e 你的云開發(fā)環(huán)境ID

云環(huán)境ID可在環(huán)境ID下查看

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

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

總結

我們總結一下步驟，大體上只有三步

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

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

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