微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue.js项目部署到服务器的详细步骤

前言

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

准备工作

服务器

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

编译打包

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

Xshell

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

WinSCP

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

正式开始

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

登录 WinSCP,连接远程服务器

打开 WinSCP,会出现如下界面

WinSCP登录界面

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

登录成功界面

认是 /root 界面。

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

登录 Xshell 连接远程服务器

打开 Xshell,第一次登录会有如下界面:

Xshell登录

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

之后会有这个页面

会话

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

输入密码

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

连接成功

安装 node.js

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

  1. 下载源码
  2. 解压源码
  3. 编译安装

下载源码,这里以最新的 6.11.1 为例:

rush:js;"> cd /usr/local/src/ wget http://nodejs.org/dist/v6.11.1/node-v6.11.1.tar.gz

解压源码:

rush:js;"> cd /usr/local/src/ tar zxvf node-v6.11.1.tar.gz

编译安装:

rush:js;"> cd node-v6.11.1 ./configure --prefix=/usr/local/node/6.11.1 make make install

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

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

rush:js;"> yum install gcc-c++

就可以了。

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

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

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

rush:js;"> #set for nodejs export NODE_HOME=/usr/local/node/6.11.1 export PATH=$NODE_HOME/bin:$PATH

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

rush:js;"> source /etc/profile

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

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

全局安装:

rush:js;"> npm install pm2 -g

进入 /opt (这里是你放 dist 的和 app.js 的目录),执行命令:

rush:js;"> pm2 start app.js --watch pm2 save pm2 startup

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

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

vps,安装 iptables:

rush:js;"> yum install -y iptables-service

粗暴的关闭防火墙(不推荐):

rush:js;"> 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

单独开启某一个端口(推荐):

查看状态:

rush:js;"> iptables -L -n

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

使用iptables开放如下端口

rush:js;"> /sbin/iptables -I INPUT -p tcp --dport 8000 -j ACCEPT

保存

rush:js;"> /etc/rc.d/init.d/iptables save

重启服务

rush:js;"> service iptables restart

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

rush:js;"> /etc/init.d/iptables status

方法2:

或直接编辑/etc/sysconfig/iptables

rush:js;"> -A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT

保存在前面部分

再重启:

rush:js;"> service iptables restart

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

总结

以上所述是小编给大家介绍的Vue.js项目部署到服务器的详细步骤。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文地址:https://www.jb51.cc/vue/37827.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