关于node+react+mongodb前后端分离项目的部署

东方石匠
1,888 阅读5分钟

前言：自己学了一段时间的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           
        } 
    }
}
  1. 讲下我这里location的配置：

当访问我的服务器IP时，会被引向我项目经过webpack打包后的index.html。

服务起在另一个5000端口，当调服务器IP/api时会被Nginx反向代理到我的node项目监听的5000端口，从而调用我node服务的接口

  1. 前端项目代码我是通过自己配置的webpack打包后通过scp扔到了服务器上。
  2. 配置好上面的Nginx后，通过service nginx start启动Nginx。这样前端静态服务就启动了。
  3. 通过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也算是把这些知识点进行了一个贯穿，但感觉还有好多东西要学。

学海无涯，回头是岸呐！！！

avatar
文章
阅读
粉丝