第5章 运维和发布Vue.js项目
第5章 运维和发布Vue.js项目
一般传统公司特别喜欢一个角色用一个人，如在生产流水线上，一个工人只负责拧螺丝，另一个工人只负责喷漆。很多软件公司也是这样，有人专门负责编写代码，有人专门负责运维。但是这样的弊端是：出了问题，程序员接触不到服务器，不知道问题出在哪里，运维可以接触服务器，却看不懂代码，也没有办法解决问题。所以传统公司往往怕出问题，因为解决起来特别慢。
现在，越来越多的人意识到，让程序员懂得运维知识特别重要。最好的运维就是程序员自己。在2011年，国外就开始流行一个词汇：DevOps（Developer + Operations），也叫作敏捷运维，就是对既懂编程又懂运维的人的称呼。
我们要有追求，做一个会运维的编程高手，做一个DevOps。
5.1 打包和部署
我们平时都是在本地做开发，每次打开的都是http://localhost:8080/#/，而在真实的项目中，需要把项目部署到某个地方，对项目进行打包和编译。
另外，在产品正式上线之前，也要在测试服务器上进行发布，这样才能发现一些平时在localhost上看不到的问题。
5.1.1 打包
直接使用下面的命令就可以把vue项目打包。
$ npm run build
该命令的运行过程如下：
可以看到：
（1）整个过程耗时18.658s。
（2）使用的Webpack版本是2.6.1。
（3）对CSS文件进行了优化（优化的比率是52.11%）。
（5）所有的.vue文件都被打包编译成了下面的文件。
$ find ./dist . ./static ./static/css ./static/css/app.32ddfe6eea5926f8e3c760d764fef3fa.css ./static/css/app.32ddfe6eea5926f8e3c760d764fef3fa.css.map ./static/js ./static/js/vendor.33c767135f1684f458a7.js.map ./static/js/app.d8b9f437c302a7070fe7.js.map ./static/js/manifest.75e2ba037e0bc6934514.js ./static/js/manifest.75e2ba037e0bc6934514.js.map ./static/js/app.d8b9f437c302a7070fe7.js ./static/js/vendor.33c767135f1684f458a7.js ./index.html
其中包括js、css、map和index.html。
我们需要将其放到HTTP服务器上，如nginx、apache。
5.1.2 部署
1. 上传代码到远程服务器
使用scp或ftp的方式，可以把代码上传到服务器。假设服务器是linux：
- 路径是/opt/app/test_vue；
- 服务器IP是123.255.255.33；
- 服务器ssh端口是6666；
- 服务器用户名是root。
$ scp -P 6666 -r dist [email protected]:/opt/app index.html 100% 528 0.5KB/s 00:00 app.32ddfe6eea5926f8e3c760d764fef3fa.css 100% 74 0.1KB/s 00:00 app.32ddfe6eea5926f8e3c760d764fef3fa.css.map 100% 623 0.6KB/s 00:00 vendor.33c767135f1684f458a7.js.map 100% 927KB 927.3KB/s 00:00 app.d8b9f437c302a7070fe7.js.map 100% 63KB 62.6KB/s 00:00 manifest.75e2ba037e0bc6934514.js 100% 1511 1.5KB/s 00:00 manifest.75e2ba037e0bc6934514.js.map 100% 14KB 14.3KB/s 00:00 app.d8b9f437c302a7070fe7.js 100% 9323 9.1KB/s 00:00 vendor.33c767135f1684f458a7.js 100% 119KB 118.7KB/s 00:00
这样就把本地的dist目录，上传到了远程的/opt/app目录上。
2. 配置远程服务器
（1）登录远程服务器。
$ ssh [email protected] -p 6666 (输入密码，回车)
Welcome to Ubuntu 14.04.4 LTS (GNU/Linux 3.13.0-86-generic x86_64)
root@my_server:～#
（