把你的博客拎到雲上生長吧!

bruski 2021-08-15 22:34:24 阅读数:383

本文一共[544]字,预计阅读时长:1分钟~
博客

Ayy yo what's up,這裏是Brrruski aka. 搞程序的Gatsby‍

作為第一篇正式對外的文章,想了很久要分享什麼主題才會比較有意思,還要易上手,還要接地氣🧐 那最近也是看到朋友的博客(基於Hexo搭建的),眼饞裏面的markdown代碼塊、時間線timeline整理以及自動分類與標簽詞雲呀🤩 (天知道我作為程序員是怎麼忍受wordpress / ghost默認的markdown支持的

於是我興致勃勃地鼓搗了一番Hexo博客,在本地已經裝飾的漂漂亮亮了 。到了該部署的環節,我一拍腦袋,不如摒弃我的小水管server,玩一次地道的雲原生部署玩法吧?

經過一早上的踩坑,終於在雲上建好屬於自己的一畝三分地了,簡直比在深圳買了房子裝修完還開心呢(醒醒,你哪來的房子

所以我决定,不如就分享一下我是怎麼把我的Hexo博客拎到雲上去的吧

網站托管(Serving)

讓自己的網站能被大家訪問到,我們需要進行名為網站托管的一系列操作。我們先簡單回答一下關於上網沖浪‍*️ 的兩個靈魂發問:

  1. 🧐 網頁的本質是什麼?
  2. ‍ 我們為什麼能在瀏覽器上搜到並看到網頁?

1. 網頁的本質是什麼?

網頁的本質其實就是一堆按格式書寫的字符,即我們常說的HTML(超文本標記語言),文本的內容大概長這樣:

<!doctype html>
<html>
  <head>
    <title>Bruski's Website</title> 
  </head>
  <body>
    <h1>My Intro</h1>
    <p>Yo whatsup, this is Brrruski aka Coding-Gatsby</p>
    <img src="/image/handsome-selfie.jpg" />
    <audio src="/audio/handome-bgm.jpg" autoplay />
    <video src="/video/me-skating.mp4" controls />
  </body>
</html>

看到裏面的標簽了嗎,我們通過書寫這類瀏覽器能識別的標簽,來創建內容、引用其他資源,經過瀏覽器處理後渲染到屏幕上,就變成我們看到的色彩繽紛、能够交互的網頁啦。

2. 我們為什麼能在瀏覽器上搜索並看到網頁?

設想我們在網上買衣服,我們先按名字搜到某個牌子的衣服,如果找到了提供該衣服的商鋪,購買下單,商家處理好之後發貨,不久後你能穿上心儀的衣服啦。

同理,當我們在瀏覽器的地址欄中輸入某個網址的時候,瀏覽器會發出尋找該網址對應服務的請求,如果找到了,提供該網站服務的服務器會把相應的網頁內容返回給瀏覽器,瀏覽器解析後,網頁內容就呈現在我們眼前了🤩

所以一個網頁要想能被別人訪問到,需要具備滿足以下條件:

  1. 一個能找到你網頁的地址(IP+端口或者域名)
  2. 一個能處理瀏覽器的請求,把資源返回去的服務(HTTP Web服務)

所以網站托管做的事情就是:

  1. 把網頁等資源上傳到某個地方。
  2. 啟動一個能對外提供服務的HTTP Web服務,把我們的網頁內容發送給請求方。
  3. ️ 設置這個服務的訪問地址,可以是IP+端口,也可以起別名(域名)。

網站托管的方式

通過提供HTTP Web服務進行網站托管的方式大致可以分為:

  1. 借助能處理靜態資源的Web Server,如Apache,Nginx。
  2. 由Web Server動態生成HTML內容,如JSP。

由於我們今天的主題是博客托管,我們只討論第一種,只提供靜態資源的方式。

雲原生(Cloud Native)

cloud native
cloud native

首先我們簡單快速了解一下雲原生這個概念,這裏引用了掘金的文章《什麼是雲原生?這回終於有人講明白了》——華為雲開發者社區[1]

雲原生是一種基於雲計算技術的構建和運行應用程序的方法,是一套技術體系和方法論。

雲原生(CloudNative)是一個組合詞,Cloud+Native。

  • Cloud錶示應用程序比特於雲中,而不是傳統的數據中心;
  • Native錶示應用程序從設計之初即考慮到雲的環境;

Pivotal公司的Matt Stine於2013年首次提出雲原生(CloudNative)的概念,對雲原生的定義總結為4個要點 DevOps + 持續交付 + 微服務 + 容器。一句話概括:原生為雲而設計,在雲上以最佳姿勢運行,充分利用和發揮雲平臺的彈性+分布式優勢。

圖片來自掘金-華為雲開發者社區的文章
圖片來自掘金-華為雲開發者社區的文章

其實結合實際理解,雲原生已經具象化地存在於各大雲服務廠商的官網中:雲服務器、雲存儲、雲容器、DevOps流水線等等,他就是一個船新的軟件開發和部署的新生態,幫助開發者們更簡單、更快地打造、發布與維護產品

傳統網站托管 VS 雲原生網站托管

傳統網站托管 VS 雲原生網站托管
傳統網站托管 VS 雲原生網站托管

傳統模式托管和雲原生托管最大的不同在於:資源部署的維度不同

傳統模式按硬件資源為單比特部署,雲托管按功能服務為單比特部署,兩者帶來的服務架構設計、實際操作與效果都有著很大的差別。

傳統網站托管: 我們需要自己維護服務器,把文件上傳到服務器的具體路徑,接著設置Web Server啊,安裝證書 ¥&!# ,一頓操作之後才能完成網站托管。

雲原生托管:文件打包後,上傳到對象存儲服務,設置一下存儲桶為靜態網站托管模式,嗯就可以了,什麼域名啊、證書啊全部自動生成。什麼,你想讓你的網站在全國各地的訪問速度都更快一點?那再到網頁上點擊配置一下CDN加速服務,讓它將你的網頁分發到全國各個邊緣節點中,通過統一的加速域名來訪問,用戶訪問速度杠杠的。

由此可見雲原生托管不僅簡單便捷、靈活按需、省心省錢,而且服務的效果和質量都比傳統模式强 既然雲托管這麼香,那我們趕緊進入實操環節體驗一把🤨

實戰: 把這只Hexo博客拎到雲上吧

️ 明確我們的目標:將Hexo博客項目快速地部署,可以通過HTTPS域名訪問。

注意:實戰的雲服務商選擇騰訊雲,其他雲服務商操作同理

前置准備

  • 安裝好 gitNodeJS與Npm的環境
  • 一個 hexo博客工程,並設置好github倉庫關聯(其他代碼托管服務同理)
  • 一個 騰訊雲賬戶

Hexo博客工程可以下載示例工程:

# Github
git clone https://github.com/bruceeewong/hexo-demo.git
# Gitee碼雲
git clone https://gitee.com/bruceeewong/hexo-demo.git

安裝npm依賴

npm install

預覽頁面效果

npm run server  

通過瀏覽器訪問的本機地址 http://localhost:4000,查看效果:

最後測試打包命令是否正常:

npm run build

如果在當前目錄下新增public目錄,說明打包命令可用,就進入下一步。

開通網站托管相關的雲資源

我們需要開通以下資源:

開通對象存儲服務&上傳靜態資源

根據指引,為了存儲我們的靜態資源,我們需要創建一個存儲桶資源。

注意存儲桶的訪問權限我們先設置為 公有讀私有寫,方便在沒有接入CDN服務前直接訪問網頁。

接下裏來兩步直接按默認的來,點擊創建。

存儲桶創建好之後,我們找到文件列錶>上傳圖片按鈕,挨個把本地構建好的public下的文件夾&文件上傳(好累,這裏只是讓你體會一下沒有自動化工具的辛苦

到這裏,我們已經把靜態資源都傳到存儲桶中了,接下來就是設置其訪問方式。

開啟靜態網站托管模式

到這裏,網站的托管就完成了,是不是不敢相信?我們把訪問節點的URL複制到瀏覽器試試:

怎麼樣,我們是不是已經完成了定下的目標:將Hexo博客項目快速地部署,並可以通過HTTPS域名訪問。

你能做的,豈止如此

複盤一下剛才的操作,最費時的就是手動上傳靜態文件了(可能還不如 scp 傳到服務器快呢)如何擺脫手動上傳文件?解决的辦法無疑就是將這部分操作自動化,讓我們接入Coding CI DevOps服務,創建一條CI/CD流水線,來拉開跟手工部署的差距。

搜索Coding CI服務:

創建項目,這裏只勾選 構建流水線 即可:

選擇流水線模板 React + COS(我們要的只是對接COS上傳的部分)

代碼倉庫選擇 Github 或 碼雲(需完成授權),選中我們的倉庫;關掉的單元測試選項(我們的hexo項目沒有此命令)

接下來的上傳COS Bucket配置部分參考下圖。注意不勾選“創建後觸發構建”,還有一些要配置的地方。

修改一下環境變量>產物的路徑名(hexo的產物路徑叫public 如果選擇的是github,觸發的分支注意有可能需要設置為 main(不知道微軟為啥要改掉master) 最後點擊構建,短短23秒流水線就執行完成了。

這意味著我們以後只需編輯與提交代碼,構建和部署上傳的工作交給流水線去做就好了

最後一步,配置CDN加速服務

CDN內容分發網絡的工作方式大致如下,通過CDN服務的接入,把源站的文件分發至各個邊緣節點。

為了能讓用戶能從最近的CDN節點獲取資源,我們應該只對外開放CDN域名,隱藏存儲桶的訪問路徑(可以設置為私有讀寫)

落到騰訊雲這,有兩種方案:

  • 使用COS提供的默認CDN加速域名
    • 優點:簡單快捷,一鍵生成帶ssl證書的域名
    • 缺點:域名太長
  • 配置自定義加速域名
    • 優點:可定制域名
    • 缺點:配置稍微複雜一些,需要前往CDN控制臺配置

限於篇幅有限,就只介紹默認CDN加速域名的配置:

鑒於我們的hexo博客是將markdown生成html文件,為了防止因為緩存而導致用戶不能看到最新更新的文章,我們還需要設置CDN的緩存配置。

配好默認CDN域名後,把html文件的CDN節點與瀏覽器緩存都設為 不緩存

最後,我們通過CDN加速域名 https://hexo-demo-1257249827.file.myqcloud.com/ 來訪問一下我們的頁面:

快速地打開了,沒有任何問題

總結

至此,我們的Hexo博客就已經正式在雲上托管了️,開罐啤酒慶祝吧,Hooray

我們不僅完成了基礎目標:快速地部署,並可以通過HTTPS域名訪問,還通過添加devops服務與CDN服務,讓我們的開發與訪問速度都提昇了

其實能折騰的東西還有很多,像我還做了Hexo網站主題定制、自定義加速域名、强制HTTPS轉換、SEO優化、ICP+公安備案等,這些操作留給你們去探索吧,我只是那個把你們帶上雲端的男人

今天就寫到這了,還有更多有趣的雲原生玩法,一邊實踐再一遍分享吧

參考資料

[1]

什麼是雲原生?這回終於有人講明白了: https://juejin.cn/post/6844904197859590151

版权声明:本文为[bruski]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815223358031z.html