Vue 内容管理系统的搭建（六）之服务器配置部署

购买服务器部署个人项目是很多前端开发人员特别是刚开始进入行业的人士都很想去做但是又厌倦服务器繁琐配置的一件事(现在有些已经帮你搞好所有了)。本坑开始也是这样想的，既不太明白Linux 也不太清楚Ubuntu以及其他服务器知识内容。然而.......好了，又要提一下前端工作的历史变迁了。在以前万万千千的日子里，前端与页面设计傻傻分不清，紧接着前端要贯通js技术，js库，里面涉及到数据结构逻辑以及其他技术分支，后来有了前端mvc思维和其他新模式，再到前端工程化生产以及其他专业化形成的技术。种种这些，不管你如何回避，会发现你工作的时候，你需要知道如何使用shell脚本来操作文件，需要知道用指令来安装一些应用，需要知道使用什么不同的指令来为项目进行不同环境下的打包，也需要知道什么样的指令可以压缩，合并，模块化项目代码等等。既然回避不了，就得去学了。有句话说的真好：一个好的工程师，是自己主攻的东东很强很精通，同时对其他互联网热门技术、工具、技能等有一定掌握，并且有永不熄灭的求知欲、探索欲，对新事物有强烈好奇心。

回到正题，本坑是按照实际的实践过程进行回忆性的记录，过程中大大小小有些坑，没办法一一列出。整个操作过程最直接的目的是能够在通过外网访问到本坑的前端项目，后台程序提供正常服务。服务器所有配置都是初学者水平都容易去做的。本坑使用的是服务器linux系统，选择的项目运行环境和数据库是Nginx+nodejs+MongoDB ，操作电脑是MAC，如果这不符合你的需求，接下来的内容可能并不是你需要的。少说废话，开始动手吧！

服务器的选购

选购前有几个名词需要稍微区别一下。虚拟主机，VPS，云主机。我们知道云主机也叫云服务器，既然是云那就是集群的概念，这意味着如果一台服务器发生故障不太会影响整体服务过程，这是单个服务器没有办法的。基于云的技术支持，云服务器有更加好的存储和服务能力。VPS的全名是Virtual Private Server，虚拟专用的服务器，之所以说是专用，是相对虚拟主机而言。VPS通过虚拟技术把单独的物理服务器分割成多个虚拟的服务器，彼此之间可以有各自IP,空间和系统，互不影响，达到专人专用。而虚拟主机是指存储空间和宽带共享，但是同样是通过虚拟技术把一台完整的服务器分成若干个主机。如果本坑解释的不太清楚，可以使用传送门穿越查看更详细的解释。我们今天大多数个人消费者使用的就是这三者。

现在VPS、云服务器，云存储提供商真的是多的不能在多了。这里不举例了。知乎相关的一些讨论值得用于实际的参考，如果你不太了解相关情况的话。国外也有很多。鉴于开发需要，不少技术人员就是用国外服务器搭梯子的。本坑是没钱的主，看到国内云服务器的费用还是有点小心疼的。本坑选择VirMach的VPS，是国外的提供商。它的显著特点就是相对便宜，花个10刀，期限是一年。通过和该公司的技术人员(都是外国人)的问题反馈与交流，了解到他们的服务质量和态度还不错，服务器整体运行性能也能应付目前需求。不过传文件，速度并不理想，毕竟是国外服务器。关于这点其实本坑觉得并不是有很大的问题，因为我们的前后端项目基本上打包后项目并不是很大，传输上的速度并没有高要求，除非频繁更新，实在无法忍受。

环境安装与配置

Nginx的安装

本坑使用的VPS操作系统是centos6 ,centos可以用yum源来安装所需的web环境，有点像node的npm。不过很多centos系统yum 源的软件包都没有得到及时更新。需要更新下yum ，使用额外包获取较新版本软件。这点需要注意一下，如果不更新和添加额外包，很有可能安装目前版本的Nginx、node等等没有办法成功。

yum update;yum clean up //更新yum
sudo yum install epel-release;yum clean up //安装额外包，获得较新版的应用
yum install nginx;yum clean up //安装nginx

Nginx安装过程有几次暂停输入，输入yes完成所有步骤。接下来是启动安装好的Nginx。

