node.js+vue的全栈之路一

本文由本作者原创，转载请注明来源。
欢迎关注我的GitHub（PeipeiQ）和个人博客（http://www.peipeiq.cn）

　　iOS开发也有一段时间了，object-c代码写多了，写一点别的代码玩玩。这段时间比较空闲，所以自己用node去搭了个博客的后端服务，后台前端是jq+bootstrap，服务端用的是node+mongodb，大前端使用vue全家桶搭建。也算是一个小型的全栈项目，从前台到后台都涉及到。这里会讲述这个全栈项目的搭建过程，适合小白一步步开发，做一个个人系统。服务器我是用腾讯云的服务器，具体配置如下，

配置信息
操作系统 CentOS 7.4 64位
CPU 1 核
内存 2 GB
公网带宽 1 Mbps

拿到服务器后肯定要先对服务器的环境进行一些安装，难度不大但是比较繁杂，网上教程也挺多，不过比较分散，这里统一一下过程，可以根据下面的指令一步步配置，一个工程的配置也就差不多了。本项目也在我的github上面开源了，如果大家有兴趣也可clone下来看一看，欢迎与我交流。

一、mongodb环境配置

在系统上的安装(使用yum)

vi /etc/yum.repos.d/mongodb-org-3.4.repo

然后编辑一下内容进去

