2021了，獨(dú)立開發(fā)一個(gè)網(wǎng)站都需要那些技術(shù)？

時(shí)間：2023-05-25 23:57:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-25 23:57:01 來源：網(wǎng)站運(yùn)營

2021了，獨(dú)立開發(fā)一個(gè)網(wǎng)站都需要那些技術(shù)？：

需求背景

本文所描述的網(wǎng)站是給自己公司做的一個(gè)宣傳網(wǎng)站，用于宣傳公司產(chǎn)品與服務(wù)，屬于門戶網(wǎng)站，功能相對(duì)簡(jiǎn)單，但涉及到的技術(shù)棧著實(shí)不少，這也是自己固定下來的一個(gè)開發(fā)流程，以前都是以個(gè)人身份接一些技術(shù)外包，此次上線的網(wǎng)站也是在服務(wù)流程的正規(guī)化上向前邁了一步，以公司的方式運(yùn)營，可信賴度更高，畢竟有工商稅務(wù)監(jiān)管，比個(gè)人信用背書靠譜多了。

網(wǎng)站策劃

策劃是制作一個(gè)網(wǎng)站的核心，這個(gè)階段需要明確網(wǎng)站的主題領(lǐng)域，并進(jìn)一步研究這個(gè)主題領(lǐng)域之內(nèi)的受眾想法，以用戶驅(qū)動(dòng)來設(shè)計(jì)內(nèi)容模型， 保證做出的網(wǎng)站符合用戶需求，需要注意的是內(nèi)容與其結(jié)構(gòu)的制作需要同表現(xiàn)形式分開，新式界面層出不窮，界面與內(nèi)容過度耦合會(huì)造成頁面反復(fù)設(shè)計(jì)，給企業(yè)帶來維護(hù)上的困難。

網(wǎng)站內(nèi)容會(huì)被切割成小的單位，但又彼此聯(lián)系，根據(jù)不同需求來組合與復(fù)用，內(nèi)容的復(fù)用與代碼的復(fù)用異曲同工，對(duì)于網(wǎng)站中反復(fù)出現(xiàn)的內(nèi)容，將其切割成一個(gè)最小單位，通過CMS系統(tǒng)統(tǒng)一管理，然后根據(jù)內(nèi)容結(jié)構(gòu)設(shè)計(jì)出網(wǎng)站導(dǎo)航，層級(jí)邏輯以及交互邏輯。

界面設(shè)計(jì)

用戶界面的目標(biāo)是要把人和業(yè)務(wù)聯(lián)系起來，設(shè)計(jì)界面就是把內(nèi)容與形式放在一起，將內(nèi)容以合適的方式展現(xiàn)出來，所以我們把界面設(shè)計(jì)的漂亮、舒服、有特色的同時(shí)，需要避免過度設(shè)計(jì)，要以設(shè)計(jì)服務(wù)于內(nèi)容為宗旨。

logo: 位圖放大會(huì)有鋸齒，變虛，一般都會(huì)采用矢量圖型，logo設(shè)計(jì)重點(diǎn)是要符合行業(yè)定位，并與公司的名稱緊密相連，比如我自己的網(wǎng)站logo，圖標(biāo)部分從公司的名字衍生過來，文字部分采用可以免費(fèi)商用的字體《優(yōu)設(shè)標(biāo)題黑》，不可商用字體有侵權(quán)風(fēng)險(xiǎn)，需要注意。

banner圖：首頁banner圖是網(wǎng)站最直觀展示，扁平風(fēng)格插畫，清爽整潔，有很好的視覺與情感傳達(dá)效果，在這里推薦一個(gè)可以免費(fèi)商用的插畫網(wǎng)站StorySet。

配色：Ant Design 可視化色板，主色，輔助色，背景色，背景色可一鍵生成

圖標(biāo)：Ant Design 在 3.9.0 之后，使用 svg 圖標(biāo)替換了原先的 font 圖標(biāo), svg 格式在低端設(shè)備上有更好顯示， 并支持多色圖標(biāo)，所以網(wǎng)站所有圖標(biāo)統(tǒng)一采用svg格式，獲取來源為 iconfont

前端

前端框架：react + react-router-dom + axios + redux，react 路由集成方式和 vue 真是差別很大，對(duì)于習(xí)慣 vue 的開發(fā)者，剛開始使用起來真是丈二和尚摸不著頭腦，在哪實(shí)例化、在哪掛載，在哪全局監(jiān)聽，完全搞不清楚，一度心態(tài)被搞崩。

腳手架: creat-react-app, 幫我們集成好了webpack, 可通過eject方式彈出配置文件，做自定義修改

