摘要：前言本文講解的是做為前端開(kāi)發(fā)人員，對(duì)服務(wù)器的了解還是小白的我，是如何一步步將項(xiàng)目部署在阿里云的服務(wù)器上，并進(jìn)行性能優(yōu)化，達(dá)到頁(yè)面秒內(nèi)看到，秒內(nèi)看到首屏內(nèi)容的。搭建的項(xiàng)目是采用了主流的前后端分離思想的，這里只講服務(wù)器環(huán)境搭建與性能優(yōu)化。

本文講解的是：做為前端開(kāi)發(fā)人員，對(duì)服務(wù)器的了解還是小白的我，是如何一步步將 node+mongodb 項(xiàng)目部署在阿里云 centos 7.3 的服務(wù)器上，并進(jìn)行性能優(yōu)化，達(dá)到頁(yè)面 1 秒內(nèi)看到 loading ，3 秒內(nèi)看到首屏內(nèi)容的。

搭建的項(xiàng)目是采用了主流的前后端分離思想的，這里只講 服務(wù)器環(huán)境搭建與性能優(yōu)化。

效果請(qǐng)看 http://biaochenxuying.cn/main.html

開(kāi)發(fā)好前端與后端程序。

購(gòu)買(mǎi)服務(wù)器與域名

服務(wù)器上安裝所需環(huán)境（本項(xiàng)目是 node 和 mongodb ）

服務(wù)器上開(kāi)放端口與設(shè)置規(guī)則

用 nginx、apache 或者tomcat 來(lái)提供HTTP服務(wù)或者設(shè)置代理

上傳項(xiàng)目代碼 或者 用碼云或者 gihub 來(lái)拉取你的代碼到服務(wù)器上

啟動(dòng) express 服務(wù)器

優(yōu)化頁(yè)面加載

開(kāi)發(fā)好前端與后端程序，這個(gè)沒(méi)什么好說(shuō)的，就是開(kāi)發(fā)！開(kāi)發(fā)！開(kāi)發(fā)！再開(kāi)發(fā)！

本人一直覺(jué)得程序員應(yīng)該有一個(gè)自己的個(gè)人網(wǎng)站，擁有自己的域名與服務(wù)器。學(xué)知識(shí)或者測(cè)試項(xiàng)目的時(shí)候可以用來(lái)測(cè)試。

阿里云有個(gè)專(zhuān)供學(xué)生的云翼計(jì)劃 阿里云學(xué)生套餐，入門(mén)級(jí)的云服務(wù)器原價(jià)1400多，學(xué)生認(rèn)證后只要114一年，非常劃算。

還是學(xué)生的，直接購(gòu)買(mǎi)；不是學(xué)生了，有弟弟、妹妹的，可以用他們的大學(xué)生身份，購(gòu)買(mǎi)，非常便宜實(shí)用（我購(gòu)買(mǎi)的就是學(xué)生優(yōu)惠套餐）。當(dāng)然阿里云服務(wù)器在每年雙 11 時(shí)都有很大優(yōu)惠，也很便宜，選什么配置與價(jià)格得看自己的用處。

服務(wù)器預(yù)裝環(huán)境可以選擇 CentOS 或者 windows server，，為了體驗(yàn)和學(xué)習(xí) linux 系統(tǒng)，我選擇了CentOS。

再次是購(gòu)買(mǎi)域名 阿里域名購(gòu)買(mǎi)，本人也是在阿里云購(gòu)買(mǎi)的。域名是分 國(guó)際域名與國(guó)內(nèi)域名的，國(guó)際域名是不用備案的，但是國(guó)內(nèi)的域名是必須 ICP備案的 阿里云ICP代備案管理系統(tǒng)，不然不能用，如果是國(guó)內(nèi)域名，如何備案域名，請(qǐng)自己上網(wǎng)查找教程。

