如何將前后端分離的react+node+express+mongodb項(xiàng)目部署上線到阿里云

前期將項(xiàng)目代碼寫(xiě)好之后，第一次嘗試上線，遇到不少問(wèn)題。今天索性把過(guò)程梳理一下，希望以后的新手遇到跟我一樣的問(wèn)題時(shí)，能少走彎路。
這是一個(gè)前后端分離的項(xiàng)目。前端使用React?Antd-Mobile構(gòu)建用戶界面，狀態(tài)管理使用Redux；服務(wù)端是node+express，使用的是mongodb數(shù)據(jù)庫(kù)。云服務(wù)器和域名在阿里云購(gòu)買(mǎi)，數(shù)據(jù)庫(kù)直接在云服務(wù)器上安裝的mongodb。
項(xiàng)目地址：

一、購(gòu)買(mǎi)云服務(wù)器
關(guān)于如何購(gòu)買(mǎi)和配置云服務(wù)器，可以參考慕課網(wǎng)的這篇教程，很詳細(xì)，跟著做就行了：\color{blue}{服務(wù)器購(gòu)買(mǎi)及配置}

二、云服務(wù)器上安裝所需環(huán)境

1. 登陸云服務(wù)器
**
根據(jù)第一步的教程，獲得一個(gè)登錄云服務(wù)器的賬號(hào)和密碼。賬號(hào)一般是root，用ssh root賬號(hào)@公網(wǎng)ip，登錄云服務(wù)器。
這里要注意，在你輸入密碼的時(shí)候，頁(yè)面不會(huì)有任何顯示！等到輸入完畢，回車(chē)確定，頁(yè)面才會(huì)返回成功登錄的信息！

image.png

2. 安裝所需環(huán)境
安裝node
首先服務(wù)端是基于node.js，因此我們需要先安裝node。安裝步驟可參考：在云服務(wù)器上安裝node

找個(gè)文件夾，用于存放node安裝包。比如/usr/local，cd進(jìn)入這個(gè)文件夾：
cd /usr/local

wget資源鏈接地址，下載安裝包。我下載的是10.13.0版本的。如果要下載指定版本，把下面的10.13.0版本號(hào)替換一下就行了。
wget https://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0-linux-x64.tar.xz

解壓安裝包【如果你替換了版本號(hào)，此處注意，版本號(hào)要與你下載的對(duì)應(yīng)】
tar -xvf node-v10.13.0-linux-x64.tar.xz

查看安裝是否成功，可以看到剛剛解壓完畢的安裝包的bin文件夾下，有node、npm、npx三個(gè)文件。
cd node-v10.13.0-linux-x64/bin/ && ls

image.png

node環(huán)境安裝好了！這時(shí)候在這個(gè)文件夾下輸入node -v可以查看node版本號(hào)！但是此時(shí)node還是局部命令，不能全局使用，我們還需要給node命令創(chuàng)建軟連接，使之變?yōu)槿置睿?br> ln -s /usr/local/node-v10.13.0-linux-x64/bin/node /usr/local/bin/
ln -s /usr/local/node-v10.13.0-linux-x64/bin/npm /usr/local/bin/

這兩行代碼的意思是，把/usr/local/node-v10.13.0-linux-x64/bin文件夾下的node和npm文件的快捷方式，放到/usr/local/bin文件夾下。如此一來(lái)，node命令和npm命令就可以全局使用了.

安裝nginx
瀏覽器處于安全性考慮，存在同源策略，即同一域名、同一主機(jī)地址、同一端口號(hào)之間才能相互訪問(wèn)，否則就按照跨域進(jìn)行處理。由于我的項(xiàng)目是一個(gè)需要前后端交互的單頁(yè)面應(yīng)用，因此不可避免地要用到代理轉(zhuǎn)發(fā)。nginx是一款高性能的Http和反向代理服務(wù)器。配置nginx反向代理，可以解決我們的跨域問(wèn)題。

云服務(wù)器上開(kāi)放服務(wù)端端口
我的項(xiàng)目代碼當(dāng)中，服務(wù)端的端口號(hào)設(shè)置成3001。因此首先需要在云服務(wù)器中開(kāi)放3001這個(gè)端口?！镜顷懓⒗镌? - >控制臺(tái)- - >云服務(wù)器ECS - ->"我的資源"里的云服務(wù)器- ->管理 - ->本實(shí)例安全組 - ->配置規(guī)則 - -> 添加安全組規(guī)則 - -> 端口范圍 3001/3001 ，授權(quán)對(duì)象0.0.0.0/0】

