伺服器小白的我,是如何將 node+mongodb 專案部署在伺服器上並進行效能優化的

BiaoChenXuYing發表於2018-11-26

BiaoChenXuYing

前言

本文講解的是:做為前端開發人員,對伺服器的瞭解還是小白的我,是如何一步步將 node+mongodb 專案部署在阿里雲 centos 7.3 的伺服器上,並進行效能優化,達到頁面 1 秒內看到 loading ,3 秒內看到首屏內容的。

搭建的專案是採用了主流的前後端分離思想的,這裡只講 伺服器環境搭建與效能優化。

效果請看 biaochenxuying.cn/main.html

1. 流程

  • 開發好前端與後端程式。
  • 購買伺服器與域名
  • 伺服器上安裝所需環境(本專案是 node 和 mongodb )
  • 伺服器上開放埠與設定規則
  • 用 nginx、apache 或者tomcat 來提供HTTP服務或者設定代理
  • 上傳專案程式碼 或者 用碼雲或者 gihub 來拉取你的程式碼到伺服器上
  • 啟動 express 伺服器
  • 優化頁面載入

2. 內容細節

2.1 開發好前端與後端程式

開發好前端與後端程式,這個沒什麼好說的,就是開發!開發!開發!再開發!

2.2 購買伺服器與域名

本人一直覺得程式設計師應該有一個自己的個人網站,擁有自己的域名與伺服器。學知識或者測試專案的時候可以用來測試。

阿里雲有個專供學生的雲翼計劃 阿里雲學生套餐,入門級的雲伺服器原價1400多,學生認證後只要114一年,非常划算。

還是學生的,直接購買;不是學生了,有弟弟、妹妹的,可以用他們的大學生身份,購買,非常便宜實用(我購買的就是學生優惠套餐)。當然阿里雲伺服器在每年雙 11 時都有很大優惠,也很便宜,選什麼配置與價格得看自己的用處。

伺服器預裝環境可以選擇 CentOS 或者 windows server,,為了體驗和學習 linux 系統,我選擇了CentOS。

學生優惠套餐

再次是購買域名 阿里域名購買,本人也是在阿里雲購買的。域名是分 國際域名與國內域名的,國際域名是不用備案的,但是國內的域名是必須 ICP備案的 阿里雲ICP代備案管理系統,不然不能用,如果是國內域名,如何備案域名,請自己上網查詢教程。

域名

當然如果你的網站只用來自己用的話,可以不用買域名,因為可以通過伺服器的公網 ip 來訪問網站內容的。

如果購買了域名了,還要設定域名對映到相應的公網 ip ,不然也不能用。

域名解析

3. 伺服器上安裝所需環境(本專案是 node 和 mongodb )

3.1 登入伺服器

因本人用的是 MacBook Pro ,所以直接開啟 mac 終端,通過下面的命令列連線到伺服器。root 是阿里雲伺服器預設的賬號名,連線時候會叫你輸入密碼,輸入你購買時設定的或者後來設定的密碼。

ssh root@47.106.20.666   //你的伺服器公網 ip,比如 47.106.20.666
複製程式碼

如圖:

登入成功效果

window 系統的,請用 Putty 或 Xshell 來登入,可以參考一下這篇文章 把 Node.js 專案部署到阿里雲伺服器(CentOs)

一般在新伺服器建立後,建議先升級一下 CentOS:

yum -y update
複製程式碼

常用的 Linux 命令

cd 進入目錄
cd .. 返回上一個目錄
ls -a 檢視當前目錄
mkdir abc 建立abc資料夾
mv 移動或重新命名
rm 刪除一個檔案或者目錄
複製程式碼

3.2 安裝 node

升級常用庫檔案, 安裝 node.js 需要通過 g++ 進行編譯。

yum -y install gcc gcc-c++ autoconf
複製程式碼

跳轉到目錄:/usr/local/src,這個資料夾通常用來存放軟體原始碼:

cd /usr/local/src
複製程式碼

下載 node.js 原始碼,也可以使用 scp 命令直接上傳,因為下載實在太慢了: 下載地址:Downloads,請下載最新的相應版本的原始碼進行下載,本人下載了 v10.13.0 版本的。

下載 node.js 原始碼

https://nodejs.org/dist/v10.13.0/node-v10.13.0.tar.gz
複製程式碼

下載完成後解壓:

tar -xzvf node-v10.13.0.tar.gz
複製程式碼

進入解壓後的資料夾:

cd node-v10.13.0
複製程式碼

執行配置指令碼來進行預編譯處理:

./configure
複製程式碼

編譯原始碼,這個步驟花的時間會很長,大概需要 5 到 10 分鐘:

make
複製程式碼

編譯完成後,執行安裝命令,使之在系統範圍內可用:

make install
複製程式碼

安裝 express 推薦 global 安裝

npm -g install express
複製程式碼

建立超級連結, 不然 sudo node 時會報 "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
複製程式碼

通過指令檢視 node 及 npm 版本:

node -v
複製程式碼
npm -v
複製程式碼

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

3.2 安裝 mongodb

下載地址:mongodb 下載時,請選對相應的環境與版本,因為本人的伺服器是 CentOS ,其實本質就是 linux 系統,所以選擇瞭如下圖環境與目前最新的版本。

mongodb

mongodb :

軟體安裝位置:/usr/local/mongodb
資料存放位置:/home/mongodb/data
資料備份位置:/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 用於存放資料,logs 用於存放日誌

mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs
複製程式碼

開啟 rc.local 檔案,新增 CentOS 開機啟動項:

vim /etc/rc.d/rc.local
// 不懂 vim 操作的請自行檢視相應的文件教程,比如: vim 模式下,要 按了 i 才能插入內容,輸入完之後,要按 shift 加 :wq 才能儲存退出。
複製程式碼

將 mongodb 啟動命令追加到本檔案中,讓 mongodb 開機自啟動:

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
複製程式碼

啟動 mongodb

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
複製程式碼

看到如下資訊說明已經安裝完成併成功啟動:

forked process: 18394
all output going to: /var/mongodb/logs/log.log
複製程式碼

mongodb 預設的埠號是 27017。

如果你資料庫的連線要賬號和密碼的,要建立資料庫管理員,不然直接連線即可。 在 mongo shell 中建立管理員及資料庫。

切換到 admin 資料庫,建立超級管理員帳號

use admin
db.createUser({ user: "使用者名稱", pwd:"登陸密碼", roles:[{ role: "userAdminAnyDatabase", db: "admin" }] })
複製程式碼

切換到要使用的資料庫,如 taodb 資料庫,建立這個資料庫的管理員帳號

use taodb
複製程式碼
db.createUser({ user: "使用者名稱", pwd:"登陸密碼", roles:[ { role: "readWrite", db: "taodb" }] //讀寫許可權 })
複製程式碼

重複按兩下 control+c ,退出 mongo shell。 到這裡 mongodb 基本已經安裝設定完成了。

備份與恢復 請看這篇文章:MongoDB 備份(mongodump)與恢復(mongorestore) 安裝 node 與 mongodb 也可以參考這篇文章:CentOs搭建NodeJs伺服器—Mongodb安裝

3.3 伺服器上開放埠與設定安全組規則

如果你只放靜態的網頁,可以參考這個篇文章 通過雲虛擬主機控制檯設定預設首頁

但是我們是要部署後臺程式的,所以要看以下的內容:

安全組規則是什麼鬼

授權安全組規則可以允許或者禁止與安全組相關聯的 ECS 例項的公網和內網的入方向和出方向的訪問。  阿里雲安全組應用案例文件

80 埠是為 HTTP(HyperText Transport Protocol) 即超文字傳輸協議開放的,瀏覽器 HTTP 訪問 IP 或域名的 80 埠時,可以省略 80 埠號

如果我們沒有開放相應的埠,

比如我們的服務要用到 3000 ,就要開放 3000 的埠,不然是訪問不了的;其他埠同理。

配置安全組規則 1

配置安全組規則 2

配置安全組規則 3

埠都配置對了,以為能用公網 IP 進行訪問了麼 ? 小兄弟你太天真了 ...

太天真了

還有 防火牆 這一關呢,如果防火牆沒有關閉或者相關的埠沒有開放,也是不能用公網 IP 進行訪問網站內容的。

和安全組埠同理,比如我們的服務要用到的是 3000 埠,就要開放 3000 的埠,不然是訪問不了的;其他埠同理。

出於安全考慮還是把防火牆開上,只開放相應的埠最好。

怎麼開放相應的埠 ? 看下面兩篇文章足矣,這裡就不展開了。

1. 將nodejs專案部署到阿里雲ESC伺服器,linux系統配置80埠,實現公網IP訪問

2. centos出現“FirewallD is not running”怎麼辦

3.4 用 nginx、apache 或者 tomcat 來提供 HTTP 服務或者設定代理

我是用了 nginx 的,所以這裡只介紹 nginx 。 安裝 nginx 請看這兩篇文章:

1. Centos7安裝Nginx實戰

2. 阿里雲Centos7安裝Nginx伺服器實現反向代理

開啟 ngnx 代理

  • 進入到目錄位置
cd /usr/local/nginx
複製程式碼
  • 在 nginx 目錄下有一個 sbin 目錄,sbin 目錄下有一個 nginx 可執行程式。
./nginx
複製程式碼
  • 關閉 nginx
./nginx -s stop
複製程式碼
  • 重啟
./nginx -s reload
複製程式碼

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

如下給出我的 nginx 代理的設定:

我的兩個專案是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的,如果你們的路徑不是這個,請修改成你們的路徑。

#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時,那麼始終按照預設的80埠;如果該指令開啟,那麼將會返回當前正在監聽的埠。
    port_in_redirect off;

    # 前臺展示開啟的服務代理
    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
    # 管理後臺開啟的服務代理
    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;
    }
}
複製程式碼

我是開了兩個代理的:前臺展示開啟的服務代理和管理後臺開啟的服務代理,這個專案是分開埠訪問的。 比如:我的公網 ip 是 47.106.20.666,那麼可以通過 http://47.106.20.666 即可訪問前臺展示,http://47.106.20.666:4444 即可訪問管理後臺的登入介面。

至於為什麼要寫這樣的配置:

try_files $uri $uri/ @router;

location @router{
        rewrite ^.*$ /index.html last;
    }
複製程式碼

因為進入到文章詳情時或者前端路由變化了,再重新整理瀏覽器,發現瀏覽器出現 404 。重新整理頁面時訪問的資源在服務端找不到,因為 react-router 設定的路徑不是真實存在的路徑。 所以那樣設定是為了可以重新整理還可以打到對應的路徑的。

重新整理出現 404 問題,可以看下這篇文章 react,vue等部署單頁面專案時,訪問重新整理出現404問題

3.5 上傳專案程式碼,或者用碼雲、 gihub 來拉取你的程式碼到伺服器上

我是建立了碼雲的賬號來管理專案程式碼的,因為碼雲上可以建立免費的私有倉庫,我在本地把碼上傳到 Gitee.com 上,再進入伺服器用 git 把程式碼拉取下來就可以了,非常方便。

具體請看:碼雲(Gitee.com)幫助文件 V1.2

git 的安裝請看: CentOS 7.4 系統安裝 git

如果不想用 git 進行程式碼管理,請用其他可以連線伺服器上傳檔案的軟體,比如 FileZilla。

3.6 啟動 express 服務

啟動 express 服務,我用了 pm2, 可以永久執行在伺服器上,且不會一報錯 express 服務就掛了,而且執行中還可以進行其他操作。

安裝:

npm install -g pm2
複製程式碼

切換當前工作目錄到 express 應用資料夾下,執行 pm2 命令啟動 express 服務:

pm2 start ./bin/www
複製程式碼

比如我操作專案時的基本操作:

cd /home/blog/blog-node
pm2 start ./bin/www // 開啟
pm2 stop ./bin/www // 關閉
pm2 list //檢視所用已啟動專案:
複製程式碼

3.7 頁面載入優化

再看剛剛的 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;
    }
複製程式碼

這個就是利用 ngonx 開啟 gzip,親測開啟之後,壓縮了接近 2/3 的檔案大小,本來要 1M 多的檔案,開啟壓縮之後,變成了 300k 左右。

還有其他的優化請看這篇文章 React 16 載入效能優化指南,寫的很不錯,我的一些優化都是參考了這個篇文章的。

做完一系列的優化處理之後,在網路正常的情況下,頁面首屏渲染由本來是接近 5 秒,變成了 3 秒內,首屏渲染之前的 loading 在 1 秒內可見了。

4. 專案地址

本人的個人部落格專案地址:

前臺展示: https://github.com/biaochenxuying/blog-react

管理後臺:https://github.com/biaochenxuying/blog-react-admin

後端:https://github.com/biaochenxuying/blog-node

blog:https://github.com/biaochenxuying/blog

本部落格系統的系列文章:

5. 最後

全棧開發 有興趣的朋友,可以掃下方二維碼,關注我的公眾號,我會不定期更新有價值的內容。

微信公眾號:BiaoChenXuYing 分享 前端、後端開發 等相關的技術文章,熱點資源,全棧程式設計師的成長之路。

關注公眾號並回復 福利 便免費送你視訊資源,絕對乾貨。

福利詳情請點選: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript

BiaoChenXuYing

相關文章