service nginx start //启动nginx

sudo /etc/init.d/nginx start //也可以这样启动nginx

浏览器访问 ip ，如果是nginx 的欢迎界面就意味着安装成功,如果出现以下错误提示，执行sudo fuser -k 80/tcp杀掉占用程序。

[Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)

nodejs 安装

按照以下指令一一执行就over了
curl --silent --location https://rpm.nodesource.com/setup_7.x | bash - // 获取Node v7 scripts,并不是最新,也不是太旧版本
yum -y install nodejs; yum clean all
yum install gcc-c++ openssl-devel make; yum clean all
npm install -g express-generator // 根据需要安装
npm install -g webpack // 根据需要安装
npm install -g gulp // 根据需要安装

MongoDB 安装

mongodb同样可以用yum安装，官网也有明确的方法，传送门在此.
mongodb 启动服务后我们要在本地远程连接它。为此，我们要在MongoDB的配置文件里修改为允许远程连接，并且一般而言服务器是有自己的防火墙的，默认是不允许外界访问服务器端口，所以还需要防火墙对这个端口设置开放。
安装官网的安装方法，mongdb的配置文件路径/etc/mongod.conf，将看到以下内容，本坑port改成0.0.0.0意思是允许任务ip访问该端口。

# network interfaces
 net:
 port: 27017
 bindIp: 0.0.0.0  # Listen to local interface only, comment to listen on all interfaces.

找到防火墙配置文件路径/etc/sysconfig/iptables 如果没有该文件，执行以下指令：
iptables -P OUTPUT ACCEPT
service iptables save //保存之
我们在iptables 文件内添加所示内容：

*filter
:INPUT ACCEPT [22:2682]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [21:3307]
-A INPUT -p tcp -m state --state NEW -m tcp --dport 27017 -j ACCEPT #添加内容
COMMIT

service iptables restart
通过service iptables status可以看到端口开启关闭情况。
这样远程连接over了。

项目部署

到了这个阶段，走完最后一里路，就大告成功了。按照我们的思路，我们把打包好的前端资源与代码放到nginx，后台放到随意的能自己分辨的目录里，并且指令启动后台服务，就像在本地电脑做的一样。

我们先处理后台，因为后台弄好后，你才能知道前端部署是否成功。我们要把后台代码放到服务器，本坑是放在/apt目录下，注意传输代码前要把代码的依赖包删除。安装pm2,它可以让我们的启动项目永久有效。

npm i pm2 -g

在后台项目根目录下启动项目：

npm install //安装依赖

pm2 start ./bin/www --watch// 启动项目并且监控项目代码变化，一旦有变化就重启项目

可以开放后台端口，在本地电脑用Postman请求测试工具来测试后台服务是否一切正常。

接着，我们来处理前端部分。按照本坑的方式按照nginx ，nginx的配置文件放在/etc/nginx目录下,nginx的前端资源与代码按照惯例放在/usr/share/nginx/html目录下。所以把打包的dist文件，像本坑是放在了html 目录下。接下来要做的是要实现我们在浏览器输了服务器IP,导航到dist目录下的index.html，这样就打开了我们的管理系统。那么我们就要配置nginx.conf。本坑的nginx默认配置是在这里/etc/nginx/conf.d/default.conf,配置如下：

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    #下面需要把根目录转到项目根目录下
    root         /usr/share/nginx/html/dist;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }
    #ajax请求要转发到后台服务
    location ~ /api/ {
                proxy_pass http://127.0.0.1:3002;
                proxy_read_timeout      7200;
                proxy_connect_timeout   15;
                proxy_set_header        Host zc.dev.your.111.com;
                proxy_set_header        X-Forwarded-For     $proxy_add_x_forwarded_for;
                client_max_body_size 2000m;
                break;
        }

好了，重启nginx。使用浏览器输入ip,本坑是23.94.74.24,注册账号，登录，成功！

好了，整个部署就完成了，后面本坑将继续丰富前后端代码和UI,继续开发与记录。

系列文章：
Vue 内容管理系统的搭建（一）
Vue 内容管理系统的搭建（二）
Vue内容管理系统的搭建（三）
Vue内容管理系统的搭建(四)之第三方授权与验证
Vue内容管理系统的搭建(五)之权限控制