當(dāng)然如果你的網(wǎng)站只用來(lái)自己用的話，可以不用買(mǎi)域名，因?yàn)榭梢酝ㄟ^(guò)服務(wù)器的公網(wǎng) ip 來(lái)訪問(wèn)網(wǎng)站內(nèi)容的。

如果購(gòu)買(mǎi)了域名了，還要設(shè)置域名映射到相應(yīng)的公網(wǎng) ip ，不然也不能用。

因本人用的是 MacBook Pro ，所以直接打開(kāi) mac 終端，通過(guò)下面的命令行連接到服務(wù)器。root 是阿里云服務(wù)器默認(rèn)的賬號(hào)名，連接時(shí)候會(huì)叫你輸入密碼，輸入你購(gòu)買(mǎi)時(shí)設(shè)置的或者后來(lái)設(shè)置的密碼。

ssh root@47.106.20.666   //你的服務(wù)器公網(wǎng) ip，比如 47.106.20.666

如圖：

window 系統(tǒng)的，請(qǐng)用 Putty 或 Xshell 來(lái)登錄，可以參考一下這篇文章  把 Node.js 項(xiàng)目部署到阿里云服務(wù)器（CentOs）

一般在新服務(wù)器創(chuàng)建后，建議先升級(jí)一下 CentOS：

yum -y update

常用的 Linux 命令

cd 進(jìn)入目錄
cd .. 返回上一個(gè)目錄
ls -a 查看當(dāng)前目錄
mkdir abc 創(chuàng)建abc文件夾
mv 移動(dòng)或重命名
rm 刪除一個(gè)文件或者目錄

升級(jí)常用庫(kù)文件, 安裝 node.js 需要通過(guò) g++ 進(jìn)行編譯。

yum -y install gcc gcc-c++ autoconf

跳轉(zhuǎn)到目錄：/usr/local/src，這個(gè)文件夾通常用來(lái)存放軟件源代碼：

cd /usr/local/src

下載 node.js 源碼，也可以使用 scp 命令直接上傳，因?yàn)橄螺d實(shí)在太慢了：
下載地址：Downloads，請(qǐng)下載最新的相應(yīng)版本的源碼進(jìn)行下載，本人下載了 v10.13.0 版本的。

https://nodejs.org/dist/v10.13.0/node-v10.13.0.tar.gz

下載完成后解壓：

tar -xzvf node-v10.13.0.tar.gz

進(jìn)入解壓后的文件夾：

cd node-v10.13.0

執(zhí)行配置腳本來(lái)進(jìn)行預(yù)編譯處理：

./configure

編譯源代碼，這個(gè)步驟花的時(shí)間會(huì)很長(zhǎng)，大概需要 5 到 10 分鐘：

make

編譯完成后，執(zhí)行安裝命令，使之在系統(tǒng)范圍內(nèi)可用：

make install

安裝 express 推薦 global 安裝

npm -g install express

建立超級(jí)鏈接, 不然 sudo node 時(shí)會(huì)報(bào) "command not found"

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf

通過(guò)指令查看 node 及 npm 版本：

node -v

npm -v

node.js 到這里就基本安裝完成了。

下載地址：mongodb
下載時(shí)，請(qǐng)選對(duì)相應(yīng)的環(huán)境與版本，因?yàn)楸救说姆?wù)器是 CentOS ，其實(shí)本質(zhì)就是 linux 系統(tǒng)，所以選擇了如下圖環(huán)境與目前最新的版本。

mongodb :

軟件安裝位置：/usr/local/mongodb
數(shù)據(jù)存放位置：/home/mongodb/data
數(shù)據(jù)備份位置：/home/mongodb/bak
日志存放位置：/home/mongodb/logs

下載安裝包

> cd /usr/local
> wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.4.tgz

解壓安裝包，重命名文件夾為 mongodb

tar zxvf mongodb-linux-x86_64-4.0.4.tgz
mv mongodb-linux-x86_64-4.0.4 mongodb

在 var 文件夾里建立 mongodb 文件夾，并分別建立文件夾 data 用于存放數(shù)據(jù)，logs 用于存放日志

mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs

打開(kāi) rc.local 文件，添加 CentOS 開(kāi)機(jī)啟動(dòng)項(xiàng)：

vim /etc/rc.d/rc.local
// 不懂 vim 操作的請(qǐng)自行查看相應(yīng)的文檔教程，比如： vim 模式下，要 按了 i 才能插入內(nèi)容，輸入完之后，要按 shift 加 :wq 才能保存退出。

將 mongodb 啟動(dòng)命令追加到本文件中，讓 mongodb 開(kāi)機(jī)自啟動(dòng)：

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

啟動(dòng) mongodb

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

看到如下信息說(shuō)明已經(jīng)安裝完成并成功啟動(dòng):

forked process: 18394
all output going to: /var/mongodb/logs/log.log

mongodb 默認(rèn)的端口號(hào)是 27017。

如果你數(shù)據(jù)庫(kù)的連接要賬號(hào)和密碼的，要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)管理員，不然直接連接即可。
在 mongo shell 中創(chuàng)建管理員及數(shù)據(jù)庫(kù)。

切換到 admin 數(shù)據(jù)庫(kù)，創(chuàng)建超級(jí)管理員帳號(hào)

use admin
db.createUser({ user: "用戶名", pwd:"登陸密碼", roles:[{ role: "userAdminAnyDatabase", db: "admin" }] })

切換到要使用的數(shù)據(jù)庫(kù)，如 taodb 數(shù)據(jù)庫(kù)，創(chuàng)建這個(gè)數(shù)據(jù)庫(kù)的管理員帳號(hào)

use taodb

