都說搭部落格簡單,鬼知道後端程式設計師要經歷什麼!

小傅哥發表於2021-11-01


作者:小傅哥
部落格:https://bugstack.cn

沉澱、分享、成長,讓自己和他人都能有所收穫!?

一、我,多能折騰!

? 我跟你說,折騰蓄藍,還能賺錢!

  • 2013年,畢業以學Java的身份進入傳統企業寫C#和PLC,每天5:30下班,總有夥伴找到我幫忙做個網站。PS:要用PHP寫,省伺服器費用!
  • 2014年,租住門臉,下班回來順便,賣電話、記憶體卡、充電線、手機殼、充話費
  • 2015年,搭建 itstack.org 域名部落格,編寫 Netty 5.0 案例,後因 org 域名不能備案,部落格也掛了
  • 2016年,從傳統行業進入網際網路已經半年,開始瘋狂折騰 Java 以前不熟悉的技術
  • 2017年,好奇所接觸的一切新鮮框架技術,羨慕技術大佬的能力,書童一樣學習高併發場景實現,這麼大的呼叫體量怎麼沒有掛
  • 2018年,不只是看了,開始對原始碼動手,把 RPC 實現了一遍,做了一套監控系統,寫了一堆的中介軟體,申請了好幾個專利,差點被淘寶中介軟體團隊挖去。
  • 2019年,從《用Java實現一個JVM》開始,撿回我的熱情,申請並備案域名、搭建 jekyll 部落格、開通公眾號,年底成為 CSDN 部落格專家並已積累公眾號粉絲1k
  • 2020年,2月編寫第一個基於 Netty 實現的仿微信 IM,放到騰訊技術社群參賽,獲得第一名(運營小姐姐告訴我,她把仿微信IM推給了小馬哥,哈哈哈)。同年位元組碼程式設計設計模式面經手冊等PDF相繼出爐,火了 他們都問我是不是位元組的
  • 2021年,趕在圖書節,我的第一本技術書籍《重學Java設計模式》出版了,出書並不是終點,只是想走走沒走過的路、爬爬沒爬過的山,看看風雨過後的彩虹是否那麼絢爛。

結束了嗎? 不,折騰依舊在!

2021年的1024,小傅哥一路趟坑,把300篇文章的bugstack蟲洞棧部落格從 jekyll 升級到 vuepress!

這些年的折騰在域名申請到備案伺服器選擇到上線PHP開發擴充套件功能遷移相容部落格等,經驗和技能儲備都沒問題,也會點 html、css、js、jquery 做自定義的開發處理。但在面對沒接觸過的 vue 時,依舊有點不知道從哪下手,而為了vuepress部落格從能用到好用,一頓操作差點幹拉胯

技術拓寬實力增強薪資拉昇,來吧,一起折騰

二、坑,差點肝拉?

可能你沒自己搞過 vuepress 的部落格,你不知道。它這個官網說啥?說:像數 1, 2, 3 一樣容 tui!糟老頭子壞的很,沒有一點前端知識根本跑不起來,更別說是生產使用,只能算是玩具級別。當然,不要誤會,人家這個也是想著你有vue的知識背景的,不過我不是沒有嗎! 為此在我折騰完把坑趟平以後,知道怎麼正確操作後,還專門錄了個搭建 vuepress 部落格教程的視訊,如下:

嘿,好嘛!有了這個案例後,我就一直在琢嘛,怎麼把我的部落格遷移過來呢,畢竟這套架構可以更好的承載我的文章,也能很大程度的提升閱讀體驗和對部落格的操作空間。

日日思念惦記呀,就跟你處物件一樣,朝為日,暮為月,卿為朝朝暮暮啊!咋整,辦它吧,想過會遇到坑,也提前鋪平墊穩了,但無奈還是會有很多因為沒折騰過,vue 知識儲備不足而遇到的問題。

1. 300篇文章遷移,連結問題

  • 背景:舊版部落格到新版部落格的遷移,不只是想把介面結構更換了,還希望解決文章分類的問題,所以在有些文章會重新擺放它所屬的資料夾。
  • 問題:那麼就會出現文章路徑與原來文章路徑不一致的問題。這其中還包括原有文章中用到的圖片路徑問題。
  • 方案:分兩階段解決,如果目前把舊版文章全部下線會導致很大一部分老使用者,尤其是保留了舊版連結的使用者,在訪問文章時就會出現 404 找不到了文章了,體驗非常不好。所以這裡上新版部落格的同時也保留舊版部落格在同一個伺服器中,另外把伺服器的 404 配置頁面配置到 https://bugstack.cn 以免將來舊版連結幾乎已經沒有什麼流量刪除時,再次出現 404 所以為了安全起見先把 404 頁面配置成首頁,這樣也能滿足使用者找到現有的文章路徑。

