關於node+react+mongodb先後端分離項目的部署

前言：本身學了一段時間的node和數據庫，想着本身也算半個全棧了，因而產生了本身作項目的想法，因而有了簡易博客這個小demo的練手。

博主這個項目部署在阿里雲服務器上，尚未備案域名。關於購買服務器等流程就不贅述了。

直接經過終端，使用ssh root@服務器IP鏈接服務器。輸入密碼

出現上圖就表示你成功連入服務器了。

先講下後端項目部署：

1. 首先要在服務端安裝node環境，跟着阿里雲的教程走就ok 教程

2. 經過npm -v, node -v 查看是否安裝成功，值得注意的是官網教程安裝的是6.9.5版本，這個node已經到12以上了，這裏我安裝的是10.16.3的穩定版本。

3. 環境安裝好了以後，就能夠部署node項目了。這裏有兩種拉取代碼的方式：

   1） 能夠經過 scp 本地文件地址 root@服務器IP:服務端存放文件地址將你的node項目代碼的壓縮包上傳上去

   2） 能夠把你的代碼上傳到git，經過git clone到你的服務端。

4. 服務端有了代碼以後，就和你在本地跑node同樣，cd到你的項目目錄下：node app.js就能夠把你的項目跑起來了。

5. 直接啓動項目意味着你要一直開着一個終端維護這個項目，否則就像本地同樣關掉終端項目就停了。這裏能夠考慮使用pm2來管理。

6. npm i pm2 -g就能夠在服務端安裝pm2，而後和上面安裝node同樣創建軟鏈接，方便全局使用。ln -s pm2所在文件目錄 /usr/local/bin/pm2

7. 經過pm2 start app.js就能夠長時間開啓你的node服務了，關掉終端也不會影響，它還能夠幫你重啓動，守護進程，具體的能夠單獨學習。

再講下前端項目的部署：

1. 由於是先後端分離項目，分開來部署，咱們前端也須要起一個服務，博主這裏用的是Nginx。因此這一步須要安裝Nginx。 yum install nginx

2. 啓動Nginx service nginx start，而後在瀏覽器訪問你的服務器IP，看到nginx的歡迎頁面表示安裝成功。

3. 以上安裝方法nginx的配置文件位於/usr/local/nginx/conf/nginx.conf， 咱們能夠經過vim 文件目錄打開nginx配置文件進行編輯。

4. 這裏須要講下Nginx配置文件的配置：

########### 每一個指令必須有分號結束。#################
#user administrator administrators;  //配置用戶或者組，默認爲nobody nobody。
//worker_processes 2;  //容許生成的進程數，默認爲1
//pid /nginx/pid/nginx.pid;   //指定nginx進程運行文件存放地址
error_log log/error.log debug;  //制定日誌路徑，級別。這個設置能夠放入全局塊，http塊，server塊，級別以此爲：debug|info|notice|warn|error|crit|alert|emerg
events {
    accept_mutex on;   //設置網路鏈接序列化，防止驚羣現象發生，默認爲on
    multi_accept on;  //設置一個進程是否同時接受多個網絡鏈接，默認爲off
    //use epoll;      //事件驅動模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    //最大鏈接數，默認爲512
}
http {
    include       mime.types;   //文件擴展名與文件類型映射表
    default_type  application/octet-stream; //默認文件類型，默認爲text/plain
    //access_log off; //取消服務日誌    
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; //自定義格式
    access_log log/access.log myFormat;  //combined爲日誌格式的默認值
    sendfile on;   //容許sendfile方式傳輸文件，默認爲off，能夠在http塊，server塊，location塊。
    sendfile_max_chunk 100k;  //每一個進程每次調用傳輸數量不能大於設定的值，默認爲0，即不設上限。
    keepalive_timeout 65;  //鏈接超時時間，默認爲75s，能夠在http，server，location塊。

    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  //熱備
    }
    error_page 404 https://www.baidu.com; //錯誤頁
    server {
        keepalive_requests 120; //單鏈接請求上限次數。
        listen       4545;   //監聽端口
        server_name  127.0.0.1;   //監聽地址       
        location  ~*^.+$ {       //請求的url過濾，正則匹配，~爲區分大小寫，~*爲不區分大小寫。
           root path;  //根目錄
           index vv.txt;  //設置默認頁
           proxy_pass  http://mysvr;  //請求轉向mysvr 定義的服務器列表
           deny 127.0.0.1;  //拒絕的ip
           allow 172.18.5.54; //容許的ip           
        } 
    }
}
複製代碼

5. 講下我這裏location的配置：

當訪問個人服務器IP時，會被引向我項目通過webpack打包後的index.html。

服務起在另外一個5000端口，當調服務器IP/api時會被Nginx反向代理到個人node項目監聽的5000端口，從而調用我node服務的接口

6. 前端項目代碼我是經過本身配置的webpack打包後經過scp扔到了服務器上。
7. 配置好上面的Nginx後，經過service nginx start啓動Nginx。這樣前端靜態服務就啓動了。
8. 經過netstat -tpln能夠查看你的Nginx是否正常啓動。

最後安裝的mongodb數據庫，這個比較簡單，跟着網上的一些教程走完了就ok。

講起來三言兩語就講完了，本身摸索起來仍是挺麻煩的。這裏再記錄下這幾天遇到的一些麻煩：

1. webpack打包後扔到服務器上找不到靜態資源的路徑，注意查看index.html文件的路徑，它是寫死的，你能夠改到你靜態資源的文件夾。
2. 由於先後端分開部署在不一樣的端口，存在跨域問題，經過Nginx反向代理解決的。
3. 在本地調試項目時，使用的webpack-dev-server解決的跨域請求，注意這裏的別名和線上Nginx反向代理配置的別名保持一致，端口號保持一致，這樣能夠省掉一些麻煩。
4. 項目啓動後重復啓動報錯，經過pkill node, pkill nginx強制殺死進程。
5. 阿里雲的安全組規則配置。我項目裏用了兩個端口，默認的80端口和5000端口，須要在安全組規則裏配置對應的規則暴露這些端口，才能被外部訪問到，否則會訪問不了。

還有什麼問題想不起來了，這裏只是一個嘗試，還有不少要學習的。也算是對最近一段時間學習的一個小總結。

以前一直在學習：

webpack，如何配置webpack，不經過腳手架本身配置項目腳手架。

node，本身起服務，寫接口，方便開展項目，也加深本身對全棧的理解。

react，嘗試使用dva來管理數據。

Nginx， 理解正向代理，反向代理，配置文件，靜態服務。
複製代碼

這個小demo也算是把這些知識點進行了一個貫穿，但感受還有好多東西要學。

學海無涯，懸崖勒馬吶！！！