Day 8: Harp.JS——现代静态web服务器

简介: 到目前为止,我们的“30天学习30种技术”系列已经讨论了Bower、AngularJS和GruntJS。这些最新的技术可以帮助开发者更高效地开发,也可以减轻开发者的负担。今天,我们将学习另一项新JavaScrit技术,它叫做Harp。在本文中,我们将开始了解Harp的基础,接着我们将创建一个简单的Harp应用,最后将此应用部署到OpenShift。

编者注:我们发现了比较有趣的系列文《30天学习30种新技术》准备翻译,一天一篇更新,年终礼包。下面是第8天的内容。


到目前为止,我们的“30天学习30种技术”系列已经讨论了BowerAngularJSGruntJS。这些最新的技术可以帮助开发者更高效地开发,也可以减轻开发者的负担。今天,我们将学习另一项新JavaScrit技术,它叫做Harp。在本文中,我们将开始了解Harp的基础,接着我们将创建一个简单的Harp应用,最后将此应用部署到OpenShift。


Harp是什么?

Harp是为现代web应用准备的开源静态服务器。它可以为Jade、Markdown、EJS、CoffeeScript、LESS、Stylus和HTML、CSS、Javascript提供服务,无需任何配置。

由于越来越多的开发转向客户端,开发者们开始使用替代语言,然后将其编译为原生语言。比如,我们使用诸如Jade和EJS之类的模板库,而不是直接编写HTML。同理,我们可以使用CoffeeScript,而不是直接写JavaScript。至于样式,我们可以用Stylus和LESS取代CSS。

Harp是零配置的服务器,用于为静态资源提供服务。它内置了对 .jade.markdow.ejs.coffee.less.styl.html.css.js 的支持。


Harp依赖

Harp依赖于NodeJS和NPM包管理器(node.js安装自带NPM)。你可以从官网下载最新版的NodeJS。一旦安装了node.js和NPM,就可以使用NPM安装Harp。


安装Harp

输入如下命令安装Harp。

npm install -g harp

以上命令将全局安装harp包,这样在任何目录都可以使用harp命令。

(取决于你系统的设置,你可能需要在命令前加上sudo。)


创建Harp项目

harp命令行让我们可以方便地创建harp应用。创建一个应用,只需使用harp init命令。

harp init blog

这会创建一个名为blog的目录,结构如下:

image.png

harp创建的项目默认使用Jade(html)和LESS(css)。


启动Harp服务

我们可以使用harp server命令来运行应用:

$ cd blog

$ harp server

         _____                    _____                    _____                    _____          

        /l    l                  /l    l                  /l    l                  /l    l        

       /::l____l                /::l    l                /::l    l                /::l    l        

      /:::/    /               /::::l    l              /::::l    l              /::::l    l      

     /:::/    /               /::::::l    l            /::::::l    l            /::::::l    l      

    /:::/    /               /:::/l:::l    l          /:::/l:::l    l          /:::/l:::l    l    

   /:::/____/               /:::/__l:::l    l        /:::/__l:::l    l        /:::/__l:::l    l    

  /::::l    l              /::::l   l:::l    l      /::::l   l:::l    l      /::::l   l:::l    l  

 /::::::l    l   _____    /::::::l   l:::l    l    /::::::l   l:::l    l    /::::::l   l:::l    l  

/:::/l:::l    l /l    l  /:::/l:::l   l:::l    l  /:::/l:::l   l:::l____l  /:::/l:::l   l:::l____l

/:::/  l:::l    /::l____l/:::/  l:::l   l:::l____l/:::/  l:::l   l:::|    |/:::/  l:::l   l:::|    |

l::/    l:::l  /:::/    /l::/    l:::l  /:::/    /l::/   |::::l  /:::|____|l::/    l:::l  /:::|____|

l/____/ l:::l/:::/    /  l/____/ l:::l/:::/    /  l/____|:::::l/:::/    /  l/_____/l:::l/:::/    /

         l::::::/    /            l::::::/    /         |:::::::::/    /            l::::::/    /  

          l::::/    /              l::::/    /          |::|l::::/    /              l::::/    /  

          /:::/    /               /:::/    /           |::| l::/____/                l::/____/    

         /:::/    /               /:::/    /            |::|  ~|                       ~~          

        /:::/    /               /:::/    /             |::|   |                                  

       /:::/    /               /:::/    /              l::|   |       Harp v0.9.4              

       l::/    /                l::/    /                l:|   |       Static Web Server          

        l/____/                  l/____/                  l|___|       By Chloi Inc. 2012-2013    