db.createUser({ user: "用戶名", pwd:"登陸密碼", roles:[ { role: "readWrite", db: "taodb" }] //讀寫(xiě)權(quán)限 })

重復(fù)按兩下 control+c ，退出 mongo shell。
到這里 mongodb 基本已經(jīng)安裝設(shè)置完成了。

備份與恢復(fù) 請(qǐng)看這篇文章：MongoDB 備份(mongodump)與恢復(fù)(mongorestore)
安裝 node 與 mongodb 也可以參考這篇文章：CentOs搭建NodeJs服務(wù)器—Mongodb安裝

如果你只放靜態(tài)的網(wǎng)頁(yè)，可以參考這個(gè)篇文章 通過(guò)云虛擬主機(jī)控制臺(tái)設(shè)置默認(rèn)首頁(yè)

但是我們是要部署后臺(tái)程序的，所以要看以下的內(nèi)容：

安全組規(guī)則是什么鬼

授權(quán)安全組規(guī)則可以允許或者禁止與安全組相關(guān)聯(lián)的 ECS 實(shí)例的公網(wǎng)和內(nèi)網(wǎng)的入方向和出方向的訪問(wèn)。?
阿里云安全組應(yīng)用案例文檔
80 端口是為 HTTP(HyperText Transport Protocol) 即超文本傳輸協(xié)議開(kāi)放的,瀏覽器 HTTP 訪問(wèn) IP 或域名的 80 端口時(shí),可以省略 80 端口號(hào)

如果我們沒(méi)有開(kāi)放相應(yīng)的端口，

比如我們的服務(wù)要用到 3000 ，就要開(kāi)放 3000 的端口，不然是訪問(wèn)不了的；其他端口同理。

端口都配置對(duì)了，以為能用公網(wǎng) IP 進(jìn)行訪問(wèn)了么 ? 小兄弟你太天真了 ...

還有 防火墻 這一關(guān)呢，如果防火墻沒(méi)有關(guān)閉或者相關(guān)的端口沒(méi)有開(kāi)放，也是不能用公網(wǎng) IP 進(jìn)行訪問(wèn)網(wǎng)站內(nèi)容的。

和安全組端口同理，比如我們的服務(wù)要用到的是 3000 端口，就要開(kāi)放 3000 的端口，不然是訪問(wèn)不了的；其他端口同理。

出于安全考慮還是把防火墻開(kāi)上，只開(kāi)放相應(yīng)的端口最好。

怎么開(kāi)放相應(yīng)的端口 ？ 看下面兩篇文章足矣，這里就不展開(kāi)了。

1. 將nodejs項(xiàng)目部署到阿里云ESC服務(wù)器,linux系統(tǒng)配置80端口,實(shí)現(xiàn)公網(wǎng)IP訪問(wèn)
2. centos出現(xiàn)“FirewallD is not running”怎么辦

我是用了 nginx 的，所以這里只介紹 nginx 。
安裝 nginx 請(qǐng)看這兩篇文章：

1. Centos7安裝Nginx實(shí)戰(zhàn)
2. 阿里云Centos7安裝Nginx服務(wù)器實(shí)現(xiàn)反向代理

開(kāi)啟 ngnx 代理

進(jìn)入到目錄位置

cd /usr/local/nginx

在 nginx 目錄下有一個(gè) sbin 目錄，sbin 目錄下有一個(gè) nginx 可執(zhí)行程序。

./nginx

關(guān)閉 nginx

./nginx -s stop

重啟

./nginx -s reload

基本的使用就是這樣子了。

如下給出我的 nginx 代理的設(shè)置：

我的兩個(gè)項(xiàng)目是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的，如果你們的路徑不是這個(gè)，請(qǐng)修改成你們的路徑。

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  "$remote_addr - $remote_user [$time_local] "$request" "
    #                  "$status $body_bytes_sent "$http_referer" "
    #                  ""$http_user_agent" "$http_x_forwarded_for"";

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    # 如果port_in_redirect為off時(shí)，那么始終按照默認(rèn)的80端口；如果該指令打開(kāi)，那么將會(huì)返回當(dāng)前正在監(jiān)聽(tīng)的端口。
    port_in_redirect off;

    # 前臺(tái)展示打開(kāi)的服務(wù)代理
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #root /home/blog;

        location  / {
            root   /home/blog/blog-react/build/;
            index  index.html;
            try_files $uri $uri/ @router;
            autoindex on;
        }

        location @router{
            rewrite ^.*$ /index.html last;
        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://47.106.136.114:3000/ ;
        }
        gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


    # HTTPS server
    # 管理后臺(tái)打開(kāi)的服務(wù)代理
    server {
        listen       4444;
        server_name  localhost;
        #   charset koi8-r;
        #   ssl_certificate      cert.pem;
        #   ssl_certificate_key  cert.key;

        #   ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;

        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;

        location / {
            root   /home/blog/blog-react-admin/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            autoindex on;
        }
        location @router{
            rewrite ^.*$ /index.html last;
        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://47.106.136.114:3000/ ;
        }
        gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

        error_page   500 502 503 504  /50x.html;
    }
}

我是開(kāi)了兩個(gè)代理的：前臺(tái)展示打開(kāi)的服務(wù)代理和管理后臺(tái)打開(kāi)的服務(wù)代理，這個(gè)項(xiàng)目是分開(kāi)端口訪問(wèn)的。
比如：我的公網(wǎng) ip 是 47.106.20.666，那么可以通過(guò) http://47.106.20.666 即可訪問(wèn)前臺(tái)展示，http://47.106.20.666:4444 即可訪問(wèn)管理后臺(tái)的登錄界面。

至于為什么要寫(xiě)這樣的配置:

try_files $uri $uri/ @router;

location @router{
        rewrite ^.*$ /index.html last;
    }

因?yàn)檫M(jìn)入到文章詳情時(shí)或者前端路由變化了，再刷新瀏覽器，發(fā)現(xiàn)瀏覽器出現(xiàn) 404 。刷新頁(yè)面時(shí)訪問(wèn)的資源在服務(wù)端找不到，因?yàn)?react-router 設(shè)置的路徑不是真實(shí)存在的路徑。
所以那樣設(shè)置是為了可以刷新還可以打到對(duì)應(yīng)的路徑的。