2. 瀏覽器限制cookie,解鎖問題

  • 背景:小傅哥的部落格有一個閱讀解鎖功能,這個解鎖是基於公眾號做的開發,瀏覽器生成通過友盟cookie獲取6位的唯一碼,當做使用者的個人ID,再通過這個ID到公眾號輸入後繫結到公眾號個人身份ID上,就解鎖了。
  • 問題:但有些使用者限制了瀏覽器cookie,或者安裝了一些攔截廣告的外掛,那麼 cookie 就不能正確拿到了,一點閱讀全文這個解鎖碼就不唯一了,卡卡的閃。我頭都大了!
  • 方案:咋辦,總不能告訴每個使用者,你把外掛給我刪了 cookie 給我開啟吧,那他們肯定覺得傅哥技術拉胯呀!後來我就想肯定會有一個技術手段能在瀏覽器計算出唯一ID,否則我不登入時候瀏覽器xxxx,怎麼就給我推薦了呢。經過搜尋還真有對應的東西,就是瀏覽器指紋,fingerprintjs 瀏覽器指紋庫,這個庫用於查詢瀏覽器屬性並從中計算雜湊的訪問者識別符號。與 cookie 和本地儲存不同,指紋在匿名/私有模式下保持不變,甚至在清除瀏覽器資料時也保持不變。妥,有了這個技術就妥嘞,在 cookie 限制的情況下,通過瀏覽器指紋獲取唯一ID擷取成文章解鎖碼。

3. 構建檔案雜湊命名,版本問題

  • 背景:看到這的時候我人都傻了,vue 變異出來的檔案竟然 數字+雜湊值.js 想想也對,人家這樣可以更好的保證版本升級,不至於出現快取問題。
  • 問題:有啥問題呢,你看左側本地和右側伺服器,發現沒。只要每次部署一個版本,伺服器端就多出一個新的js檔案,好傢伙這用不了多久,不把我這小伺服器幹滿了嗎!!!刪除?刪錯了呢,那多嚇人!
  • 方案:其實有時候遇到這樣問題不知道咋查你懂吧,搜了半天不如問前端一下,原來這個是可以通過webpack把打包檔名稱處理的,也就是你可以讓每次的構建出來的 js、css、img 檔名,都是一個固定的名字。但還有點小問題,vue 裡是這麼搞,vuepress 怎麼搞呢,找了不少資料終於找到 chainWebpack 可以配置檔名 config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end();

模組打包配置:

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        const dateTime = new Date().getTime();
        
        // 清除js版本號
        config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end();
        config.output.chunkFilename('assets/js/cg-[name].js?v=' + dateTime).end();
        
        // 清除css版本號
        config.plugin('mini-css-extract-plugin').use(require('mini-css-extract-plugin'), [{
            filename: 'assets/css/[name].css?v=' + dateTime,
            chunkFilename: 'assets/css/[name].css?v=' + dateTime
        }]).end();
    }
}

  • 通過這樣配置後,再打包出來的檔案就都是 cg-名稱.js 的檔案了,每次 push 到我的站點伺服器是上就可以只有一份同名的 js 了,不至於把我伺服器搞爆。

4. Java VS PHP 公眾號開發,伺服器資源問題

流程圖

DDD + PHP = 爺青回

  • 背景:因為要開發部落格到公眾號的引流,所以需要對公眾號做一些開發處理。
  • 問題:最初我是使用 Java 語言寫了一版,但目前隨著使用者體量的上升,呼叫我這個跑著 Java 程式的小伺服器,已經有點小馬拉大車了。現象就是服務崩潰,需要重啟!!!
  • 方案:咋辦,花錢升級伺服器?我有技術我花那錢,鬧呢?上PHP呀,這玩意多升伺服器資源,況且我在13年就折騰會了,把DDD思想給我架到PHP上,讓它爺青回!

三、那,還能幹啥?

