如何將代碼部署到騰訊云網(wǎng)站靜態(tài)托管

時間：2023-05-07 04:24:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-07 04:24:01 來源：網(wǎng)站運(yùn)營

如何將代碼部署到騰訊云網(wǎng)站靜態(tài)托管：

前言

之前將網(wǎng)站代碼部署到 coding 上,并成功遷移到騰訊云上存儲桶 cos,但依舊發(fā)現(xiàn)很麻煩,而且主要是對象存儲cos是收費(fèi)的,每天看賬號余額不足,著實難受

看到騰訊云今年推出的靜態(tài)網(wǎng)站托管,于是躍躍欲試,試過后,果然是強(qiáng)大

前提準(zhǔn)備

⒈ 登錄騰訊云平臺,進(jìn)入控制臺

⒉ 在頂部菜單欄的云產(chǎn)品中找到云開發(fā)下的靜態(tài)網(wǎng)站托管(如下圖所示)

視頻講解

• 如何將代碼部署到騰訊云網(wǎng)站靜態(tài)托管(上)
• 如何將代碼部署到騰訊云網(wǎng)站靜態(tài)托管(下)

創(chuàng)建云開發(fā)壞境

如果使用騰訊云的靜態(tài)網(wǎng)站托管,需要先創(chuàng)建一個云壞境,它會自動的構(gòu)建初始化一個壞境

在你創(chuàng)建好后,你只需要把本地打包好的 dist 文件扔到該壞境的根目錄下就可以了,相當(dāng)于只是做了一個上傳代碼的操作,而背后的部署,容器等處理,靜態(tài)網(wǎng)站托管自動幫你處理了的

將本地打包的代碼放置到根目錄

當(dāng)你創(chuàng)建好壞境后,并且添加成功自定義域名(需要備案),并且解析成功后,可以配置 ssl 證書,以 https 安全訪問

你就可以將本地打包后的代碼扔到你創(chuàng)建好的壞境當(dāng)中去了的(如下所示)

(你可以手動上傳代碼文件,也可以通過命令行cli工具方式上傳)

使用 cloudbase cli 工具部署文件到 cloudBase

科普一下靜態(tài)網(wǎng)站托管

cloudBase是騰訊云提供的一個新的能力,使用cloudBase靜態(tài)網(wǎng)站托管可以為自己創(chuàng)建的 web 應(yīng)用,靜態(tài)資源提供快速,安全的托管服務(wù)

只需要輸入一個命令,就可以快速部署靜態(tài)資源,并且使用cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))加快資源的訪問速度(這個是要收費(fèi)的,如果不清楚的,不要隨意使用,是有代價的)

主要功能

HTTPS:cloudBase 靜態(tài)網(wǎng)站托管內(nèi)置了HTTP與HTTPS,無需額外配置就可以使用,可以申請免費(fèi)的 ssl 證書,有效期一年,這個確實挺方便的

自定義域名:cloudBase 靜態(tài)網(wǎng)站支持自定義域名,可以通過自己的私有域名訪問靜態(tài)資源,但前提要準(zhǔn)備好備案的域名,否則無法實現(xiàn)自定義域名

快速分發(fā):靜態(tài)資源將會被緩存在遍布各地的 cdn 邊緣服務(wù)器上,無論你的用戶身處何處,內(nèi)容都可以快速加載(這個也是我比較看重的)

命令行部署: 利用cloudBase cli可以輕松部署文件到cloudBase

安裝 cloudBase cli 工具

1. 安裝 Node.js,可以從官網(wǎng)下載,選擇版本 LTS,并且版本大于 8.6.0+

npm - v; // 可以查看到安裝的node版本

1. 使用 npm 安裝 cli

npm i -g @cloudbase/cli

1. 或使用 Yarn 安裝

yarn global add @cloudbase/cli警告

如果npm install -g @cloudbase/cli失敗,可能需要修改npm權(quán)限,或者以系統(tǒng)管理員身份運(yùn)行如下代碼

sudo npm install -g @cloudbase/cli

1. 測試 cloudbase-cli 是否安裝成功

使用cloudbase -v可以查看cli的版本,若終端有輸出,那么就表示成功了的

cloudbase - v;這個 cloudbase 命令可以簡寫成tcb,是云開發(fā)產(chǎn)品的簡稱(即 Tencent cloud base),可以使用tcb -h查看所有 tcb 的命令

確保已成功開通云開發(fā)服務(wù)

在開始使用云開發(fā)服務(wù)之前，需要登錄騰訊云云開發(fā)控制臺，確保已經(jīng)開通了云開發(fā)服務(wù)，并且已經(jīng)創(chuàng)建了可以使用的環(huán)境

登錄

登錄騰訊云賬號,獲取到授權(quán)后,cloudBase cli才能操作資源,cloudBase cli提供了兩種授權(quán)方式

⒈ 騰訊云-云開發(fā)控制臺

⒉ 云 API 密鑰授權(quán)

騰訊云-云開發(fā)控制臺授權(quán)

在終端中輸入下面命令

tcb login當(dāng)你輸入這行命令后,會自動打開云開發(fā)控制臺獲取授權(quán),并同意授權(quán)按鈕允許cloudBase cli獲取授權(quán)

