前言

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

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

效果請看 http://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 [email protected]   //你的服務器公網 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 版本的。

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 :

軟件安裝位置：/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 的端口，不然是訪問不了的；其他端口同理。

端口都配置對了，以爲能用公網 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

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

前言

1. 流程

2. 內容細節

2.1 開發好前端與後端程序

2.2 購買服務器與域名

3. 服務器上安裝所需環境（本項目是 node 和 mongodb ）

3.1 登錄服務器

3.2 安裝 node

3.2 安裝 mongodb

3.3 服務器上開放端口與設置安全組規則

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

3.5 上傳項目代碼，或者用碼雲、 gihub 來拉取你的代碼到服務器上

3.6 啓動 express 服務

3.7 頁面加載優化

4. 項目地址

5. 最後

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

用錢生錢，從掌握金錢的規律開始

Vue + TypeScript + Element 搭建簡潔時尚的博客網站及踩坑記

Vue + TypeScript + Element 項目實戰及踩坑記

如何自學前端與web前端知識體系梳理

一次網站的性能優化之路 -- 天下武功，唯快不破

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結