UI框架：Ant Design，目前用過最好的前端UI框架了，生態(tài)完善，社區(qū)活越，整合了上下游資源，螞蟻金服前端團(tuán)隊(duì)確實(shí)很優(yōu)秀

單元測(cè)試框架：jest, js-dom，前端單元測(cè)試重點(diǎn)是搞清楚要測(cè)什么，測(cè)試用例本質(zhì)上渲染出一個(gè)虛擬組件，通過輸入正確值與錯(cuò)誤值來 mock 代碼的執(zhí)行邏輯，提升程序的健壯性；前端通用組件寫測(cè)試用例是非常有必要的，但業(yè)務(wù)代碼值得商榷，寫測(cè)試用例很多時(shí)候花費(fèi)的時(shí)間比寫代碼還長(zhǎng)，但通過瀏覽器直接來跑，有問題一目了然，這個(gè)需要平衡效率。

動(dòng)態(tài)設(shè)計(jì)庫：Ant Motion，通過組合動(dòng)畫來實(shí)現(xiàn)網(wǎng)站的整體動(dòng)畫效果

其他使用到的社區(qū)庫：enquire-js 響應(yīng)式媒體查詢插件；react-markdown/react-syntax-highlighter/github-markdown-css 用于markdown格式文檔渲染，代碼高亮；react-html5video 視頻播放；react-amap: 地圖渲染

服務(wù)端

1. CMS內(nèi)容管理系統(tǒng)

使用了騰訊云提供的開源CMS內(nèi)容管理系統(tǒng)，可以通過托管域名訪問，整個(gè)系統(tǒng)的前端界面也是基于react開發(fā)，代碼托管在騰訊云部署。

最要的是集成了操作云函數(shù)與云數(shù)據(jù)庫的 JS SDK，可以直接操作數(shù)據(jù)庫，云函數(shù)屬于 Serverless 基礎(chǔ)服務(wù)，無服務(wù)器執(zhí)行環(huán)境對(duì)前端友好，免去了服務(wù)端開發(fā)，這種方式優(yōu)點(diǎn)是節(jié)省時(shí)間，降低開發(fā)成本，但不適用于類似電子商務(wù)類的復(fù)雜系統(tǒng)，

2. 對(duì)象存儲(chǔ)

網(wǎng)站圖片、視頻，使用騰訊云 COS 對(duì)象存儲(chǔ)，COS 提供防盜鏈功能，可屏蔽惡意來源的訪問，配合CDN可以做到圖片加載的毫秒級(jí)響應(yīng)，這個(gè)對(duì)網(wǎng)站很重要，首屏加載速度直接影響用戶體驗(yàn)

3. 內(nèi)容分發(fā)網(wǎng)絡(luò) CDN

購買了100GB國內(nèi)加速流量包，對(duì)于新網(wǎng)站比較實(shí)用，新網(wǎng)站開始訪問量小，根據(jù)訪問量可以隨時(shí)更改套餐

4. 數(shù)據(jù)存儲(chǔ)

采用了文檔型云數(shù)據(jù)庫mongodb，通過nodejs完成增刪改查，其實(shí)很難用，但好在知根知底，操作起來不會(huì)翻車，以免不可收拾。

運(yùn)維

1. 持續(xù)集成

流程上是通過 webhooks 監(jiān)聽 git 推送，遠(yuǎn)端 git 倉庫上配置一個(gè)Jenkins服務(wù)器的接口，當(dāng)有代碼提交時(shí)，遠(yuǎn)程倉庫發(fā)起一個(gè)帶參數(shù)的請(qǐng)求到Jenkins服務(wù)器，jenkins 接到請(qǐng)求后，開始處理代碼檢出、安裝依賴，編輯打包、集成測(cè)試等一系列操作。

webhooks 對(duì)持續(xù)集成非常重要，可以根據(jù)不同的觸發(fā)參數(shù)觸發(fā)不同的構(gòu)建操作，比如 feature-xxx命名的分支執(zhí)行本地開發(fā)造作，release-xxx 命名的分支來執(zhí)行灰度發(fā)布操作，搞定這一套，就距離架構(gòu)師不遠(yuǎn)了，我自己的項(xiàng)目目前用了coding 平臺(tái)提供的持續(xù)集成服務(wù)，只需要寫配置文件就好。

2. 持續(xù)部署

采用docker容器來做服務(wù)端部署，打包后的前端項(xiàng)目先做成docker鏡像，根據(jù)不同版本存儲(chǔ)于制品庫中（也就是docker hub），同樣通過 Jenkins 實(shí)現(xiàn)自動(dòng)構(gòu)建，執(zhí)行一系列shell腳本，推送鏡像到騰訊云（Linux），并啟動(dòng)容器。

