关于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也算是把这些知识点进行了一个贯穿，但感受还有好多东西要学。

学海无涯，悬崖勒马呐！！！