刷新出現(xiàn) 404 問(wèn)題，可以看下這篇文章 react,vue等部署單頁(yè)面項(xiàng)目時(shí),訪問(wèn)刷新出現(xiàn)404問(wèn)題

我是創(chuàng)建了碼云的賬號(hào)來(lái)管理項(xiàng)目代碼的，因?yàn)榇a云上可以創(chuàng)建免費(fèi)的私有倉(cāng)庫(kù)，我在本地把碼上傳到 Gitee.com 上，再進(jìn)入服務(wù)器用 git 把代碼拉取下來(lái)就可以了，非常方便。

具體請(qǐng)看：碼云（Gitee.com）幫助文檔 V1.2

git 的安裝請(qǐng)看： CentOS 7.4 系統(tǒng)安裝 git

如果不想用 git 進(jìn)行代碼管理，請(qǐng)用其他可以連接服務(wù)器上傳文件的軟件，比如 FileZilla。

啟動(dòng) express 服務(wù)，我用了 pm2， 可以永久運(yùn)行在服務(wù)器上，且不會(huì)一報(bào)錯(cuò) express 服務(wù)就掛了，而且運(yùn)行中還可以進(jìn)行其他操作。

安裝：

npm install -g pm2

切換當(dāng)前工作目錄到 express 應(yīng)用文件夾下,執(zhí)行 pm2 命令啟動(dòng) express 服務(wù)：

pm2 start ./bin/www

比如我操作項(xiàng)目時(shí)的基本操作：

cd /home/blog/blog-node
pm2 start ./bin/www // 開(kāi)啟
pm2 stop ./bin/www // 關(guān)閉
pm2 list //查看所用已啟動(dòng)項(xiàng)目：

再看剛剛的 nginx 的一些配置：

server {
        gzip on;
        gzip_buffers 32 4k;
        gzip_comp_level 6;
        gzip_min_length 200;
        gzip_types text/css text/xml application/javascript;
        gzip_vary on;
    }

這個(gè)就是利用 ngonx 開(kāi)啟 gzip，親測(cè)開(kāi)啟之后,壓縮了接近 2/3 的文件大小，本來(lái)要 1M 多的文件，開(kāi)啟壓縮之后，變成了 300k 左右。

還有其他的優(yōu)化請(qǐng)看這篇文章 React 16 加載性能優(yōu)化指南，寫(xiě)的很不錯(cuò)，我的一些優(yōu)化都是參考了這個(gè)篇文章的。

做完一系列的優(yōu)化處理之后，在網(wǎng)絡(luò)正常的情況下，頁(yè)面首屏渲染由本來(lái)是接近 5 秒，變成了 3 秒內(nèi)，首屏渲染之前的 loading 在 1 秒內(nèi)可見(jiàn)了。

本人的個(gè)人博客項(xiàng)目地址：

前臺(tái)展示: https://github.com/biaochenxuying/blog-react
管理后臺(tái)：https://github.com/biaochenxuying/blog-react-admin
后端：https://github.com/biaochenxuying/blog-node
blog：https://github.com/biaochenxuying/blog

本博客系統(tǒng)的系列文章：

react + node + express + ant + mongodb 的簡(jiǎn)潔兼時(shí)尚的博客網(wǎng)站

react + Ant Design + 支持 markdown 的 blog-react 項(xiàng)目文檔說(shuō)明

基于 node + express + mongodb 的 blog-node 項(xiàng)目文檔說(shuō)明

服務(wù)器小白的我,是如何將node+mongodb項(xiàng)目部署在服務(wù)器上并進(jìn)行性能優(yōu)化的

對(duì) 全棧修煉 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號(hào)

我會(huì)不定期更新有價(jià)值的內(nèi)容，長(zhǎng)期運(yùn)營(yíng)。

關(guān)注公眾號(hào)并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請(qǐng)猛戳： Python、Java、Linux、Go、node、vue、react、javaScript