安裝nginx
安裝過(guò)程就不贅述了，具體可參考阿里云服務(wù)器上安裝Nginx教程
我將nginx文件最后安裝在了/usr/local/webserver/nginx文件夾下。

配置nginx
按照以上安裝路徑，找到配置文件。我的配置文件在該目錄下的conf文件夾下，文件名nginx.conf。cd到conf文件夾下，vim進(jìn)入nginx.conf文件的編輯模式：
cd /usr/local/webserver/nginx/conf
vim nginx.conf

nginx配置文件的常見(jiàn)結(jié)構(gòu)當(dāng)中，從外到內(nèi)的順序依次是「http」「server」「location」。我們需要配置的往往就是http里的內(nèi)容。

vim打開(kāi)文件之后，首先把nginx.conf文件最開(kāi)始的user改為root


image.png

接受請(qǐng)求的服務(wù)器，需要將不同的請(qǐng)求按照規(guī)則轉(zhuǎn)發(fā)到相應(yīng)的后端。在nginx里我們可以通過(guò)構(gòu)建server（虛擬主機(jī)）的方式，來(lái)實(shí)現(xiàn)為不同的后端配置隔離。

image.png

這里主要注意：代碼的上傳參考服務(wù)器購(gòu)買(mǎi)及配置

前端代碼的上傳
在云服務(wù)器的root目錄下創(chuàng)建www文件夾
mkdir /root/www
cd /root/www
在本地打開(kāi)一個(gè)新的終端，進(jìn)入到打包好的前端代碼目錄下。
我的是react項(xiàng)目文件，在項(xiàng)目根目錄下npm run build打包得到build文件夾。那么此時(shí)可以直接將build文件夾拖到終端進(jìn)行操作：
使用scp命令上傳build里的所有文件到云服務(wù)器的/root/www目錄下：
scp -r local_dir user@ip:remote_dir

local_dir：本地文件
    user：云服務(wù)器的用戶名，默認(rèn)是root；
    ip：云服務(wù)器的公網(wǎng)ip；
    remote_dir：云服務(wù)器上你要存放前端代碼的文件夾。

