第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:～#

（