作者:小傅哥
部落格: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,也並不清楚都是什麼。這會有什麼問題嗎,短時間不會有,甚至還會做的很開心,但時間長了需要你承擔更大的職責了呢,又或者需要你自己出去幹點啥了呢,怎麼在冷啟動階段讓自己把這些事拿捏呢?千萬別把補充自己的知識當做卷的藉口,否則坑的是自己!
其實有一臺伺服器可以做很多事情,這不像你自己開虛擬機器,一個模擬環境和真實環境,還是有很大區別的!
你可以用一臺伺服器部署你在工作中遇到的知識,也可以是自己想學習搭建的系統,就像小傅哥折騰的這些內容:
- 搭部落格:https://mp.weixin.qq.com/s/ZoQ0xAphJQkP_pb8H08BMg
- 搞論壇:phpwind、Discuz、wordpress(有部落格和論壇等模板)
- 弄網盤:https://mp.weixin.qq.com/s/gzUrFexHcyCrw7XZ_L7N7w
- 聊天室:https://mp.weixin.qq.com/s/OmXCY4fTfDpkvjlg5ME0ZA
- 其他的:練習下自己的專案、搞個叢集、玩玩ES、弄弄實戰、留著接私活給別人部署演示
而這些內容的練習,都能讓你把一整套從研發到運維的內容玩透,徹底的瞭解域名、備案、ssl、寶塔、Linux常用命令等等。
四、卷,我們搞起來!
1. 先neng個伺服器
首先,無論你是否有伺服器,你都可以跟小傅哥一起學習關於伺服器的使用,我們建了個群專門學習伺服器,新增我的微信:fustack,備註:伺服器學習加群
。
如果你還是一個新使用者小白,那麼可以跟著我的流程一起來,先neng一個便宜的伺服器,學習使用即可。這裡小傅哥給新人弄了個活動,79元即可買一臺一年有效期的伺服器,還是比我以前買的便宜多了!
- 購買連結:https://www.aliyun.com/minisite/goods?taskPkg=1111ydsrwb&pkgSid=11388&recordId=1033318&userCode=is4kfbdt
- 優惠價格:
¥1,234.20¥69
- 參與條件:
¥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填寫進來。
訪問站點
- 地址:http://39.96.73.167/ 在訪問的時候,你換成自己的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的,也見過清北出國的,也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的。但無一例外,這些人從不會給自己設限,甚至是非常自律,很難看到這樣的夥伴會去胡扯、瞎聊、當別人的分母,而是不斷的“折騰”,折騰學習、折騰感興趣的事情、折騰自己的愛好,而高薪職位也只不過是過路的風景。
- 趁著年輕:承遇朝霞、年少正恰,整裝戎馬、刻印風華!