javascript
Day 8: Harp.JS——现代静态web服务器
到目前為止,我們的“30天學習30種技術”系列已經討論了Bower、AngularJS和GruntJS。這些最新的技術可以幫助開發者更高效地開發,也可以減輕開發者的負擔。今天,我們將學習另一項新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的目錄,結構如下:
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 is my blog. Enjoy.刷新一下瀏覽器,我們就能看到改動了。
部署到云端
部署harp應用有多種方式,詳見文檔。我將介紹如何部署到 OpenShift。
OpenShift是一個公開的PAAS,你可以使用OpenShift免費部署Java、NodeJS、Ruby、Python和PHP應用。
在我們部署應用到OpenShift之前,我們需要先設置一下:
注冊一個OpenShift賬號。注冊是完全免費的,Red Hat給每個用戶三枚免費的Gear,可以用Gear運行你的應用。在寫作此文的時候,每個用戶能免費使用總共 1.5 GB 內存和 3 GB 硬盤空間。
安裝 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
使用 rhc 的 setup 命令配置你的 OpenShift 賬號。這個命令會幫助你創建一個命名空間,同時將你的ssh公鑰上傳至 OpenShift 服務器。
設置之后,我們可以通過如下命令創建一個新的OpenShift應用。
rhc create-app blogonopenshift nodejs-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) }本地提交代碼,然后推送變動到云端。
git add . git commit -am "blogonopenshift app deployed to cloud" git push推送代碼之后,應用被部署到OpenShift上,我們可以在http://blogonopenshift-{domain-name}.rhcloud.com上訪問我們的應用。我們的示例應用跑在 http://blog-shekhargulati.rhcloud.com 上。
今天就這些了。我希望這會有用。請繼續反饋。
from: http://segmentfault.com/a/1190000000355181
總結
以上是生活随笔為你收集整理的Day 8: Harp.JS——现代静态web服务器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Day 7: GruntJS 在线重载
- 下一篇: Day 9: TextBlob——对文本