你覺得視野範圍重要嗎,如果我不曾如此折騰,可能與我相遇的美好,也都將錯過!

哪怕是工作,我也不希望自己是一個工具人。趁年輕、趁著有資源、趁著有時間,多給自己補充一些未來的可能,你現在所學到的所有知識、所結交的所有人脈、所開拓的所有技能,都將會在未來使用上,這些一點一點的點,會聚合成一條條知識線,在撐起你整個人生的頁面。

尤其是現在在大廠,可能很多時候自己接觸的工作範圍是非常侷限的,只是知道自己把程式碼寫好了就可以了,關於它是怎麼跑起來的,部署到哪裡了,域名、VIP、Nginx、CDN、SSL,也並不清楚都是什麼。這會有什麼問題嗎,短時間不會有,甚至還會做的很開心,但時間長了需要你承擔更大的職責了呢,又或者需要你自己出去幹點啥了呢,怎麼在冷啟動階段讓自己把這些事拿捏呢?千萬別把補充自己的知識當做卷的藉口,否則坑的是自己!

其實有一臺伺服器可以做很多事情,這不像你自己開虛擬機器,一個模擬環境和真實環境,還是有很大區別的!

你可以用一臺伺服器部署你在工作中遇到的知識,也可以是自己想學習搭建的系統,就像小傅哥折騰的這些內容:

  1. 搭部落格:https://mp.weixin.qq.com/s/ZoQ0xAphJQkP_pb8H08BMg
  2. 搞論壇:phpwind、Discuz、wordpress(有部落格和論壇等模板)
  3. 弄網盤:https://mp.weixin.qq.com/s/gzUrFexHcyCrw7XZ_L7N7w
  4. 聊天室:https://mp.weixin.qq.com/s/OmXCY4fTfDpkvjlg5ME0ZA
  5. 其他的:練習下自己的專案、搞個叢集、玩玩ES、弄弄實戰、留著接私活給別人部署演示

而這些內容的練習,都能讓你把一整套從研發到運維的內容玩透,徹底的瞭解域名、備案、ssl、寶塔、Linux常用命令等等。

四、卷,我們搞起來!

1. 先neng個伺服器

首先,無論你是否有伺服器,你都可以跟小傅哥一起學習關於伺服器的使用,我們建了個群專門學習伺服器,新增我的微信:fustack,備註:伺服器學習加群

如果你還是一個新使用者小白,那麼可以跟著我的流程一起來,先neng一個便宜的伺服器,學習使用即可。這裡小傅哥給新人弄了個活動,79元即可買一臺一年有效期的伺服器,還是比我以前買的便宜多了!

  • 當你購買伺服器的時候會看到,地域例項作業系統等,地域北京、上海、杭州的網速比較好,張家口的便宜但是網速會比較慢。作業系統預設即可,停機後可以更換。

2. 伺服器介紹

在購買完伺服器後,等待雲平臺數分鐘初始化服務,完事就可以直接使用配置。如下:

  • 重置密碼:點選你的例項,藍色的這個字母,進入後再右側有一個,重置例項密碼,操作。
  • 遠端連結:點選遠端連結即可連結到你服務上,它是一個線上的操作。你可以通過本地的軟體 xshell 連結到服務上去。
  • 更換系統:如果你對自己預設選擇的系統不是很滿意或者有其他需求,都可以點選停止系統,之後開始作業系統更換。

3. 系統更換成寶塔映象

對於伺服器系統來說你可以使用Linux命令安裝各項服務元件,例如k8s、docker、jdk、tomcat、mysql或者php需要的內容等,但對於實際使用的運維來說,我們更希望運維成本越低越好,所以這裡我們選擇了寶塔,這樣一個伺服器運維皮膚來管理我們的伺服器。

在各類的雲平臺上,包括:百度雲、華為雲、阿里雲、騰訊雲,都可以安裝寶塔的,有的雲平臺還會有自己的已經準備好的寶塔映象,這裡我們以阿里雲服務為例,把系統停機更好為寶塔。

停機

  • 位置:點選雲服務的例項,就可以進入到這個頁面
  • 操作:更換系統之前我們需要先進行停機操作,停機後就可以點選更換作業系統了

換系統

選映象

  • 更換完系統進行確認訂單,接下來會跳轉到管理後臺,這時稍等會,伺服器會進行啟動。

4. 配置並登入寶塔

