雲開發網站託管悄悄上線了 Next.js 的支援

2020 年 4 月 28 日
筆記
雲開發, 實戰, 騰訊雲

我們知道部署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文件夾，該文件夾下的所有文件就是我們生成的靜態文件，所以接下來要做的事就是開通雲環境並將其部署到靜態網站託管。

開通雲環境

我們打開雲開發並創建一個新的環境：

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

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

初始化成功後我們進到對應的環境中找到靜態網站託管並開始使用：

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

部署上傳

首先在項目根目錄下執行雲開發登錄命令：

tcb login

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

進行上傳操作，這裡我們希望out文件夾下所有的文件一併上傳，所以，我們執行命令

tcb hosting:deploy ./out -e 你的雲開發環境ID

雲環境ID可在環境ID下查看

上傳完成後我們在靜態網站託管中可以看到我們out目錄下的所有文件：

雲開發默認提供了一個與環境對應的默認域名，可以通過這個默認域名進行訪問。

總結

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

創建Next項目並生成靜態文件
開通雲環境與靜態網站託管服務
使用雲開發工具cloudbase/cli命令進行部署上傳

One More Thing

大家都知道，Next.js 一個很強大的功能就是可以做 SSR （Server Side Render），雲開發也支援了 SSR，你期待嗎？

公眾號：騰訊云云開發

騰訊云云開發：//cloudbase.net

雲開發控制台：//console.cloud.tencent.com/tcb?from=12304

☁
更多精彩
掃描二維碼了解更多

Tags: 雲開發實戰騰訊雲