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

小傅哥發表於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的，也見過清北出國的，也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的。但無一例外，這些人從不會給自己設限，甚至是非常自律，很難看到這樣的夥伴會去胡扯、瞎聊、當別人的分母，而是不斷的“折騰”，折騰學習、折騰感興趣的事情、折騰自己的愛好，而高薪職位也只不過是過路的風景。
  • 趁著年輕：承遇朝霞、年少正恰，整裝戎馬、刻印風華！

相關文章