新浪云搭建簡(jiǎn)單的 Node.js Web 應(yīng)用

使用新浪云搭建 Node.js Web 應(yīng)用教程

[toc]

閱讀本文前,需要對(duì) node.js 、npm、常用 Git 操作、express 有基本的掌握

一、準(zhǔn)備工作:

注冊(cè)號(hào)新浪云賬號(hào)

進(jìn)入 http://www.sinacloud.com/sae.html
(用微博賬號(hào)即可直接登錄)

創(chuàng)建云應(yīng)用空間

新浪云的應(yīng)用空間其實(shí)就相當(dāng)于一個(gè) web 站點(diǎn) + 一個(gè)有完整服務(wù)器環(huán)境的代碼倉(cāng)庫(kù)

云應(yīng)用空間的創(chuàng)建,可以參考新浪的文檔:如何創(chuàng)建一個(gè)云空間應(yīng)用 。當(dāng)然這里需要選擇開發(fā)語(yǔ)言為 Node.js。

登陸,然后進(jìn)入控制臺(tái) -> 云應(yīng)用SAE -> 代碼管理

以上步驟完成后,我們就有了一個(gè) web 應(yīng)用站點(diǎn)。這個(gè)站點(diǎn)可以用來(lái)部署我們的 html 頁(yè)面。站點(diǎn)地址可以從這里查看:

準(zhǔn)備工作做好了,接下來(lái)該配置 Node.js 服務(wù)器環(huán)境,部署 web 頁(yè)面上去。

二、Node.js 服務(wù)器配置

新浪云比較方便的是,即使你對(duì) Node.js 服務(wù)器開發(fā)沒有接觸過(guò)也沒關(guān)系,新浪云的 Node.js 環(huán)境基本是傻瓜式的,即開即用。所以服務(wù)器配置環(huán)節(jié),過(guò)。

node.js 簡(jiǎn)單教程

順便安利個(gè) 30分鐘 Node.js 入門 的教程,完全沒有接觸過(guò) Node.js 的同學(xué)可以快速入門一下。

三、編寫 Node.js 服務(wù)代碼并部署

1、先在本地創(chuàng)建一個(gè)代碼目錄 eg: my-node-demo,從新浪的 Git 倉(cāng)庫(kù)里 clone 出空項(xiàng)目到 my-node-demo 下。拉代碼的過(guò)程很簡(jiǎn)單,具體可以參考 新浪的代碼部署手冊(cè) 文檔

2、在本地代碼路徑 my-node-demo 下創(chuàng)建一個(gè) server.js 文件,這里我們先使用入門教程里最簡(jiǎn)單的 Node.js 代碼:

// server.js
var http = require('http');