遠端登入

  • 這一步我們直接在網頁上登入了,你也可以使用 xshell 登入公網IP

初始化寶塔

命令:[root@CodeGuide ~]# bt default

配置安全組

  • 寶塔的訪問要配置 8888 埠,否則是不能訪問到的,這個在伺服器的安全組中開放即可。
  • 這裡我們為了方便就直接開啟全部的了,如果你是實際使用,可不能這樣操作,否則很不安全!

登入寶塔

  • 地址:http://39.96.73.xxx:8888/ - 換成你的地址
  • 賬號:使用者名稱和密碼已經在控制檯列印,你可以複製自己的,登入寶塔後可以修改這個預設的密碼

5. 安裝阿帕奇和FTP

接下來我們在寶塔中安裝一個阿帕奇伺服器和FTP,這樣就可以部署和訪問我們的靜態部落格了,也就是一個html,如下:

安裝 Apache

  • 安裝過程中會自動的執行一些命令,這個你不用管,只要默默看著就行了。

安裝 FTP

  • 安裝 FTP 主要是為了通過本地可以把檔案傳送到伺服器上,比如你的一個靜態部落格是 html,就可以通過 FTP 傳到伺服器上。

6. 網站配置

安裝了阿帕奇和FTP我們就可以簡單的配置一個站點了,有了這個站點就可以訪問到我們自己的部落格!

建立站點

  • 建立站點的適合如果你還沒有申請域名,或者域名還沒有備案呢,那麼就可以直接把公網IP填寫進來。

訪問站點

7. 網站內容

  • 在寶塔的檔案裡,你可以選擇第6步驟中新增的站點,在裡面找到你的檔案,做一些修改動作。這個時候在訪問網站,就會發現內容已經是你新的內容了。

8. 域名配置

如果你有域名並已經備案好了,那麼在建立站點的時候就可以直接把域名配置上,在訪問你的網站的時候就可以通過域名訪問了。

  • 新增域名:這個裡面小傅哥配置的是已經申請好並備案了的域名,你配置成你的就可以。記得配置好域名後,需要在你的域名服務裡,通過A記錄把伺服器IP對映配置上去。
  • FTP 配置:為了更加方便的上傳你的檔案,你可以把FTP開啟,這樣就可以通過FTP傳輸配置了。
  • 訪問地址:http://blog.itedus.cn - 由於域名不是在阿里雲,可能http會監測為未備案,拒絕訪問

9. SSL 配置

關於 SSL 的申請可以有很多免費網站提供,也可以在寶塔中申請,如果你是用阿里雲服務,可以免費申請20個 SSL 證照,另外如果你的域名和服務都是在阿里雲,那麼在申請 SSL 可以直接走 DNS 認證,否則你需要把 DNS 資訊手動配置到你自己的域名上去。放心這個在申請的時候都有提示,按照說明配置即可

下載證照

因為我們需要把 ssl 配置到寶塔上,所以這裡需要把 SSL 下載下來,選擇 Apache 格式下載。

配置證照

  • 配置後點選儲存即可,另外需要強制開啟 HTTPS,否則你的網站訪問 http 也能繼續訪問,就沒有意義了。
  • 現在你就可以通過 https,訪問自己的部落格或者網站了,是不看上去高大上了不少!

10. 其他說明

可能你還希望配置 jdk、tomcat,沒關係,在寶塔裡你都可以安裝,也可以安裝 mysql,有了這些入門的內容,剩下的就可以搜尋一些通用配置的內容,也可以在阿里雲中搜尋。

五、嗯,總結一下

  • 講道理,我希望你遇到我,因為總有一些熱情於技術的男人,會帶著你搞點啥,搞著搞著你的薪資就上去了!
  • 做技術號主的兩年多,我把自己定位成37開,70%開源貢獻社群,沉澱、分享,幫助有需要的技術同號。30%做付費內容用於支撐起可以繼續完成70%的事情!
  • 我見過自己的粉絲夥伴應屆生拿到總包50的,也見過清北出國的,也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的。但無一例外,這些人從不會給自己設限,甚至是非常自律,很難看到這樣的夥伴會去胡扯、瞎聊、當別人的分母,而是不斷的“折騰”,折騰學習、折騰感興趣的事情、折騰自己的愛好,而高薪職位也只不過是過路的風景。
  • 趁著年輕:承遇朝霞、年少正恰,整裝戎馬、刻印風華!

相關文章