[mongodb-org-3.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

安装MongoDB

sudo yum install -y mongodb-org

启动，重启和停止mongod

sudo service mongod start
sudo service mongod restart
sudo service mongod stop

注意：如果在重启mongod时出现Job for mongod.service failed because the control process exited with error code. See "systemctl status mongod.service" and "journalctl -xe" for details.，笔者尝试了一些解决办法后发现作用不大，这里有一个办法，就是先killall mongod停止mongod服务，然后用mongod --auth --config /etc/mongod.conf按配置文件来重新启动。
接着更改配置文件

vi  /etc/mongod.conf

打开后有几个需要关注的地方：

# mongod.conf

# for documentation of all options, see:
# http://docs.mongodb.org/manual/reference/configuration-options/

# where to write logging data.
systemLog:
  destination: file
  logAppend: true
  path: /var/log/mongodb/mongod.log

# Where and how to store data.
# 这里是存放数据库资源的路径，可以根据需要修改
storage:
  dbPath: /var/lib/mongo
  journal:
    enabled: true
# engine:
# mmapv1:
# wiredTiger:

# how the process runs
processManagement:  fork: true  # fork and run in background
  pidFilePath: /var/run/mongodb/mongod.pid  # location of pidfile

# network interfaces
net:
  # 数据库服务监听的端口，可以根据需求修改
  port: 27017  
  # bindIp如果是0.0.0.0的话是表示允许外网去访问的，如果要禁止外网访问，改成127.0.0.1即可。个人建议此处添加你需要连接MongoDB服务器的IP地址、而不是改成0.0.0.0。这样做会更安全
  bindIp: 0.0.0.0  # Listen to local interface only, comment to listen on all interfaces.

#security:

#operationProfiling:

#replication:

#sharding:

## Enterprise-Only Options

#auditLog:

#snmp:

修改完后通过配置来跑数据库服务

mongod --config /etc/mongod.conf

接下来就可以在外网直接访问数据库，通过mongodb://[ip]:[port]/admin方式。
之后我们需要做的是给数据库增加用户，通过账户密码的方式来比较安全的访问我们的数据库。（mongodb默认是不设加密的，也就是说如果不加密，任何人都可以通过ip+port的形式来访问和修改我们的数据库）
打开本地的mongo客户端

mongo 127.0.0.1:27017

use admin
db.createUser({user: "admin",pwd: "admin",roles: [ { role: "readWriteAnyDatabase", db: "admin" } ]})

这样就成功地添加一个管理用户，接着进行验证

db.auth("账号","密码")

如果输出是1时，表示验证通过，可以访问并配置数据库。
之后就可以创建自己的数据库，比如说我要创建一个数据库叫做blog。于是使用一下命令：

use blog
db.createUser({ user: "youruser", pwd: "yourpassword", roles: [{ role: "dbOwner", db: "blog" }] })

之后通过killall mongo和mongod --auth --config /etc/mongod.conf带认证启动mongo指令后，就可以在外网通过账户密码来访问数据库。一般格式为

'mongodb://name:[email protected]:27017/blog'

对于外部访问数据库，这里推荐一个软件，Robo 3T。软件是免费的而且使用也十分简单。

二、node环境配置

这里介绍一种最快最简单的安装方法。先访问node.js官网，找到想要下载的node版本。https://nodejs.org/en/download/。然后执行下面命令下载到根目录。

wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz

之后可以用ls在根目录下找到node-v8.11.3-linux-x64.tar.xz文件。然后通过xz工具去解包。这里可以用yum来完成。

yum search xz
yum install xz.x86_64
xz -d node-v8.11.3-linux-x64.tar.xz
tar -xf node-v8.11.3-linux-x64.tar
mv node-v8.11.3-linux-x64 node-v8.11.3

之后我们就会在根目录下看到两个文件

node-v8.11.3  node-v8.11.3-linux-x64.tar

接着我们将node移动到全局目录下，可以在全局访问内使用node。

ln -s /root/node-v8.11.3/bin/node /usr/local/bin/node
ln -s /root/node-v8.11.3/bin/npm /usr/local/bin/npm

这时候用node -v来查看node版本，如果有显示则证明已经在全局安装成功了。

三、git安装配置

用git来拉取项目就一定会使用到git，它的卸载和安装都灰常简单，一句话搞定。话说为什么用git而不把工程从本地直接上传到云服务器呢，很简单因为懒啊，而且作为开源精神项目已经丢在了我的GitHub（PeipeiQ）上面，有兴趣自提，十分欢迎大家的pr。

yum remove git
yum install git

这里补充一下用ssh认证方式来拉取GitHub。
首先cd到~/.ssh目录下看有没有id_rsa id_rsa.pub这两个文件，如果没有则用

ssh-keygen

一路回车后可以生成一个公钥，一个私钥。然后将公钥放在GitHub服务器保存，这就建立了一个安全通道。关于ssh可以看我的另外一篇博客，ssh原理以及与https的区别，里面有比较详细的介绍。这样就可以用ssh的方式clone代码。

四、nginx安装配置

　　首先由于nginx的一些模块依赖一些lib库，所以在安装nginx之前，必须先安装这些lib库，这些依赖库主要有g++、gcc、openssl-devel、pcre-devel和zlib-devel 所以执行如下命令安装

yum install gcc-c++  
yum install pcre pcre-devel  
yum install zlib zlib-devel  
yum install openssl openssl--devel

然后 cd /usr/local ，在nignx官网找到一个合适的版本之后进行下载，编译，安装。

 wget http://nginx.org/download/nginx-1.12.2.tar.gz  
 tar -zxvf nginx-1.12.2.tar.gz 
 cd  nginx-1.7.4  
 ./configure  $默认安装在/usr/local/nginx   
 make
 make install  

如果没有报错，顺利完成后，最好看一下nginx的安装目录

whereis nginx  

接着就是nginx的一些配置和用法。
首先是nginx的启动。

cd /usr/local/nginx/sbin
./nginx

然后我们通过netstat -ntlp命令查看所有端口，就可以发现nginx服务已经成功开启，使用的是80端口。

[root@VM_16_14_centos init.d]# netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:111             0.0.0.0:*               LISTEN      1/systemd
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      18858/nginx: master
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1053/sshd
tcp        0      0 0.0.0.0:27017           0.0.0.0:*               LISTEN      7913/mongod

因为nginx的启动和杀死都比较麻烦，可以用一下脚本来使用service命令。

cd /etc/init.d
vim nginx

在这个文件里面写入

#! /bin/sh
# chkconfig: 2345 55 25
# Description: Startup script for nginx webserver on Debian. Place in /etc/init.d and
# run 'update-rc.d -f nginx defaults', or use the appropriate command on your
# distro. For CentOS/Redhat run: 'chkconfig --add nginx'

### BEGIN INIT INFO
# Provides: nginx
# Required-Start: $all
# Required-Stop: $all
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: starts the nginx web server
# Description: starts nginx using start-stop-daemon
### END INIT INFO

# Author: licess
# website: http://lnmp.org

PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
NAME=nginx
NGINX_BIN=/usr/local/nginx/sbin/$NAME
CONFIGFILE=/usr/local/nginx/conf/$NAME.conf
PIDFILE=/usr/local/nginx/logs/$NAME.pid

case "$1" in
    start)
        echo -n "Starting $NAME... "

        if netstat -tnpl | grep -q nginx;then
            echo "$NAME (pid `pidof $NAME`) already running."
            exit 1
        fi

        $NGINX_BIN -c $CONFIGFILE

        if [ "$?" != 0 ] ; then
            echo " failed"
            exit 1
        else
            echo " done"
        fi
        ;;

    stop)
        echo -n "Stoping $NAME... "

        if ! netstat -tnpl | grep -q nginx; then
            echo "$NAME is not running."
            exit 1
        fi

        $NGINX_BIN -s stop

        if [ "$?" != 0 ] ; then
            echo " failed. Use force-quit"
            exit 1
        else
            echo " done"
        fi
        ;;

    status)
        if netstat -tnpl | grep -q nginx; then
            PID=`pidof nginx`
            echo "$NAME (pid $PID) is running..."
        else
            echo "$NAME is stopped"
            exit 0
        fi
        ;;

    force-quit)
        echo -n "Terminating $NAME... "

        if ! netstat -tnpl | grep -q nginx; then
            echo "$NAME is not running."
            exit 1
        fi

        kill `pidof $NAME`

        if [ "$?" != 0 ] ; then
            echo " failed"
            exit 1
        else
            echo " done"
        fi
        ;;

    restart)
        $0 stop
        sleep 1
        $0 start
        ;;

    reload)
        echo -n "Reload service $NAME... "

        if netstat -tnpl | grep -q nginx; then
            $NGINX_BIN -s reload
            echo " done"
        else
            echo "$NAME is not running, can't reload."
            exit 1
        fi
        ;;

    configtest)
        echo -n "Test $NAME configure files... "

        $NGINX_BIN -t
        ;;

    *)
        echo "Usage: $0 {start|stop|force-quit|restart|reload|status|configtest}"
        exit 1
        ;;

