【玩轉騰訊雲】Next如何部署到雲開發靜态網站托管？

我們知道部署web應用程式的最佳方式是作為靜态HTML應用程式，因為他對搜尋引擎很友好，速度快等等，這對我們寫個人部落格這樣的小型網站無異于非常nice。如果你的應用可以作為靜态HTML，那麼可以試試Next.js。

它可以把一個應用程式作為靜态頁面導出，那麼導出的靜态頁面怎麼部署到靜态托管呢？我們以雲開發靜态托管服務為例。

什麼是雲開發？

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

首先我們需要準備的環境以及工具如下：

必要環境:

node.js

開通雲環境

開發工具：

create-next-app

@cloudbase/cli

下面我們來詳細操作~

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

`npm i create-next-app`

複制

以及雲開發工具@cloudbase/cli

`npm i @cloudbase/cli`

複制

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

建構Next項目

利用腳手架建立一個項目 npx create-next-app 項目名稱 此處項目名稱為你的項目根目錄名稱
建立完成後我們進入到項目中 cd 項目名稱
我們需要在跟目錄中建立一個next.config.js檔案

module.exports = {
    exportTrailingSlash: true,
    exportPathMap: function () {
         return {
            '/': {page: '/'}
         };
     },
};

複制

如果你希望生成的靜态檔案不隻包含首頁和404頁面(Next自動生成),那麼可以在next.config.js中加入

'/about': {page: '/about/about'}

,并在pages下建立一個about檔案夾并建立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"
我們運作下列代碼來生成靜态檔案

npm run build
    npm run export

複制

我們發現根目錄中生成了一個out檔案夾，該檔案夾下的所有檔案就是我們生成的靜态檔案，是以接下來要做的事就是開通雲環境并将其部署到靜态網站托管。

image.png

開通雲環境

我們打開雲開發并建立一個新的環境

image.png

這裡要注意選擇是按量計費的模式(隻有按量計費才能開通靜态網站托管)。

image.png

建立成功後會自動對環境進行初始化(此過程大概2~3分鐘)。

image.png

初始化成功後我們進到對應的環境中找到靜态網站托管并開始使用

image.png

等待靜态網站服務初始化後就可以使用啦~

部署上傳

首先在項目根目錄下執行雲開發登入指令 tcb login

image.png

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

image.png

進行上傳操作，這裡我們希望out檔案夾下所有的檔案一并上傳，是以，我們執行指令 tcb hosting:deploy ./out -e 你的雲開發環境ID

【玩轉騰訊雲】Next如何部署到雲開發靜态網站托管？
image.png

雲環境ID可在環境ID下檢視

image.png

上傳完成後我們在靜态網站托管中可以看到我們out目錄下的所有檔案

image.png

雲開發預設提供了一個與環境對應的預設域名，可以通過這個預設域名進行通路。

image.png

總結

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

建立Next項目并生成靜态檔案
開通雲環境與靜态網站托管服務
使用雲開發工具cloudbase/cli指令進行部署上傳