例如我在本地build文件夾下打開(kāi)命令行工具，想要把代碼傳到遠(yuǎn)程服務(wù)器的/root/www文件夾下，那么我需要執(zhí)行命令：
scp -r ./* root@47.103.xxx.xx:/root/www
這里的 ./*的意思是當(dāng)前文件夾下的所有文件；47.103.xxx.xx是我的公網(wǎng)ip。

服務(wù)端代碼的上傳
和上述方法一致。首先在云服務(wù)器上創(chuàng)建一個(gè)存放服務(wù)端代碼的文件夾：
mkdir /root/services
cd /root/services
進(jìn)入服務(wù)端項(xiàng)目根目錄，用scp命令上傳代碼：
scp -r ./* root@47.103.xxx.xx:/root/services
代碼都上傳完畢之后，檢查一下nginx里的配置，和代碼里開(kāi)放的端口、地址；前后端對(duì)應(yīng)的文件地址在ngixn里的配置是否一致。
我是用的node+express搭建的服務(wù)器，涉及到訪問(wèn)地址和端口的文件在項(xiàng)目文件根目錄/bin/www文件里：

由于我用的是mongodb數(shù)據(jù)庫(kù)，使用mongoose工具進(jìn)行數(shù)據(jù)處理。所以在操作數(shù)據(jù)庫(kù)的文件當(dāng)中，連接數(shù)據(jù)庫(kù)的地址也要注意不要寫(xiě)錯(cuò)：

mongodb://0.0.0.0:27017/gzhipin2中的gzhipin2是我的數(shù)據(jù)庫(kù)名稱。
這里用到了端口號(hào)27017。因此我們需要在云服務(wù)器的安全組規(guī)則里，開(kāi)放27017端口。

那么在云服務(wù)器上，我們還需要安裝一下Mongodb數(shù)據(jù)庫(kù)，才能進(jìn)行數(shù)據(jù)的存儲(chǔ)和處理

安裝Mongodb數(shù)據(jù)庫(kù)
詳細(xì)安裝過(guò)程參考：阿里云服務(wù)器安裝Mongodb數(shù)據(jù)庫(kù)

按照步驟，將mongodb安裝在/usr/local/mongodb文件夾下。
啟動(dòng)mongodb：
cd /usr/local/mongodb/bin;
./mongod --config /usr/local/mongodb/mongodb.conf.
停止mongodb：
./mongod -shutdown -dbpath=/usr/local/mongodb/data

至此，我們?cè)谠品?wù)器上安裝好了node環(huán)境，Nginx工具、Mongodb數(shù)據(jù)庫(kù)，也上傳了前端代碼、服務(wù)端代碼。

總結(jié)

  • 安裝好Nginx之后，重點(diǎn)是如何配置Nginx的反向代理。注意nginx.conf文件當(dāng)中，http–>server里的location地址不要寫(xiě)錯(cuò)。
 server {
        listen       80;
        server_name  www.xxx.xxx;
        location / {
            root   /root/www;
            index  index.html index.htm;
        }
        location ~/api/ {
            proxy_pass   http://0.0.0.0:3001;
        }

以上配置的意思是：當(dāng)我在瀏覽器當(dāng)中輸入域名www.xxx.xxx時(shí)，頁(yè)面將會(huì)自動(dòng)跳轉(zhuǎn)到/root/www文件夾下，并打開(kāi)默認(rèn)的index.html。如果www文件夾下沒(méi)有index.html文件，那么頁(yè)面就會(huì)報(bào)錯(cuò)。
當(dāng)發(fā)出的url請(qǐng)求當(dāng)中包含api字段時(shí)，nginx就會(huì)把請(qǐng)求轉(zhuǎn)發(fā)給地址http://0.0.0.0:3001，從而解決跨域問(wèn)題。

當(dāng)服務(wù)端文件與數(shù)據(jù)庫(kù)連接時(shí)，連接地址最好用0.0.0.0。這個(gè)地址在服務(wù)端表示所有的IPV4地址。如果一個(gè)服務(wù)器有多個(gè)IP地址，并且我們?cè)O(shè)置的監(jiān)聽(tīng)地址是0.0.0.0，那么我們無(wú)論是通過(guò)哪個(gè)ip地址都可以訪問(wèn)該服務(wù)。
給有需要的新手參考，在我的項(xiàng)目當(dāng)中:
前端訪問(wèn)后端的地址為：公網(wǎng)ip: 后端端口
后端訪問(wèn)數(shù)據(jù)庫(kù)的地址為0.0.0.0:27017/數(shù)據(jù)庫(kù)名
上傳到云服務(wù)器的服務(wù)端代碼，需要打開(kāi)運(yùn)行，否則會(huì)報(bào)錯(cuò)5xx。我當(dāng)時(shí)就是犯了這個(gè)錯(cuò)誤，一直認(rèn)為是哪里的接口url沒(méi)寫(xiě)對(duì)，花費(fèi)了不少時(shí)間進(jìn)行排查，最后才發(fā)現(xiàn)后端文件上傳之后沒(méi)有開(kāi)啟。
要設(shè)置數(shù)據(jù)庫(kù)、服務(wù)端在后臺(tái)運(yùn)行，需要安裝一個(gè)forever包，這樣就不用每次都啟動(dòng)一下項(xiàng)目文件/數(shù)據(jù)庫(kù)了：
首先登陸云服務(wù)器，安裝forever：
npm i forever -g
forever start app.js 啟動(dòng)app文件
forever stop app.js 停止app文件
安裝完畢之后執(zhí)行forever，會(huì)顯示找不到命令。別急，這是因?yàn)閒orever命令被安裝到了node文件夾下:
cd /usr/local/node-v10.13.0-linux-x64/bin。
可以看到bin文件夾下有一個(gè)forever文件。我們把它添加到快捷方式：
ln -s /usr/local/node-v10.13.0-linux-x64/bin/forever /usr/local/bin

項(xiàng)目中我們的服務(wù)端文件在/root/services下，那么只要執(zhí)行forever start /root/services，就可以永久開(kāi)啟服務(wù)端文件運(yùn)行！

數(shù)據(jù)庫(kù)的永久開(kāi)啟也是如此，執(zhí)行forever start /usr/local/mongodb/bin/mongod,即可永久開(kāi)啟mongodb。

到此為止，一個(gè)前后端分離的項(xiàng)目就部署上線完畢！
如有什么疑問(wèn)，可以在評(píng)論區(qū)留言溝通。希望喜歡前端的新手們少走彎路～
————————————————
版權(quán)聲明：本文為CSDN博主「夏末_前端有意思」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/xiamocsdn/article/details/100535519

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容