esac

接下来

chmod a+x /etc/init.d/nginx
chkconfig --add nginx
chkconfig nginx on

完成。这样就可以使用一下命令来快速启动，终止。

service nginx start service nginx stop service nginx restart

接着就是使用nginx来进行反向代理。我们的域名通过正常解析可以得到多个三级域名，这时候我们可以把不同域名和不同端口的项目对应起来。首先找到nginx的配置文件。

cd  /usr/local/nginx/conf
vim nginx.conf

在文件里面可以添加多个server

 server {
        listen       80;
        server_name  www.peipeiq.cn;
        location / {
            proxy_pass  http://127.0.0.1:8088;
        }
    }
 server {
        listen       80;
        server_name  manager.peipeiq.cn;
        location / {
            proxy_pass  http://127.0.0.1:7070;
        }
    }    

这样就可以用不同域名去访问不同端口。最后只需要重启下服务即可。

五、后台和大前端工程的运行

安装pm2工具，可以保活进程。

npm install pm2 -g 
ln -s /root/node-v8.11.3/bin/pm2 /usr/local/bin/  #将pm2放到全局路径
pm2 list   #测试是否安装成功

当出现一下界面时，则证明pm2已经安装在全局。

-------------

__/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
 _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
  _\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
   _\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
    _\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
     _\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
      _\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
       _\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
        _\///______________\///______________\///__\///////////////__


                          Community Edition

            Production Process Manager for Node.js applications
                     with a built-in Load Balancer.


                Start and Daemonize any application:
                $ pm2 start app.js Load Balance 4 instances of api.js: $ pm2 start api.js -i 4

                Monitor in production:
                $ pm2 monitor Make pm2 auto-boot at server restart: $ pm2 startup

                To go further checkout:
                http://pm2.io/


                        -------------

pm2的基本用法如下。

pm2 start app.js         #开启某个进程
pm2 stop app_name|app_id   #结束某个进程
pm2 restart app.js    #重启进程
pm2 stop all   #杀死所有进程
pm2 list    #查看进程

接着我们将vue工程的服务跑起来。首先cd到vue工程目录下面，npm install安装好依赖包之后，运行npm run build，这时候会生成一个dist文件夹，这里就是我们前端工程的静态文件夹。将静态文件夹拷贝一份到根目录。

cp -r /root/peipei_blog/dist/ /root/

然后把server文件夹也放在根目录。这里简单的写一个app.js文件放在server文件夹。

//入口文件
//加载express模块
var express = require('express');
const path = require('path');
//http.createServer
var app = express();


//设置静态文件托管（静态处理）
// 部署上线时读取静态文件
app.use(express.static(path.join(__dirname, '../dist')));
app.listen(8088);

最后用pm2去跑app.js就可以了。
至此环境基本搭建完成，下一章节会讲讲项目的架构和工程的搭建思路。