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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
原生javascript如何实现共享onload事件
Jul 03 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
层叠菜单的动态生成
2006/10/09 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python中求对数方法总结
2020/03/10 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
公司年会策划方案
2014/05/17 职场文书
保证书格式
2015/01/16 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL