服務器小白的我,是如何成功將 node+mongodb 項目部署在服務器上並進行性能優化的

時間  2019-11-10
標籤 服務器 白的 如何 成功 node+mongodb node mongodb 項目 部署 並進 行性 優化 欄目 職業生涯 简体版
原文   原文鏈接

BiaoChenXuYing

前言

本文講解的是：作爲前端開發人員，對服務器的瞭解仍是小白的我，是如何一步步將 node+mongodb 項目部署在阿里雲 centos 7.3 的服務器上，並進行性能優化，達到頁面 1 秒內看到 loading ，3 秒內看到首屏內容的。javascript

搭建的項目是採用了主流的先後端分離思想的，這裏只講 服務器環境搭建與性能優化。css

效果請看 http://biaochenxuying.cn/main.htmlhtml

1. 流程

  • 開發好前端與後端程序。
  • 購買服務器與域名
  • 服務器上安裝所需環境（本項目是 node 和 mongodb ）
  • 服務器上開放端口與設置規則
  • 用 nginx、apache 或者tomcat 來提供HTTP服務或者設置代理
  • 上傳項目代碼 或者 用碼雲或者 gihub 來拉取你的代碼到服務器上
  • 啓動 express 服務器
  • 優化頁面加載

2. 內容細節

2.1 開發好前端與後端程序

開發好前端與後端程序，這個沒什麼好說的，就是開發！開發！開發！再開發！前端

2.2 購買服務器與域名

本人一直以爲程序員應該有一個本身的我的網站，擁有本身的域名與服務器。學知識或者測試項目的時候能夠用來測試。vue

阿里雲有個專供學生的雲翼計劃 阿里雲學生套餐，入門級的雲服務器原價1400多，學生認證後只要114一年，很是划算。java

仍是學生的，直接購買；不是學生了，有弟弟、妹妹的，能夠用他們的大學生身份，購買，很是便宜實用（我購買的就是學生優惠套餐）。固然阿里雲服務器在每一年雙 11 時都有很大優惠，也很便宜，選什麼配置與價格得看本身的用處。node

服務器預裝環境能夠選擇 CentOS 或者 windows server，，爲了體驗和學習 linux 系統，我選擇了CentOS。react

學生優惠套餐

再次是購買域名 阿里域名購買，本人也是在阿里雲購買的。域名是分 國際域名與國內域名的，國際域名是不用備案的，可是國內的域名是必須 ICP備案的 阿里雲ICP代備案管理系統，否則不能用，若是是國內域名，如何備案域名，請本身上網查找教程。linux

域名

固然若是你的網站只用來本身用的話，能夠不用買域名，由於能夠經過服務器的公網 ip 來訪問網站內容的。nginx

若是購買了域名了，還要設置域名映射到相應的公網 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. 最後

對 全棧修煉 有興趣的朋友能夠掃下方二維碼關注個人公衆號

我會不按期更新有價值的內容，長期運營。

關注公衆號並回復 福利 可領取免費學習資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript

全棧修煉

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程