本文轉(zhuǎn)載自我的個(gè)人博客。
前幾天我的個(gè)人網(wǎng)站終于部署上線了，趁現(xiàn)在還記得，趕緊把流程記錄下來(lái)。本文講的是前后端分離的項(xiàng)目的服務(wù)器部署，這里就以我的個(gè)人網(wǎng)站為例子。我的個(gè)人網(wǎng)站前端是react，后端是nodejs，數(shù)據(jù)庫(kù)是mongodb。
為了把項(xiàng)目部署上線，首先我們需要確保這個(gè)項(xiàng)目已經(jīng)在本地跑通了，所謂跑通就是前端，后端，和服務(wù)器都已經(jīng)被串在一起，而且可以正常運(yùn)行了。在這個(gè)基礎(chǔ)上，我們的部署分為以下幾個(gè)步驟：
- 購(gòu)買域名和遠(yuǎn)程服務(wù)器
- 域名解析，實(shí)名制認(rèn)證，備案
- 把項(xiàng)目代碼放在遠(yuǎn)程服務(wù)器上
- 程服務(wù)器安裝數(shù)據(jù)庫(kù)
- 前端編譯靜態(tài)文件
- nginx前端配置
- 解決前后端跨域問(wèn)題
- 項(xiàng)目在線上跑通以及后續(xù)完善
步驟很多，看起來(lái)很嚇人，但是實(shí)際操作起來(lái)還是很快的，下面我們就一步一步的來(lái)講解吧。
1. 購(gòu)買域名和遠(yuǎn)程服務(wù)器
域名和遠(yuǎn)程服務(wù)器推薦在阿里云上購(gòu)買, 原因是購(gòu)買了他們的產(chǎn)品后有一系列很詳細(xì)的教程，對(duì)于新手來(lái)說(shuō)是很友好的。
購(gòu)買后的域名需要進(jìn)行實(shí)名制認(rèn)證，這個(gè)過(guò)程很快，幾乎是即時(shí)的，具體的認(rèn)證方式阿里云上都有詳細(xì)的說(shuō)明。
服務(wù)器我買的是阿里云的輕量應(yīng)用服務(wù)器，物美價(jià)廉，對(duì)于我的個(gè)人網(wǎng)站來(lái)說(shuō)足夠用了。購(gòu)買服務(wù)器時(shí)，會(huì)讓你選擇服務(wù)器的地域，如果你的地域選在國(guó)內(nèi)的話那你的域名是需要備案的，而這個(gè)備案過(guò)程大約需要半個(gè)月，所以著急著項(xiàng)目上線的同學(xué)可以把地域選在香港，是不用備案的。但是服務(wù)器放在香港的缺點(diǎn)就是有點(diǎn)延遲，所以服務(wù)器放在哪里還需要自己權(quán)衡。
購(gòu)買服務(wù)器時(shí)還需要選擇應(yīng)用鏡像和系統(tǒng)鏡像，這里我們沒有用到任何應(yīng)用來(lái)構(gòu)建我們的網(wǎng)站，所以只要選擇系統(tǒng)鏡像就好了。而選擇什么系統(tǒng)呢？什么系統(tǒng)你最熟悉就選擇什么系統(tǒng)，如果你完全是個(gè)小白，而且也不熟悉Linux系統(tǒng)的話，我個(gè)人不負(fù)責(zé)任的推薦windows系統(tǒng)。至于windows系統(tǒng)被嫌棄的不安全等問(wèn)題，對(duì)于我這個(gè)個(gè)人網(wǎng)站來(lái)說(shuō)都是不那么重要的。
2. 域名解析
在對(duì)域名進(jìn)行實(shí)名制認(rèn)證之后(如果你的服務(wù)器地域在國(guó)內(nèi)，還需要進(jìn)行備案)，我們就可以對(duì)域名進(jìn)行解析了。所謂域名解析，就是把域名的指向設(shè)置為我們購(gòu)買的服務(wù)器的ip地址。域名只是一個(gè)方便我們記住的網(wǎng)站的名字，而我們真正需要訪問(wèn)的其實(shí)是服務(wù)器的那個(gè)ip地址。你也可以這么理解：我們通過(guò)域名解析來(lái)把域名和服務(wù)器關(guān)聯(lián)了起來(lái)。
域名解析很簡(jiǎn)單，如果你的域名和服務(wù)器都是在阿里云購(gòu)買的，可以一鍵解析。具體教程阿里云上寫的很清楚，這里就不再贅述。
3. 把項(xiàng)目代碼放在遠(yuǎn)程服務(wù)器上
接下來(lái)我們需要想個(gè)辦法把代碼搬到遠(yuǎn)程服務(wù)器上，這里我推薦使用git。我們可以把項(xiàng)目放在github上之后，再在遠(yuǎn)程服務(wù)器上把代碼clone下來(lái)。關(guān)于git有一個(gè)很淺顯易懂的教程，是廖雪峰老師寫的，這是鏈接。
代碼clone下來(lái)以后不要忘了在服務(wù)器上安裝運(yùn)行代碼所需要的軟件和依賴包。比如我的后端是nodejs所以我就需要安裝node。而依賴包的安裝可以借助包管理工具npm或者是yarn。具體的方法在我的另一篇文章里有，請(qǐng)移步。
4. 遠(yuǎn)程服務(wù)器安裝數(shù)據(jù)庫(kù)
前后端就準(zhǔn)備妥當(dāng)，這時(shí)候我們需要在服務(wù)器上安裝數(shù)據(jù)庫(kù)了。不同的數(shù)據(jù)庫(kù)安裝方法不同，相同的數(shù)據(jù)庫(kù)庫(kù)不同的操作系統(tǒng)安裝方法也不同，這里需要根據(jù)自己的情況去找相應(yīng)的文檔。
如果你也是在windows系統(tǒng)里安裝mongodb數(shù)據(jù)庫(kù)的話，可以參考這個(gè)視頻。
關(guān)于如何在網(wǎng)上準(zhǔn)確的找到自己所需要的資料，這里我想結(jié)合我的經(jīng)驗(yàn)說(shuō)幾句。找資料首先第一想到的應(yīng)該是官方文檔，因?yàn)楣俜轿臋n是最新的，很多數(shù)據(jù)庫(kù)(比如mongodb我就踩過(guò)坑)，版本的變更安裝方法也會(huì)不一樣，第三方網(wǎng)站給出的安裝方法往往都是過(guò)時(shí)的，不適用的。但如果官方文檔讀的云里霧里怎么辦？這個(gè)時(shí)候我推薦去Youtube找視頻看，把視頻按發(fā)布時(shí)間排序，找最新的視頻看。這樣再結(jié)合官方文檔應(yīng)該就沒有問(wèn)題了。
5. 文件編譯
關(guān)于編譯我知道的也不多，所以這里只說(shuō)一下具體我是怎么操作的，留個(gè)坑以后填。
首先是前端代碼的編譯，前端代碼里直接npm run build或者是yarn run build就可以編譯出靜態(tài)文件，這里的靜態(tài)文件是經(jīng)過(guò)壓縮的，所以代碼的加載速度快。另外由于我的前端代碼是用ES6標(biāo)準(zhǔn)寫的，執(zhí)行這個(gè)編譯過(guò)程(如果你正確配置了babel)也幫我把ES6編譯成了服務(wù)器可以識(shí)別的ES5代碼。
然后是后端，后端也使用ES6寫的，所以后端也需要用babel來(lái)編譯一下。
6. nginx前端配置
這里我們使用nginx主要有兩個(gè)目的，第一是我們需要nginx充當(dāng)我們的前端靜態(tài)文件代理服務(wù)器，第二就是我們需要nginx的反向代理幫我們解決跨域的問(wèn)題，因?yàn)槲覀冞@是一個(gè)前后端分離的項(xiàng)目，前后端運(yùn)行在不同的端口上就需要解決跨域的問(wèn)題。
ngnix可以去官網(wǎng)下載，下載完成后找到nginx.conf文件，我的是在目錄C:\nginx-1.14.2\nginx-1.14.2\conf下。打開nginx.conf文件，這里我們重點(diǎn)關(guān)注一下server里面的配置，有幾項(xiàng)要根據(jù)我們的具體情況進(jìn)行編輯。
server {
listen 80;
server_name chenxin.art;
root "C:/xinart/client/build";
location / {
try_files $uri /index.html;
}
}
首先，listen在80端口，沒有問(wèn)題，因?yàn)槲覀冚斎刖W(wǎng)址時(shí)默認(rèn)的就是訪問(wèn)80端口。
server_name后面應(yīng)該填上你自己的域名。
root后面應(yīng)該填你的前端靜態(tài)文件的存放目錄。
location后面的/表示當(dāng)路徑在主頁(yè)的時(shí)候，這里不需要改動(dòng)。花括號(hào)表示訪問(wèn)根目錄里面(也就是你填寫的root目錄)的index.html文件。如果你的入口文件是別的名字的話記得更改。
整個(gè)連起來(lái)，著幾行代碼的意思就是：當(dāng)輸入網(wǎng)址chenxin.art的時(shí)候，nginx會(huì)加載root目錄里的index.html文件。相信理解以后你就知道要改哪些東西了。
到這一步為止，在瀏覽器中輸入你的域名應(yīng)該可以看到靜態(tài)部分的網(wǎng)頁(yè)了，但是你會(huì)發(fā)現(xiàn)所有的ajax請(qǐng)求都會(huì)報(bào)錯(cuò)，因?yàn)槲覀兊那昂蠖诉€沒有真正的連通，還有一個(gè)跨域的問(wèn)題需要解決。
7. 解決前后端跨域問(wèn)題
我們借助nginx的反向代理來(lái)解決跨域的問(wèn)題。具體操作如下：在nginx.conf文件的server配置里新增幾行代碼，現(xiàn)在你的server應(yīng)該如下所示：
server {
listen 80;
server_name chenxin.art;
root "C:/xinart/client/build";
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
別的地方都沒動(dòng)，我們只是新增了一個(gè)location，而且這個(gè)location后面的路徑需要改成你自己的ajax請(qǐng)求的路徑，比如我的是/api。
proxy_pass后面的端口號(hào)也要改一下，改成你的后端運(yùn)行的端口。再后面的代碼我們保持原樣，不用更改。
這新增的幾句代碼的意思是：當(dāng)請(qǐng)求的路徑以/api開頭時(shí)，將請(qǐng)求代理到8080端口，而我的后端就運(yùn)行在8080端口，所以就能夠響應(yīng)請(qǐng)求了。
到這里為止，我們的項(xiàng)目就算是真正的在線上跑通了。
8. 項(xiàng)目在線上跑通以及后續(xù)完善
項(xiàng)目跑通以后還有事情可以做，比如配置https，還有各種優(yōu)化等等，有興趣的同學(xué)可以自己去搜搜資料。
一點(diǎn)小心得
把自己個(gè)人網(wǎng)站的服務(wù)器部署像流水賬這樣寫一遍也還是很有收獲的，那就是很好的找出了自己不懂地方(苦笑)，那些說(shuō)不清楚的地方其實(shí)就是還沒有真正弄懂的地方。因?yàn)椴渴鸱?wù)器涉及的東西太多太雜，一時(shí)半會(huì)想弄清也不現(xiàn)實(shí)，坑多慢慢填呀。。。
