彙整

Node.js 雲端部署 (3)

基本介紹

教學目標

透過 MEAN development stack on Google Compute Engine 進行 Node.js 應用程式的雲端部署。

前置作業

  1. 申請 Google Cloud Platform 雲端服務帳號。
  2. 建立 Google Cloud Platform 專案。

使用教學

只需透過「Deploy the MEAN stack now」 的功能,輸入專案相關資訊,就能在幾分鐘內部署完成 Node.js 伺服器。

同時完成以下項目的安裝

  • 資料庫: MongoDB
  • 網站框架: Express Node Framework
  • 前端框架: AngularJS
  • 後端伺服器: NodeJS

此外只要在專案中按下「運算」->「Compute Engine」->「VM 執行個體」->「SSH」,就能透過瀏覽器的方式進行遠端連線。

專案相關路徑:

  • 工具資源: /usr/src
  • 執行檔案: /usr/bin
  • 程式碼專案: /opt/myApp/

當部署完成之後,必須先進行網路存取的設定。

  1. 先至 Google 開發者控制台 ,選擇 Google Cloud Platform 專案,在專案中按下「運算」->「Compute Engine」->「網路」。
  2. 接著在網路「defualt」中新建「防火牆規則」,「允許的通訊協定或通訊埠」為 tcp:3000 。
  3. 最後將外部位址的「類型」從「臨時」轉成「靜態」,並且進行 IP 位址的命名。

完成以上步驟之後,即可開始存取 Node.js 雲端服務。
(例如: http://130.211.173.81:3000/)

相關資源

Node.js 雲端部署 (2)

基本介紹

教學目標

透過 AWS Elastic Beanstalk 進行 Node.js 應用程式的雲端部署。

前置作業

  1. 申請 Amazon Web Service 雲端服務帳號。
  2. 完成 eb 套件安裝與設置。
  3. 透過 AWS IAM Management Console 取得 AWS credentials 用於授權存取 AWS 雲端服務。

使用教學

下載專案

  1. 開啟 AWS Elastic Beanstalk 控制台
  2. 按下「Create New Application」,建立 Node.js 的 App 。
    (註: 需要透過精靈進行設定,包括程式資訊、環境類型、程式版本、環境資訊、附加資源等項目。)
  3. 先返回 AWS Elastic Beanstalk 控制台](https://console.aws.amazon.com/elasticbeanstalk) ,在新建立 App 項目旁按下「Actions」->「View Application Versions」,即可開始下載專案。
  • 環境類型: 主要設定使用的環境架構、程式語言和環境類型
  • 程式版本: 主要設定範例程式碼
  • 環境資訊: 主要設定對外存取的網址。
  • 附加資源: 主要設定 RDSVPC 的關聯 (非必要)。
  • 設定細節: 主要設定 EC2 的相關資訊,建議 Instance 類型選擇「t2.micro」。

專案架構

1
2
3
4
.
├── app.js
├── package.json
└── index.html

測試服務

建立專案資料夾

1
2
$ mkdir app
$ cd app

安裝 Node.js 相關套件。

1
$ npm install

此時可以修改部份程式碼,再啟動伺服器。

1
$ node app.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:3000 進行測試。

登入服務

  1. 連線且登入至 AWS Elastic Beanstalk 服務。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    $ eb init

    Select a default region
    1) us-east-1 : US East (N. Virginia)
    2) us-west-1 : US West (N. California)
    3) us-west-2 : US West (Oregon)
    4) eu-west-1 : EU (Ireland)
    5) eu-central-1 : EU (Frankfurt)
    6) ap-southeast-1 : Asia Pacific (Singapore)
    7) ap-southeast-2 : Asia Pacific (Sydney)
    8) ap-northeast-1 : Asia Pacific (Tokyo)
    9) sa-east-1 : South America (Sao Paulo)
    (default is 3): 1

    Select an application to use
    1) app
    2) [ Create new Application ]
    (default is 2): 1

    Enter your AWS Access Key ID : AKIAIOSFODNN7EXAMPLE
    Enter your AWS Secret Access Key : wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

部署服務

部署本機 Node.js 程式碼專案至 AWS Elastic Beanstalk 服務。

1
$ eb deploy