騰訊云-云 API 密鑰授權(quán)

首先要騰訊云官網(wǎng)獲取獲取云 API 密鑰,然后在終端中輸入如下命令

tcb login --key緊接著,輸入云 API 密鑰的SecretId和SecretKey即可完成登錄

ci 中的登錄

在 ci(持續(xù)集成)構(gòu)建中,可以使用下面的方式通過 API 密鑰直接登錄

tcb login --apikeyId xxx --apiKey xxx至此 cloudbase-cli 壞境已經(jīng)完成

全量部署

云開發(fā) cli 提供了直接部署網(wǎng)站文件的命令,在需要部署的文件夾目錄下,直接運(yùn)行hosting:deploy命令即可

將當(dāng)前目錄下所有文件部署到靜態(tài)網(wǎng)站中，如下所示

$ cd dist$ cloudbase hosting deploy -e envId(此為壞境的ID,在自己的云壞境中可以查看到)當(dāng)你執(zhí)行這條命令時,可以部署成功,但會提示這條命令即將被廢棄的,只需要按照提示

重新輸入指定的命令就可以了的

部署文件

有時候,并不想要全量的部署,只需要上傳某單個指定的文件,那么就可以使用下面的命令,當(dāng)不指定cloudPath時,文件會上傳到根目錄

cloudbase hosting deploy localPath(本地路徑) cloudpath(云壞境目錄的路徑) -e envId如下示例所示

# 將當(dāng)前目錄的文件部署到根目錄,即將 hosting 目錄下的所有文件部署到根目錄,如果不指明hosting本地目錄,默認(rèn)時上傳當(dāng)前目錄下的所有文件cloudbase hosting deploy . -e envId# 將 static 目錄下的 index.js 文件部署到 static/index.jscloudbase hosting deploy ./static/index.js static/index.js -e envId注意

當(dāng)您使用 vue.history 模式時，需要在靜態(tài)網(wǎng)站-設(shè)置欄中配置錯誤頁面為 App 依賴的頁面。 部署文件單個文件理論最大值為 50TB，文件數(shù)量無限制，具體以實際情況為準(zhǔn)

查看云開發(fā)環(huán)境的信息

使用下面的命令展示靜態(tài)網(wǎng)站的狀態(tài),訪問域名等信息

cloudbase hosting detail -e envId

刪除文件

使用下面的命令可以刪除靜態(tài)網(wǎng)站的存儲空間中的文件或文件夾

cloudbase hosting delete cloudPath(云環(huán)境路徑) -e envId

查看文件列表

使用下面的命令部署展示靜態(tài)網(wǎng)站存儲空間中的文件

cloudbase hosting list -e envId

路徑說明

• localPath 為本地文件或文件夾的路徑，為 目錄/文件名 的形式，如 ./index.js、static/css/index.css 等
• cloudPath 為云存儲文件或文件夾的相對根目錄的路徑，為 目錄/文件名 的形式，如 index.js、static/css/index.js等

注意

Windows 系統(tǒng)中 localPath 為本地路徑形式，是系統(tǒng)可以識別的路徑，通常使用 / 分隔符。cloudPath 是云端文件路徑，均需要使用 /分隔符

在上傳文件時,路徑時要格外注意的

注意事項

⒈ 如果使用 wordpress 創(chuàng)建了一個初始化壞境,它的云數(shù)據(jù)庫 TencentDB 的 CynosDB 是收費(fèi)的

⒉ 若壞境中沒有部署任何應(yīng)用,可以將cynosDB刪除掉,不刪除,會一直占用資源,每小時都會扣費(fèi),土豪的,隨意

⒊ 靜態(tài)網(wǎng)站托管也是收費(fèi)的,它是按量進(jìn)行扣費(fèi),如果你想完全使用免費(fèi)的托管,可以選擇使用 github pages,但是訪問速度,不一定能夠得到保障.

總結(jié)

總得來說,使用靜態(tài)網(wǎng)站托管網(wǎng)站還是挺方便,快捷的,這個云開發(fā) CloudBase很厲害,能夠部署很多應(yīng)用

像Express應(yīng)用,Vue應(yīng)用,Nuxt SSR應(yīng)用,React應(yīng)用,Koa應(yīng)用.Nodejs云托管等應(yīng)用,甚至自己在上面搭建一個壞境,都可以.

確實是厲害,一鍵部署,無感知,不需要去操心 docker 容器,以及擔(dān)心壞境的混淆等,省去了運(yùn)維的操作,弱化后端,運(yùn)維的能力,讓開發(fā)者專注自身業(yè)務(wù)開發(fā),達(dá)到快速上線,實現(xiàn)自己想要的能力

靜態(tài)網(wǎng)站托管本身就是依賴云開發(fā)cloudBase的,如今,市面上的技術(shù)框架服務(wù),基本上都覆蓋了的,不得不承認(rèn)

騰訊云云開發(fā)在這方面的先進(jìn)

相關(guān)參考文檔

• 靜態(tài)網(wǎng)站托管
• 使用 cli 靜態(tài)網(wǎng)站托管
• 原文出處-https://coder.itclan.cn/