专栏首页互联网杂技nodejs+ftp+linux+nginx 自动部署前端

nodejs+ftp+linux+nginx 自动部署前端

原理就是利用

1.nodes中ftp模板,上传本地的前端文件到服务器指定目录;

2.在服务器上安装nginx已经搭建了ftp服务

下面就是详细步骤:

1.linux搭建FTP服务器,以前说了,就不说了;

2.linux安装nginx,以前也说了;

上面这两个属于前面的工作,先肯定要安装;

nginx注意配置,下面是我的配置:

注意看这个:

server {
        listen  8112;
        server_name localhost;
        location / {
                root /home/test/testautodev;
                index  index.html index.htm;
        }
    }

代表监听8112端口

根目录在/home/test/testautodev

入口文件是:index index.html index.htm;

到时候,我本地用nodejs上传就是上传到这个目录;

到时候启动nginx,可以用ip+端口8112访问;

nginx的配置每改动一次,记得重启生效;

记得给这个目录下面的文件给权限,不然上传的时候,无法创建文件夹;

权限这样给:

chmod 777 /home/test/testautodev/

3.之后,看nodejs这边

这个前端的项目结构是这样的,举个例子,结构比较简单,知道这个原理,结构复杂也是一样的

下面就是要把testautodev/testautodev这个目录整个上传到服务器

下面就是node/index.js

/**
 * Created by zhouli on 17/4/27.
 */
var Client = require('ftp');
var fs = require('fs');
var path = require('path');
var c = new Client();
var connectionProperties = {
 host: "47.89.193.183",
 user: "test",
 password: "Zhouli@json"
};

 


c.on('ready', function () {
c.put('../testautodev/index.html', 'testautodev/index.html', function(err) {
 if (err) throw err;
 console.dir("上传文件到服务器");
 c.end();
});
c.put('../testautodev/css/index.css', 'testautodev/css/index.css', function(err) {
 if (err) throw err;
 console.dir("上传文件到服务器");
 c.end();
});
c.put('../testautodev/js/index.js', 'testautodev/js/index.js', function(err) {
 if (err) throw err;
 console.dir("上传文件到服务器");
 c.end();
});

});


c.connect(connectionProperties);

写完后,到node这个目录执行这个文件

node index.js

不错意外就会上传成功;

如果有报错,可能是node模块没有安装,那就根据提示安装;

还有可能是服务器那边没有设置创建文件权限,那么就需要设置;

上传之后,服务器上就是这个样子

如果服务器启动了nginx,那么访问也有结果的

4。上面那个nodejs文件写得比较麻烦

其实可以直接用一个函数获取路径,

node/index.js
/**
 * Created by zhouli on 17/4/27.
 */
var Client = require('ftp');
var fs = require('fs');
var path = require('path');
var c = new Client();
var connectionProperties = {
 host: "47.89.193.183",
 user: "test",
 password: "Zhouli@json"
};

//获取目录下来的文件路径
var walk = function (dir, done) {
 var results = [];
 fs.readdir(dir, function (err, list) {
 if (err) return done(err);
 var pending = list.length;
 if (!pending) return done(null, results);
        list.forEach(function (file) {
            file = path.resolve(dir, file);
 fs.stat(file, function (err, stat) {
 if (stat && stat.isDirectory()) {
 walk(file, function (err, res) {
 results = results.concat(res);
 if (!--pending) done(null, results);
                    });
                } else {
 results.push(file);
 if (!--pending) done(null, results);
                }
            });
        });
    });
};


c.on('ready', function () {
 var tpath = path.resolve(__dirname, '..') + "/testautodev";
 walk(tpath, function (err, results) {
 if (err) throw err;
        results.forEach(function (filename) {
            (function (filename) {
 "use strict";
 var spath = filename.replace(/\/Users\/zhouli\/mycoding\/testautodev\//g, "");
 c.put('../' + spath, spath, function (err) {
 if (err) throw err;
 console.dir("上传文件" + spath);
 c.end();
                });
            })(filename)
        });
    });


});

c.connect(connectionProperties);

这样就方便多了,不需要每次加一个文件,手动加一次;

还有一个地方要注意

就是

这个地方,nodes中for循环与foreach都是异步的

这种利用闭包保证同步

results.forEach(function (filename) {
            (function (filename) {
 "use strict";
 var spath = filename.replace(/\/Users\/zhouli\/mycoding\/testautodev\//g, "");
 c.put('../' + spath, spath, function (err) {
 if (err) throw err;
 console.dir("上传文件" + spath);
 c.end();
                });
            })(filename)
        });

也就是说,下面这两种是达不到效果的

results.forEach(function (filename) 
 "use strict";
 var spath = filename.replace(/\/Users\/zhouli\/mycoding\/testautodev\//g, "");
 c.put('../' + spath, spath, function (err) {
 if (err) throw err;
 console.dir("上传文件" + spath);
 c.end();
                });
 
        });
for(var i = 0; i < results.length; i++){
 var spath = results[i].replace(/\/Users\/zhouli\/mycoding\/testautodev\//g, "");
 c.put('../' + spath, spath, function (err) {
 if (err) throw err;
 console.dir("上传文件" + spath);
 c.end();
                });
}

这两种方式都只会上传最后一个,原因就是循环太快,上传很慢;

导致输出同一个文件

下面就是结果

(浏览器并不是访问的本地,而是公网的服务器)

--------------

------

学习php的同学可加qq群交流:419079878;

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-05-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端工作面试经典问题(超级全)

    本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能...

    前朝楚水
  • 简单理解通过原型继承

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>...

    前朝楚水
  • 上一期前端面试题整理答案

    上期答案 1.盒子模型 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(bor...

    前朝楚水
  • 使用合适的设计模式一步步优化前端代码

    作者:晓飞 本文原创,转载请注明作者及出处 在后端语言中,设计模式应用的较为广泛。如Spring中常见的工厂模式、装饰者模式、单例模式、迭代器模式。但...

    iKcamp
  • 微信小游戏1

    游戏内容介绍 游戏作品内容准确介绍〔包括但不限于:游戏背景、扮演角色、游戏角色(NPC)、场景、主要情节、玩法、功能(系统)、主要特点、游戏使用方法等〕,须逐...

    达达前端
  • javascript插件的几种写法

    var Helloword = function(objId){ var _get_dom = function(Id){ re...

    stys35
  • ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性。原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门,...

    牧云云
  • JavaScript中常见的十五种设计模式

    在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}),而基于JS中闭包与弱类型等特性,在...

    书童小二
  • 前端AES的加密和解密

    在工作的过程中,经常要对一些数据做一些加密,当然有复杂的加密和简单的加密,也有对称加密等等。总之加密的方式有很多。今天在这里,我只是简单的分享一个我最近遇到的加...

    用户1174387
  • 75个JavaScript面试题集锦,内含解答,自测 JS 掌握程度

    它们是属于虚值,可以使用Boolean(value)或!!value将其转换为布尔值时,值为false。

    前端达人

扫码关注云+社区

领取腾讯云代金券