前言
本文講解的是:做為前端開發人員,對伺服器的瞭解還是小白的我,是如何一步步將 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 版本的。
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 的埠,不然是訪問不了的;其他埠同理。
出於安全考慮還是把防火牆開上,只開放相應的埠最好。
怎麼開放相應的埠 ? 看下面兩篇文章足矣,這裡就不展開了。
3.4 用 nginx、apache 或者 tomcat 來提供 HTTP 服務或者設定代理
我是用了 nginx 的,所以這裡只介紹 nginx 。 安裝 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 把程式碼拉取下來就可以了,非常方便。
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. 專案地址
本人的個人部落格專案地址:
本部落格系統的系列文章:
5. 最後
對 全棧開發 有興趣的朋友,可以掃下方二維碼,關注我的公眾號,我會不定期更新有價值的內容。
微信公眾號:BiaoChenXuYing 分享 前端、後端開發 等相關的技術文章,熱點資源,全棧程式設計師的成長之路。
關注公眾號並回復 福利 便免費送你視訊資源,絕對乾貨。
福利詳情請點選: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript