【Web前端】Vue.js项目部署到服务器

前言

　　最近做完了一个项目，Vue.js 2.0 + vuex + axios，还是有点大的。想着做了这么久，放服务器给朋友们体验一下，帮忙找找BUG，于是就有了研究服务器这一篇博客了。

准备工作

服务器

既然是部署到服务器，肯定是需要一个云的。我这里找基友拿的一个，做测试的话，可以买阿里云的学生机，9.9 一个月，不过不是学生的话就比较麻烦，因为涉及敏感操作都需要验证码。

编译打包

将项目打包成 dist 文件，这里我需要跨域请求一些数据，还写了一个小型服务器， app.js 放到 dist 文件夹 同级目录。

Xshell

因为基友的是 centos 的服务器，所以用 xshell 的话稍微好操作一点，我是 win10。

WinSCP

接触命令行并不多，所以面对命令行编程我还是有点效率不高。这个软件就方便了文件的上传，编辑等等，图形化界面。

正式开始

有了上面几项之后，可以正式开始部署工作了。

登录 WinSCP，连接远程服务器

打开 WinSCP，会出现如下界面



主机名，输入你的服务器公网 ip，端口号不变，用户名一般是 root，密码则是你购买服务器时设置的密码，点击登录。

默认是 /root 界面。

这时候把你打包好的文件，扔到某一个目录下，如 /opt，dist 和 app.js 在同一目录

登录 Xshell 连接远程服务器

打开 Xshell，第一次登录会有如下界面：



名称可以随便取一个，协议选择 SSH，主机就是你的公网 ip，

之后会到这个界面

这里我是创建好了的，点击就可以直接连接。如果你是从上一步过来的，点击之后会要输入密码



之后就连接到远程 linux 系统了。

安装 node.js

由于我的项目是需要跨域请求数据，所以这里我选择的是用 node.js 启动小型服务器，请求数据。

下载源码

解压源码

编译安装

下载源码，这里以最新的 6.11.1 为例：

cd /usr/local/src/
wget http://nodejs.org/dist/v6.11.1/node-v6.11.1.tar.gz

解压源码：

cd /usr/local/src/
tar zxvf node-v6.11.1.tar.gz

编译安装：

cd node-v6.11.1
./configure --prefix=/usr/local/node/6.11.1
make
make install

这里 make 过程大约30分钟，可以去做别的。

ps：这里我遇到服务器没有安装 g++ 的问题，那直接

yum install gcc-c++

就可以了。

安装完成后，还需要对 node 进行环境变量的配置

这里通过 WinSCP 找到 /etc/profile，右键该文件，编辑。

在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 上面一行添加如下代码：

#set for nodejs
export NODE_HOME=/usr/local/node/6.11.1
export PATH=$NODE_HOME/bin:$PATH

ctrl + s 保存退出，然后编译一下

source /etc/profile

然后 node -v 检验是否安装成功

之后再安装守护进程，并设置开机自启。保证我们自己写的小型服务器能脱离 Xshell 在服务器上运行

全局安装：

npm install pm2 -g

进入 /opt （这里是你放 dist 的和 app.js 的目录），执行命令：

pm2 start app.js --watch
pm2 save
pm2 startup

如果在服务器端没有防火墙墙掉端口的情况下，我们应该可以愉快的看到自己的项目了。

但是，服务器端有防火墙墙掉了端口怎么办。

安装 iptables：

yum install -y iptables-service

粗暴的关闭防火墙（不推荐）：

systemctl stop firewalld.service
systemctl disable firewalld.service
yum install -y iptables-service // 如果上面安装过了就不用了
iptables -F
iptables -X
iptables -Z
iptables-save
systemctl restart iptables.service

单独开启某一个端口（推荐）：

查看状态:

iptables -L -n

下面添加对特定端口开放的方法：

使用iptables开放如下端口

/sbin/iptables -I INPUT -p tcp --dport 8000 -j ACCEPT

保存

/etc/rc.d/init.d/iptables save

重启服务

service iptables restart

查看需要打开的端口是否生效

/etc/init.d/iptables status

法2:

或直接编辑/etc/sysconfig/iptables

-A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT

保存在前面部分

再重启:

service iptables restart

如果是阿里云，就在安全组规则里添加相应的规则即可。

ps: CentOS7 中防火墙配置

1、运行、停止、禁用firewalld

启动：# systemctl start firewalld

查看状态：# systemctl status firewalld 或者 firewall-cmd –state

停止：# systemctl disable firewalld

禁用：# systemctl stop firewalld

查看firewall是否运行,下面两个命令都可以

systemctl status firewalld.service
firewall-cmd --state

查看default zone和active zone

我们还没有做任何配置，default zone和active zone都应该是public

firewall-cmd --get-default-zone
firewall-cmd --get-active-zones

查看当前开了哪些端口

其实一个服务对应一个端口，每个服务对应/usr/lib/firewalld/services下面一个xml文件。

firewall-cmd --list-services

查看还有哪些服务可以打开

firewall-cmd --get-services

查看所有打开的端口：

firewall-cmd --zone=public --list-ports

更新防火墙规则：

firewall-cmd --reload

1、firewalld的基本使用

启动： systemctl start firewalld

查看状态： systemctl status firewalld

停止： systemctl disable firewalld

禁用： systemctl stop firewalld

2.systemctl是CentOS7的服务管理工具中主要的工具，它融合之前service和chkconfig的功能于一体。

启动一个服务：systemctl start firewalld.service

关闭一个服务：systemctl stop firewalld.service

重启一个服务：systemctl restart firewalld.service

显示一个服务的状态：systemctl status firewalld.service

在开机时启用一个服务：systemctl enable firewalld.service

在开机时禁用一个服务：systemctl disable firewalld.service

查看服务是否开机启动：systemctl is-enabled firewalld.service

查看已启动的服务列表：systemctl list-unit-files|grep enabled

查看启动失败的服务列表：systemctl –failed

3.配置firewalld-cmd

查看版本： firewall-cmd –version

查看帮助： firewall-cmd –help

显示状态： firewall-cmd –state

查看所有打开的端口： firewall-cmd –zone=public –list-ports

更新防火墙规则： firewall-cmd –reload

查看区域信息: firewall-cmd –get-active-zones

查看指定接口所属区域： firewall-cmd –get-zone-of-interface=eth0

拒绝所有包：firewall-cmd –panic-on

取消拒绝状态： firewall-cmd –panic-off

查看是否拒绝： firewall-cmd –query-panic

那怎么开启一个端口呢

添加

firewall-cmd --zone=public --add-port=80/tcp --permanent（--permanent永久生效，没有此参数重启后失效）

重新载入

firewall-cmd --reload

查看

firewall-cmd --zone= public --query-port=80/tcp

删除

firewall-cmd --zone= public --remove-port=80/tcp --permanent

总结

通过这几天的研究，不断的试错，不断的改正，终于把这一块稍微明白了一点点，不断学习才能让自己不输给时间，哈哈哈。

最后感谢陈钰博提供的一些思路