完成以上步驟之後,即可開始存取 Node.js 雲端服務。
(例如: http://app.elasticbeanstalk.com/)

相關資源

Node.js 雲端部署 (1)

基本介紹

教學目標

透過 IBM Bluemix 進行 Node.js 應用程式的雲端部署。

前置作業

  1. 申請 IBM Bluemix 雲端服務帳號 。
  2. 完成 cf 套件安裝與設置。

使用教學

下載專案

  1. 開啟 Bluemix 控制台
  2. 按下「Create An App」,建立 Node.js 的 App 。
    (註: 此時可以選擇 Boilerplates 或 Runtimes 類型中的項目。)
  3. 按下「View Quick Start」項目,按下「Download the starter application package.」,即可開始下載專案。

專案架構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
├── app.js
├── instructions.md
├── manifest.yml
├── package.json
├── README.txt
├── views
| ├── body.jade
| ├── head.jade
| └── index.jade
└── public
└── image
├── newapp-icon.png
└── style.css

  • 透過 package.json 檔案可以了解初始專案主要採用 Node.js 、 Express 和 Jade 等相關套件的版本。
  • 透過 manifest.yml 檔案可以了解自動化雲端部署可以彈性設定實體機器數、儲存空間、記憶體和執行指令等項目。

測試服務

建立專案資料夾

1
2
$ mkdir app
$ cd app

安裝 Node.js 相關套件。

1
$ npm install

此時可以修改部份程式碼,再啟動伺服器。

1
$ node app.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:3000 進行測試。

登入服務

連線且登入至 Bluxmix 服務。

1
2
3
$ cf api http://api.eu-gb.bluemix.net
$ cf login -u [Bluemix 帳號]
$ cf target -o [Bluemix 帳號] -s dev

部署服務

部署本機 Node.js 程式碼專案至 Bluxmix 服務。

1
$ cf push [App 名稱]

完成以上步驟之後,即可開始存取 Node.js 雲端服務。
(例如: http://app.eu-gb.mybluemix.net/)

相關資源

雲端服務 Microsoft Azure (2)

基本介紹

教學目標

初步了解如何透過 Micorsoft Azure 進行多通路行銷的應用服務架構。

重點概念

網路層

您的 App 行銷客戶將會來自於全世界各地,此時可以透過 「Azure 流量管理員」 進行負載平衡和分散流量的應用之外,若存取的資料為靜態內容時,更可以透過「Azure CDN」進行自動存取最接近的網路節點取得相關內容,最後針對機敏資料的存取,可以透過「Azure Active Directory」認證身份和授權資源的應用,目前支援 Active Directory、Microsoft、Facebook、Twitter、Google 等帳號的身份驗證。

服務層

行動 App 開發可以透過 「Azure行動服務」 可以解決開發行動 App 時所需要的伺服器服務,像是資料同步、身份驗證和 API 基本服務,此外針對跨平台的 App 開發,也可以透過「Azure 網站和應用程式」快速開發網站,以及 API 進階服務。當然除了文字和圖片之外,提供影音直播串流是最能吸引使用者下載 App 的意願,此時可以透過 「Azure 媒體服務」 完成串流應用,同時支援所有平台裝置的影音編碼格式。最後行動 App 最實用的功能就是推播通知,此時更可以透過 「Azure 通知中樞」 完成推播應用,同時支援所有平台裝置的推播通知註冊與應用。

資料層

針對行動 App 所需的非結構化的靜態內容,可以透過 「Azure 儲存體」 進行不同型態的檔案儲存,接著行動 App 就能夠透過專屬的網址進行存取相關內容,當然針對有關聯結構的資料,更可以透過「Azure 資料庫」進行管理,直接提供 HA 架構,以及根據不同的價格方案也能提供完整的備份及還原服務但是往往資料庫存取會有效態上的瓶頸問題,此時透過 「Azure 快取」 就能夠有效的提升資料存取的效能。最後每當使用者操作任何行動 App 時就會產生許多使用者記錄,此時龐大的記錄量可以透過 「Azure HDInsight」 進行儲存,之外再搭配 Apache Hadoop 相關的技術架構進行資料分析。

Architecture blueprint for Multichannel marketing application. (Microsoft Azure)

相關資源

Node.js 圖表處理 (5)

基本介紹

教學目標

透過 Polymer 開源碼專案之 Google Chart 套件呈現 iOS App 使用分析的比例圖表。

前置作業

  • 完成 Node.js 套件安裝與設置。

  • 建立專案資料夾,同時安裝 Polymer 相關套件

    1
    2
    3
    4
    $ mkdir app
    $ cd app
    $ npm install -g bower
    $ bower init

按照步驟輸入對應資訊產生設定檔,如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
name: 'app',
version: '0.0.1',
authors: [
'leoyeh.me@gmail.com'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'public/components',
'test',
'tests'
]
}

接著安裝 Polymer 相關套件。

1
2
3
4
$ bower install --save Polymer/polymer
$ bower install --save Polymer/core-elements
$ bower install --save Polymer/paper-elements
$ bower install --save GoogleWebComponents/google-chart

  • 最後在專案資料夾中新增前端和後端的程式碼檔案。
    ./public/app.html
    ./server.js

使用教學

撰寫相關程式碼至適當檔案中。

./public/app.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<script src="components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-icons/core-icons.html">
<link rel="import" href="components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="components/paper-shadow/paper-shadow.html">
<link rel="import" href="components/google-chart/google-chart.html">
<style type="text/css">
body {
font-family: Arial;
margin: 0;
color: #333;
}

core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}

.card {
display: inline-block;
background: white;
box-sizing: border-box;
width: 500px;
margin: 16px;
padding: 16px;
border-radius: 2px;
}

google-chart {
width: 100%;
}

</style>

</head>
<body fullbleed vertical layout unresolved>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>iOS App 使用分析</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</core-toolbar>
<center>
<paper-shadow z="1" class="card">
<h3>iPhone 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/iphone_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
<paper-shadow z="1" class="card">
<h3>iPad 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/ipad_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
</center>
</body>
</html>

./server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get("/api/v1/iphone_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 28.7 ], ["Finance", 0.2], ["Life", 29.5], ["News", 5.2],
["Social", 8.1], ["Tech", 0.2], ["Travel", 0.8], ["Videos", 27.1], ["Education", 0.1] ]
res.json(data);
});
app.get("/api/v1/ipad_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 20.6 ], ["Finance", 0.2], ["Life", 5.0], ["News", 3.2],
["Social", 9.0], ["Tech", 0.2], ["Travel", 0.4], ["Videos", 61.3], ["Education", 0.2] ]
res.json(data);
});
app.listen(8080);

開啟終端機,切換至該專案目錄下,接著執行伺服器程式。

1
$ node server.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:8080/app.html 進行測試。

相關資源