http.createServer(function (request, response) {

    // 發(fā)送 HTTP 頭部 
    // HTTP 狀態(tài)值: 200 : OK
    // 內(nèi)容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 發(fā)送響應(yīng)數(shù)據(jù) "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 終端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

3、由于新浪的 Node.js 構(gòu)建環(huán)境需要從 package.json 文件中讀取配置信息,我們需要在 my-node-demo 下創(chuàng)建一個(gè)package.json 文件。

這里我們直接使用 npm init 命令生成一個(gè)。 NPM 是 Node Package Manager 的縮寫,也就是 Node 包管理器,類似于 iOS 開發(fā)中的 CocoaPods,而 npm init 就相當(dāng)于pod init了.

在 server.js 文件所在目錄上,執(zhí)行 npm init,按照命令行里的提示一步一步直接敲回車即可。

4、部署

這里的所謂部署 == 提交代碼到新浪云 Git 服務(wù)器……

所以,使用 Git 命令打 commit log,push 代碼,等待云端編譯即可:

// 提交代碼
?  yehot git:(master) ? git add .
?  yehot git:(master) ? git commit -m "添加package.json"
[master a6b0d8f] 添加package.json
 1 file changed, 20 insertions(+)
 create mode 100644 package.json

// push 代碼后,自動(dòng)開始構(gòu)建
?  yehot git:(master) ? git push sae master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 377 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: 導(dǎo)出 Git 代碼中...
remote: 構(gòu)建程序中...
-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_ENV=production
       NODE_MODULES_CACHE=true

-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version (latest stable) via semver.io...
       Downloading and installing node 7.2.1...
       Using default npm version: 3.10.10

-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
       - nodegyp_lib (not cached - skipping)

-----> Building dependencies
       Pruning any extraneous modules
       Installing node modules (package.json)
       yehot@1.0.0 /tmp/build
       `-- formidable@1.0.17


-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
       - nodegyp_lib (nothing to cache)

-----> Build succeeded!
       `-- formidable@1.0.17

-----> Discovering process types
       Default types for  -> web
-----> Compiled slug size is 16M
remote: Generating docker image...
remote: Pushing image registry.docker.sae.sina.com.cn/yehot:c72c679 .....
remote: 部署程序中 .....
To https://git.sinacloud.com/yehot
   a6b0d8f..c72c679  master -> master

到這里構(gòu)建成功,就已經(jīng)部署成功了。這時(shí)我們的 Hello world 頁(yè)面就可以在你的新浪云 Web 站點(diǎn)看到了:

四、部署 html 頁(yè)面

1、懶得自己寫個(gè)頁(yè)面了,直接用一個(gè)網(wǎng)站模板:40 個(gè) Bootstrap 網(wǎng)站模板 ,隨便選一個(gè),把代碼壓縮包 down 下來(lái)

2、解壓,將代碼網(wǎng)站模板全部文件拷貝到我們的剛創(chuàng)建的本地 Node 倉(cāng)庫(kù) my-node-demo 目錄下。

3、這次我們就不是簡(jiǎn)單的響應(yīng)個(gè) hello world 的,需要將 html 文本作為頁(yè)面 send 出去。這里直接使用 node.js 流行框架 Express 幫我們完成這件事。

首先在代碼目錄 my-node-demo 路徑下執(zhí)行命令:

npm install express --save

這樣會(huì)在 package.json 中,生成一條依賴信息:

同時(shí),會(huì)將 express 的源碼從 npm 倉(cāng)庫(kù)中拉下來(lái)到本地自動(dòng)生成的 node_modules 目錄中。此時(shí)目錄結(jié)構(gòu)如下:

4、改造 server.js 代碼

工具準(zhǔn)備好了,開始使用:

// server.js

var express = require('express')
var app = express()

// 靜態(tài) html 頁(yè)面,需要將當(dāng)前目錄下的所有文件都設(shè)置為 static
app.use(express.static(__dirname + '/'));

app.get('/', function (req, res) {
    console.log('start server');
    // sendFile 函數(shù),在有 request 訪問(wèn)時(shí),將當(dāng)前目錄下的 index.html 文件作為 response 返回
    res.sendFile(__dirname + '/index.html');
    console.log('start success');
})

// 監(jiān)聽 8000 端口
app.listen(process.env.PORT || 8000)

5、Ok,再次 commit log、push ,等待編譯

編譯完成后,刷新我們的站點(diǎn),就能看到一個(gè)漂亮的 html 頁(yè)面了:

bootstrap 是 Twitter 開源的強(qiáng)大的響應(yīng)式布局框架,已經(jīng)幫我們做好了移動(dòng)端瀏覽器的適配工作,可以在手機(jī)瀏覽器上訪問(wèn)下試試,效果還是挺不錯(cuò)的。

五、作為服務(wù)器接口使用

目前在我們的 Node 服務(wù)上,已經(jīng)成功部署了一個(gè)簡(jiǎn)單的 web 應(yīng)用。

其實(shí)我們?nèi)粘?蛻舳碎_發(fā)中,需要和服務(wù)器聯(lián)調(diào)的各種接口,也都是這樣的一個(gè)個(gè) 服務(wù)器上的資源地址路徑( URL)。

我們可以在 iOS 項(xiàng)目中,通過(guò) get 請(qǐng)求訪問(wèn)一下我們部署好 HTML 頁(yè)面的站點(diǎn) http://xxx.applinzi.com 試試,以 AFNetworkign 為例:

AFHTTPSessionManager *sessionManager = [AFHTTPSessionManager manager];
sessionManager.responseSerializer = [AFHTTPResponseSerializer serializer];

// 通常是 @"text/json" ,我們直接 get 請(qǐng)求頁(yè)面,需要加上 @"text/html"
sessionManager.responseSerializer.acceptableContentTypes = [NSSet setWithObject:@"text/html"];

[sessionManager GET:@"http://yehot.applinzi.com/index.html" parameters:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
    NSLog(@"%@",responseObject);
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
    NSLog(@"%@",error);
}];

六、其它

新浪云控制臺(tái)使用

1、查看操作記錄


2、注冊(cè)會(huì)送 200 云豆 == 2元

沒有額外流量消耗的話,每天默認(rèn)扣 10 個(gè)豆

如果欠費(fèi)后顯示

3、查看日志、重啟

最后,新浪是有 node 應(yīng)用的部署指南的

上邊這些坑,整整折騰了我5個(gè)小時(shí)后,我才發(fā)現(xiàn)渣浪早就有這個(gè)了: 新浪 node 應(yīng)用部署指南 不說(shuō)了,都是淚。

當(dāng)然使用 Python、PHP 也可以查看對(duì)應(yīng)的文檔
https://www.sinacloud.com/index/support.html

參考:

1、 在新浪云上用php+mysql搭建簡(jiǎn)單后臺(tái)系列

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,909評(píng)論 25 709
  • 本文首發(fā)于 GitChat,現(xiàn)免費(fèi)放出~感謝大家的支持。 我們都知道,大學(xué)幾乎是沒有 Web 前端課的。以我所在的...
    hylerrix閱讀 5,147評(píng)論 6 60
  • 你買了件好衣服,買了雙好鞋,卻總等著“大日子”才穿,最后衣服舊了,鞋子過(guò)時(shí)了。我不明白你為什么只有在特定的日子才想...
    微塵九回閱讀 311評(píng)論 0 0
  • 喬布斯(Steve Jobs)說(shuō):“Stay hungry; stay foolish.” 這句話到底是什么意思呢...
    半度Deep閱讀 1,236評(píng)論 0 0
  • 教大家做一款黑米糕: 1、黑米、糯米泡過(guò)夜晾干,用料理機(jī)打成粉過(guò)篩。 2、準(zhǔn)備三個(gè)雞蛋,分兩個(gè)盆蛋清蛋黃分離。 3...
    五月的荷閱讀 413評(píng)論 6 10

友情鏈接更多精彩內(nèi)容