docker鏡像有完整的日志與版本記錄，日后線上如果發(fā)生問題，可以做到秒級(jí)版本回滾，docker的可移植性超強(qiáng)，避免了之前開發(fā)環(huán)境、測(cè)試環(huán)境、線上環(huán)境因?yàn)榕渲贸霈F(xiàn)的各種問題，最重要的客戶如果需要變更或是拓展服務(wù)器，可以快速移植，docker容器極大的簡(jiǎn)化了服務(wù)器環(huán)境配置的難度，如果沒有docker光是服務(wù)端環(huán)境配置就夠喝一壺了。

3. 靜態(tài)資源服務(wù)器

使用 Nginx 作為 http/https 服務(wù)器，Nginx 通過 Docker 拉取，Nginx 配置文件在 Dockerfile 中動(dòng)態(tài)寫入，域名監(jiān)聽，https 403端口跳轉(zhuǎn)，location 靜態(tài)資源路徑配置，ssl證書路徑配置都在這個(gè)文件中完成。

發(fā)布上線

1. 域名

選擇一些大的服務(wù)商，一般通過騰訊云或是阿里云來購買，方便備案，首選 .com 后綴，名稱與公司名稱關(guān)聯(lián)，越簡(jiǎn)短越好，方便記憶。

2. SSL證書配置

網(wǎng)站如果沒有配置ssL證書，瀏覽器會(huì)提示客戶”您與此網(wǎng)站建立的連接不安全“，非特殊情況下建議安裝ssL證書，安裝后可通過https訪問，數(shù)據(jù)傳輸加密，相對(duì)比較安全，購買域名一般免費(fèi)ssl證書，比如我自己用的就是免費(fèi)的 ssl 證書，品牌為 TrustAsia，但是只能單域名解析，有多域名需求的還時(shí)得購買。

SSL 證書首先需要給域名添加一條 TXT 類型的 DNS 解析記錄，并完成域名驗(yàn)證，之后手動(dòng)安裝證書密鑰到服務(wù)器，不同的服務(wù)器系統(tǒng)（linux/windows）和安裝方式（Apache/Nginx/Tomcat/Jetty）等云服務(wù)器廠商都會(huì)提供教程，docker部署需要做一個(gè)容器與宿主機(jī)的映射，這塊有些不一樣。

3. 云服務(wù)器

云服務(wù)廠商的虛擬主機(jī)，1核 2GB內(nèi)存 2Mbps公網(wǎng)帶寬，對(duì)于一般的門戶網(wǎng)站夠用了，一年的費(fèi)用大概一千多。

備案

備案分為工信部ICP域名備案與公安部安全備案，騰訊云的ICP備案可以使用備案小程序，在手機(jī)上完成備案，以前一直使用阿里云，騰訊云比阿里云流程簡(jiǎn)單些，阿里云需要下載打印《網(wǎng)站備案真實(shí)性核驗(yàn)單》以及郵寄幕布拍照。

公安部備案?jìng)€(gè)人感覺要稍微復(fù)雜些，國家規(guī)定必須在網(wǎng)站開通后（也就是完成了ICP備案后）30日內(nèi)進(jìn)行公安備案，展示類的門戶網(wǎng)站還好，如果是交互性網(wǎng)站，基本需要跑一趟網(wǎng)監(jiān)大隊(duì)，提交紙質(zhì)資料。

推廣

這里的推廣單指搜索引擎優(yōu)化(SEO)，雖然現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代，新媒體興起，流量入口更多元化了，但仍有大量用戶依然習(xí)慣通過搜索在網(wǎng)上獲取內(nèi)容，尤其是以網(wǎng)絡(luò)為生產(chǎn)力的用戶，所以會(huì)從技術(shù)與內(nèi)容角度來調(diào)整網(wǎng)站層級(jí)結(jié)構(gòu)，html標(biāo)簽，頁面標(biāo)題等，用于提高收錄率與自然排名。

寫在最后

目前所有已經(jīng)上線的項(xiàng)目，都是通過遠(yuǎn)程合作方式，合作伙伴主要是在工作中認(rèn)識(shí)的一些實(shí)力較強(qiáng)的設(shè)計(jì)師，后端開發(fā)、運(yùn)維工程師等，本文主要介紹定制開發(fā)一個(gè)網(wǎng)站都涉及到那些技術(shù)點(diǎn)，如果有對(duì)開展副業(yè)有興趣的朋友，剛好也在網(wǎng)站策劃、新媒體營銷、設(shè)計(jì)、開發(fā)、運(yùn)維等方面有經(jīng)驗(yàn)，歡迎私信我，不搞虛的，咱們就聊聊掙錢。