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


Posted in Javascript onJuly 17, 2017

前言

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

准备工作

服务器

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

编译打包

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

Xshell

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

WinSCP

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

正式开始

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

登录 WinSCP,连接远程服务器

打开 WinSCP,会出现如下界面

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

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

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

默认是 /root 界面。

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

登录 Xshell 连接远程服务器

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

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

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

之后会有这个页面

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

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

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

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

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

安装 node.js

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

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

下载源码,这里以最新的 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

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

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

vps,安装 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

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

总结

以上所述是小编给大家介绍的Vue.js项目部署到服务器的详细步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 #Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 #Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 #Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 #Javascript
You might like
PHP SQLite类
2009/05/07 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Javascript之文件操作
2007/03/07 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
营销学习心得体会
2014/09/12 职场文书
解除施工合同协议书
2014/10/17 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Windows server 2012搭建FTP服务器
2022/04/29 Servers