Your server is listening at http://localhost:9000/

现在,访问 http://localhost:9000/ 你会看到如下页面:

https://www.openshift.com/sites/default/files/images/harp-sample-app.png

我们打开index.jade文件,做一些改动:

h1 Welcome to Harp.

h3 This ismy blog. Enjoy.

刷新一下浏览器,我们就能看到改动了。

image.png

部署到云端

部署harp应用有多种方式,详见文档。我将介绍如何部署到 OpenShift

OpenShift是一个公开的PAAS,你可以使用OpenShift免费部署Java、NodeJS、Ruby、Python和PHP应用。


在我们部署应用到OpenShift之前,我们需要先设置一下:

  1. 注册一个OpenShift账号。注册是完全免费的,Red Hat给每个用户三枚免费的Gear,可以用Gear运行你的应用。在写作此文的时候,每个用户能免费使用总共 1.5 GB 内存和 3 GB 硬盘空间。
  2. 安装 rhc客户端工具rhc是ruby gem,因此你的机子上需要装有 ruby 1.8.7以上版本。 只需输入 sudo gem install rhc即可安装 rhc 。如果你已经安装过了,确保是最新版。运行sudo gem update rhc即可升级。关于配置rhc命令行工具的详细信息,请参考: https://openshift.redhat.com/community/developers/rhc-client-tools-install
  3. 使用 rhc 的 setup 命令配置你的 OpenShift 账号。这个命令会帮助你创建一个命名空间,同时将你的ssh公钥上传至 OpenShift 服务器。


设置之后,我们可以通过如下命令创建一个新的OpenShift应用。

rhccreate-appblogonopenshiftnodejs-0.10

这会为我们创建一个名为gear的应用容器,并自动配置相应的SELinux政策和cgroup设置。OpenShift同时会为我们创建一个私有的git仓库,并将其克隆到本地。最后,OpenShift会自动配置DNS。应用可以在如下地址访问

http://blogonopenshift-{domain-name}.rhcloud.com/

{domain-name}替换为你自己的OpenShift域名(也叫命名空间)。

接着,跳转到blogonopenshift文件夹,初始化一个新的harp项目。

cd blogonopenshift

harp init _harp

这会在blogonopenshift目录的_harp文件夹中创建harp应用。

修改blogonopenshift目录中的package.json,添加harp依赖。

{

 "dependencies":{

   "harp":">=0.8"

 }

}

然后,使用NPM安装依赖:

npm install

接着修改server.js

require('harp').server("_harp", { ip : process.env.OPENSHIFT_NODEJS_IP, port: process.env.OPENSHIFT_NODEJS_PORT})

在上面的例子中,我们创建了一个harp服务器的实例。我们把与该服务器绑定的OpenShift环境下的ip地址和端口号传递给它。在云环境中,建议使用环境变量,而不是写死了的值。

如果你现在将代码推送到OpenShift,它还不能工作。这是因为harp API没有提供配置IP地址的选项。为此我在GitHub的harp仓库上开了一个工单。就目前而言,我们需要打开node_modules/harp/lib目录下的index.js文件,修改下server函数:

/**

* Server

*

* Host a single Harp Application.

*

*/

exports.server = function(dirPath, options, callback){

 connect.createServer(

   middleware.regProjectFinder(dirPath),

   middleware.setup,

   middleware.underscore,

   middleware.mwl,

   middleware.static,

   middleware.poly,

   middleware.process,

   middleware.fallback

 ).listen(options.port,options.ip ,  callback)

}

本地提交代码,然后推送变动到云端。

gitadd .

git commit -am "blogonopenshift app deployed to cloud"

gitpush

推送代码之后,应用被部署到OpenShift上,我们可以在http://blogonopenshift-{domain-name}.rhcloud.com上访问我们的应用。我们的示例应用跑在 http://blog-shekhargulati.rhcloud.com 上。

相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
22天前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
|
16天前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
2天前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
12天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
26 3
|
17天前
|
移动开发 JavaScript 数据可视化
|
1月前
|
人工智能 开发框架 前端开发
Web开发之Vue.js
Web开发之Vue.js
21 3
|
12天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。
|
2月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
141 1
|
2月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
75 0