服务器部署vue的另一种姿势

上一篇文章我已经讲到了用yarn build或npm run build 的方法将vue项目编译打包生成静态文件dist的方法
这次我们讲一下如何使用yarn serve或npm run serve的方法将本地正在运行的项目暴露给外网访问

1.安装nginx

nginx 安装配置nginx的方法我上一篇文章有（已安装请忽略）

!!!注意!!! 在终端输入命令之前先输入su，切换到root用户，不然很多操作都用不了

2.安装npm和node

2.1.添加NodeSource yum仓库

运行以下curl命令将 NodeSource yum 存储库添加到您的系统

1	curl -sL https://rpm.nodesource.com/setup_10.x \| sudo bash -

2.2. 安装 Node.js 和 npm

1	sudo yum install nodejs

2.3. 验证 Node.js 和 npm 安装

1 2	node -v npm -v

出现版本号则安装成功

2.4配置npm清华镜像

如果不配置的话npm install会很慢

#持久配置
npm config set registry http://npm.tuna.tsinghua.edu.cn/registry
#检查配置是否成功
npm config get registry

3.将vue项目传输到服务器

通过filezilla传输或者其他的自行选择
node_modules不要上传，因为服务器和你自己本地的npm环境是不一样的，上传了运行时也会报错，到时候还得老老实实删掉重新npm install.

把项目放在服务器你想放的位置

然后先npm install，再npm run serve

4.配置nginx

1
2
3

#用vim编辑你的nginx.conf
#如果你是按我上一篇文章安装的nginx，那么就是如下命令
vim /usr/local/nginx/conf/nginx.conf

上面这样配置的意思是用nginx 80端口服务来代理你的localhost:8080端口服务

这时你可以在服务器上的浏览器访问localhost:80访问你的vue项目了

5.防火墙

！！！如果在服务器上不需要这一步！，安全组放通端口即可。虚拟机上则需要这一步。！！！

！！！但是这样在外网是访问不了的，由于服务器防火墙的问题

CentOS7默认使用的是firewall作为防火墙，这里改为iptables防火墙

5.1.关闭firewalld

1 2	systemctl stop firewalld systemctl mask firewalld

5.2.使用iptables服务

1、安装iptables防火墙
yum install iptables-services #安装

2、修改文件配置允许80端口
vim /etc/sysconfig/iptables #编辑防火墙配置文件
按i进入文本编辑 在原文档中找到
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
在该行下面添加
-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
:wq! #保存退出


#开放443端口(HTTPS)
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
 
#保存上述规则
service iptables save
 
#开启服务
systemctl restart iptables.service

#设置防火墙开机启动
systemctl enable iptables.service