開發 Web 應用程式

使用指令行

讓我們從開啟有經驗的開發人員所熟悉的工具，以及剛入門人員的最佳新朋友開始：指令行。 對於許多人，圖形使用者介面 (GUI) 將您電腦的指令行介面降級為二等狀態。 但現在是時候回復它了 (雖然 GUI 不會很快消失，尤其是當您需要瀏覽 Web 以下載指令行工具集的指示時)。

開啟 Shell 並建立目錄。 將您自己的參考目錄變更為您建立的新目錄。 建立後，您的應用程式有自己的子目錄，其中包含啟動和運行所需的起始程式碼和配置。

離開指令行並回到瀏覽器，以便您可以遵循指示來安裝鏈結上的 IBM Cloud 平台開發人員工具。 Developer Tools提供了一種可擴展且可重複的方法來建置和部署雲端應用程式。

安裝 Docker

使用容器 (例如 Docker) 可加速開發並簡化測試，並支援自動化部署。 容器是一種輕量級結構，不需要作業系統，只需要程式碼和從依賴項到設定的所有配置。

Docker 隨 Developer Tools一起安裝，且您需要它。 它的工作大多在搭建新應用程式的常式內的背景中進行。 Docker 必須在執行中，建置指令才能運作。 繼續在 Docker hub線上建立一個Docker帳戶，運行Docker應用程序，然後登入。

安裝 Node.js

您建立的應用程式使用 Node.JS作為伺服器端引擎來執行此 Web 應用程式的JavaScript程式碼。 若要使用Node套件管理器 ( npm ) 來管理應用程式的依賴項，您必須在本機安裝Node。 此外，Node 的本端安裝也可簡化測試，加快開發速度。

在開始之前，您可以考量使用版本管理程式 (例如 Node Version Manager 或 nvm) 來安裝 Node。 版本管理程式可減少管理不同版本 Node.js的複雜性。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

……或 wget （只需要一個，但不需要兩者；使用系統上可用的任何一個）：

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

或者，對於 Windows，您可以使用 適用於 Windows 的 nvm以及連結中的安裝程式和原始程式碼。

使用 nvm，安裝 Node。

nvm install v6.17.1

無論您在電腦上安裝 Node.js 及 npm (隨附於 Node) 之後使用何種方法，祝賀您工作順利開始!

安裝 Git

您可能已經熟悉 Git，因為它是最廣泛使用的原始碼版本化系統。 稍後在IBM Cloud平台中建立持續部署 (CD) 工具鏈時，您將使用Git進行持續交付和部署。 如果您沒有GitHub帳戶，請在 GitHub 網站上建立一個免費的公開個人帳戶；否則，請隨意使用您可能擁有的任何其他帳戶登入。

您需要產生 SSH 金鑰並上傳至 GitHub 設定檔，才能從指令行安全存取 GitHub。 不過，這樣做現在提供良好的作法，因為您稍後會針對用於 IBM Cloud Platform 的 GitHub 實例重複步驟。

現在，請下載 GitHub 桌面，並執行安裝程式。 當安裝程式完成時，請使用您的帳戶登入 GitHub。

輸入儲存庫的任何確定的名稱和電子郵件 (公開顯示)。 應用程式鏈結至您的帳戶之後，可能會要求您透過線上 GitHub 帳戶驗證應用程式連線。

將應用程式部署至 IBM Cloud Platform。

若要使用您對 IBM Cloud Platform 的變更來取得入門範本應用程式，請重複您先前執行的相同步驟，以使用 Developer Tools 來部署它。

1. 如果您尚未登錄，或已重新啟動或登出，請使用 login 指令登入IBM Cloud平台。

   ibmcloud login
   

2. 使用 api 指令來設定地區的 API 端點。

   ibmcloud api cloud.ibm.com
   

3. 使用建置命令建置應用程式以交付該應用程式（如範例所示）。

   ibmcloud dev build
   

   1. 繼續並在本端測試應用程式。 這可讓您使用 run 指令在本端執行相同的程式碼。

   ibmcloud dev run
   

4. 使用 deploy 指令將應用程式部署至 IBM Cloud Platform。

   ibmcloud dev deploy
   

   該程式碼顯示了本範例中用於建置、測試和部署初始 Web 應用程式的命令序列。

   ibmcloud login --sso
   ibmcloud api cloud.ibm.com
   ibmcloud target --cf
   ibmcloud dev enable
   ibmcloud dev build
   ibmcloud dev run
   ibmcloud dev deploy
   

   當程序完成時，IBM Cloud 平台會報告已上傳、順利部署並啟動應用程式。 如果您也登入了IBM Cloud平台 Web 控制台，您也會收到應用程式狀態的通知。 但是，最重要的是，您可以使用瀏覽器來造訪 IBM Cloud Platform 所報告的應用程式 URL，或從 Web 主控台按一下「檢視應用程式」按鈕，來驗證已部署該應用程式。

   測試應用程式。 建立時部署至下面所示的入門範本應用程式的預設應用程式範本的可見變更，證明已成功將應用程式部署至 IBM Cloud Platform。

   

建立 Git 分支

現在，您需要為本端開發環境建立分支，以用於「IBM Cloud Platform Delivery Pipeline 建置階段」：

1. 如果使用GitHub Desktop，請點選分支圖示；系統會提示您輸入分支的名稱。 此範例使用 local-dev 作為名稱。

   

2. 建立分支後，GitHub會將 Local-dev 分支上的本機檔案與預設分支上的儲存庫中的檔案進行比較，並報告「無本機變更」。 您現在可以按一下「發佈」，將您在本端儲存庫上建立的分支新增至 GitHub 儲存庫（如圖 5 所示）。

   

現在，Local-dev 分支已發佈到工具鏈中的GitHub存儲庫，只要您將提交推送到，就會觸發IBM Cloud平台Delivery Pipeline的構建階段，然後是部署階段它。 無需從 CLI 部署應用程序，因為部署已直接整合到您的工作流程中。

設定您的儲存憑證

您需要配置 Web 應用程式的 Object Storage 認證，以及它將儲存及擷取影像的「儲存區」。 您將建立的 API 金鑰需要Object Storage HMAC 憑證，如您的 服務憑證 所定義。 您可能會認識術語 access_key_id 和 secret_access_key，因為您可能擁有AWS帳戶，並使用已包含 aws_access_key_id 和 aws_secret_access_key 條目的憑證檔案。

在您已完成建立 API 金鑰、下載並複製 HMAC 認證之後，請完成下列步驟：

1. 在本端開發環境上，將認證放置在 Windows 路徑 %USERPROFILE%\\.aws\\credentials 中。 對於 Mac/Linux 使用者，認證應該進入 ~/.aws/credentials)。 此範例顯示了典型憑證檔案的內容。

   [default]
   aws_access_key_id = {access_key_id}
   aws_secret_access_key = {secret_access_key}
   

2. 在IBM Cloud平台上使用 CLI 命令建立的應用程式的網頁中，登入IBM Cloud平台，將所需的憑證定義為每個開發最佳實踐的環境變量，然後選擇您的應用程式 webapplication。 在選項卡中，按一下運行時。

3. 在“運行時”視窗中，按一下頁面開頭的“環境變數”，然後捲動到“使用者定義”部分，您可以在其中新增變數。

4. 新增兩個變數：一個變數的值為 access_key_id 的值，使用 AWS_ACCESS_KEY_ID 作為金鑰名稱，另一個變數的值為您的秘密存取金鑰的值，名稱為 AWS_SECRET_ACCESS_KEY。 在 Object Storage Platform 上執行時，這些變數及其個別值是應用程式用來鑑別 IBM Cloud 實例的內容（請參閱圖 6）。 當您完成項目時，請按一下「儲存」，IBM Cloud Platform 將會自動重新啟動應用程式。

   

   定義的執行時間環境變數

接下來，在服務實例的「Object Storage 入口網站」上，新增儲存區以包含影像。 此場景使用名為 web-images 的儲存桶。

設計應用程式

這是使用者應該能夠使用簡單 Image Gallery Web 應用程式執行的兩個主要作業：

• 將影像從 Web 瀏覽器上傳至 Object Storage 儲存區。
• 在 Web 瀏覽器中檢視 Object Storage 儲存區中的影像。

後續步驟著重在如何完成這兩個示範功能，而不是建置完整開發的正式作業等級應用程式。 部署本指導教學並讓它公開並執行，表示任何找到此應用程式的人都可以執行相同的動作：將檔案上傳至 IBM Cloud Object Storage 儲存區，並檢視其瀏覽器中已存在的所有 JPEG 影像。

開發應用程式

在 package.json 檔案的腳本物件內，您可以看到「start」是如何定義的。 IBM Cloud Platform 使用此檔案來告知節點在每次應用程式啟動時執行 app.js。 另外，在本地測試應用程式時使用它。 查看主應用程式文件，該文件名稱為 app.js。 這是您在使用 npm start 命令（或 nodemon ）啟動應用程式時告訴Node.js首先處理的程式碼。

{
    "scripts": {
      "start": "node app.js"
    }
}

我們的 app.js 檔案使用節點來載入開始使用所需的模組。 Express 架構會將應用程式建立為單態，簡稱為 app。 此範例結束（暫時省略大部分程式碼）告訴應用程式偵聽指派的連接埠和環境屬性，預設為 3000。 當成功啟動時，它會在控制台上列印一條帶有伺服器 URL 的訊息。

var express = require('express');
var cfenv = require('cfenv');
var bodyParser = require('body-parser');
var app = express();
//...

// start server on the specified port and binding host
var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("To view your app, open this link in your browser: http://localhost:" + port);
});
//...

讓我們看看如何定義路徑和視圖。 第一行程式碼告訴 Express 框架使用公共目錄來提供靜態文件，其中包括您使用的任何靜態圖像和樣式表。 接下來的幾行告訴應用程式在 src/views 目錄中哪裡可以找到視圖的模板，並將視圖引擎設定為 EJS。 此外，該框架使用 body-parser 中間件將傳入請求資料以 JSON 形式公開給應用程式。 在範例的最後幾行中，express 應用程式透過呈現 index.ejs 視圖範本來回應所有傳入應用程式 URL 的 GET 請求。

//...
// serve the files out of ./public as your main files
app.use(express.static('public'));
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use(bodyParser.json());

var title = 'COS Image Gallery Web Application';
// Serve index.ejs
app.get('/', function (req, res) {
  res.render('index', {status: '', title: title});
});

//...

下圖顯示呈現並傳送至瀏覽器的索引視圖範本。 如果您是使用，nodemon 您可能已注意到您的瀏覽器在儲存變更時已重新整理。

我們的視圖範本會在 <head>...</head>; 標籤之間共用 HTML 程式碼，因此您將它放在個別的併入範本中。 此範本 ( head-inc.ejs ) 包含第 1 行頁面標題的 scriptlet（ JavaScript變數的綁定）。 title 變數在 app.js 中設置，並在下面的行中作為視圖模板的資料傳入。 否則，您只是使用一些 CDN 位址來拉入 Bootstrap CSS、Bootstrap JavaScript 和 JQuery。 最後，從 pubic/stylesheets 目錄新增自訂靜態 styles.css 檔案。

<title><%=title%></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">
</script>

<link rel="stylesheet" href="stylesheets/style.css">

索引視圖的主體包含引導程式樣式的導覽選項卡，以及基本佈局中的上傳表單，該佈局由引導程式中包含的 CSS 樣式提供。

請考慮您的應用程式的這兩個規範：

• 在第 24 行將表單方法設為 POST，並將表單資料編碼類型設為 multipart/form-data。 對於表單操作，將表單中的資料傳送到應用程式的應用程式路由「/」。 稍後，在路由器邏輯中進行額外的工作以處理對該路由的 POST 請求。

• 向使用者顯示有關嘗試上傳文件的狀態的回饋。 此回饋透過名為「status」的變數傳遞到您的視圖，並顯示在上傳表單之後。

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="/">Home</a></li>
    <li role="presentation"><a href="/gallery">Gallery</a></li>
</ul>
<div class="container">
    <h2>Upload Image to IBM Cloud Object Storage</h2>
    <div class="row">
        <div class="col-md-12">
            <div class="container" style="margin-top: 20px;">
                <div class="row">

                    <div class="col-lg-8 col-md-8 well">

                        <p class="wellText">Upload your JPG image file here</p>

                        <form method="post" enctype="multipart/form-data" action="/">
                            <p><input class="wellText" type="file" size="100px" name="img-file" /></p>
                            <br/>
                            <p><input class="btn btn-danger" type="submit" value="Upload" /></p>
                        </form>

                        <br/>
                        <span class="notice"><%=status%></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

讓我們花點時間回到 app.js。 此範例設定 Express 路由來處理向您的應用程式發出的額外請求。 這些路由方法的程式碼位於專案的 ./src/routes 目錄下的兩個檔案：

• imageUploadRoutes.js：此檔案處理使用者選擇圖像並點擊上傳時發生的情況。

• galleryRoutes.js：當使用者按一下「圖庫」標籤要求 imageGallery 視圖時，此檔案處理請求。

//...
var imageUploadRoutes = require('./src/routes/imageUploadRoutes')(title);
var galleryRouter = require('./src/routes/galleryRoutes')(title);

app.use('/gallery', galleryRouter);
app.use('/', imageUploadRoutes);

//...

影像上傳

請參閱 imageUploadRoutes.js 中的程式碼。 您必須建立一個新的快速路由器實例，並在開始時將其命名為 imageUploadRoutes。 稍後，建立一個傳回 imageUploadRoutes 的函數，並將其指派給名為 router 變數。 完成後，必須將該函數匯出為模組，以便框架和 app.js 中的主程式碼可以存取它。 將路由邏輯與上傳邏輯分開需要一個名為 galleryController.js 的控制器檔案。 由於該邏輯專用於處理傳入請求並提供適當的回應，因此將該邏輯放入該函數中並將其保存在 ./src/controllers 目錄中。

Express 框架中的 Router 實例是您的 imageUploadRoutes 設計的地方，用於在使用 HTTP POST 方法時路由根應用程式路由（“/”）的請求。 在 imageUploadRoutes 的 post 方法內，使用 multer 和 multer-s3 模組中的中間件，該模組由 galleryController 公開為 upload。 中間件從上傳表單 POST 取得資料和文件，對其進行處理，然後執行回呼函數。 在回調函數中，檢查您是否獲得了 HTTP 狀態代碼 200，並且您的請求對像中至少有一個檔案要上傳。 根據這些條件，在 status 變數中設定回饋，並使用新狀態呈現索引視圖範本。

var express = require('express');
var imageUploadRoutes = express.Router();
var status = '';

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    imageUploadRoutes.route('/')
    	.post(
    		galleryController.upload.array('img-file', 1), function (req, res, next) {
                if (res.statusCode === 200 && req.files.length > 0) {
                    status = 'uploaded file successfully';
                }
                else {
                    status = 'upload failed';
                }
                res.render('index', {status: status, title: title});
            });

    return imageUploadRoutes;
};

module.exports = router;

相比之下，galleryRouter 的程式碼就是一個簡單的模型。 遵循與 imageUploadRouter 相同的模式，並在函數的第一行要求 galleryController，然後設定您的路線。 主要區別在於，您路由 HTTP GET 請求而不是 POST，並發送 getGalleryImages 回應中的所有輸出，該輸出由範例最後一行的 galleryController 公開。

var express = require('express');
var galleryRouter = express.Router();

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    galleryRouter.route('/')
        .get(galleryController.getGalleryImages);

    return galleryRouter;
};
module.exports = router;

接下來，請查看展示區的控制器。

請注意如何設定 multer 上傳，這會截斷您目前忽略的部分程式碼。 您需要模組 ibm-cos-sdk、multer 和 multer-s3。 此程式碼顯示如何配置指向 Object Storage 伺服器端點的 S3 物件。 為了簡單起見，您靜態設定端點位址、區域和儲存桶等值，但可以輕鬆地從環境變數或 JSON 設定檔中引用它們。

透過建立以 storage 作為其唯一內容的新 multer 實例，在 imageUploadRouter 中定義 upload。 此屬性告訴 multer 將檔案從 multipart/form-data 傳送到哪裡。 由於IBM Cloud平台使用S3 API 的實現，因此將儲存設定為 s3-multer 物件。 此 s3-multer 物件包含指派給 s3 物件的 s3 內容。 還有一個指派給 myBucket 變數的 bucket 內容，該變數會獲指派值 web-images。 s3-multer 物件現在擁有在從上傳表單接收資料時將檔案上傳到您的Object Storage儲存桶所需的所有資料。 已上傳物件的名稱 (或索引鍵) 是原始檔名。

請使用時間戳記作為檔名的一部分，以維護檔名唯一性。

var galleryController = function(title) {

    var aws = require('ibm-cos-sdk');
    var multer = require('multer');
    var multerS3 = require('multer-s3');

    var ep = new aws.Endpoint('s3.us-south.cloud-object-storage.appdomain.cloud');
    var s3 = new aws.S3({endpoint: ep, region: 'us-south-1'});
    var myBucket = 'web-images';

    var upload = multer({
        storage: multerS3({
            s3: s3,
            bucket: myBucket,
            acl: 'public-read',
            metadata: function (req, file, cb) {
                cb(null, {fieldName: file.fieldname});
            },
            key: function (req, file, cb) {
                console.log(file);
                cb(null, file.originalname);
            }
        })
    });

    var getGalleryImages = function (req, res) { /* ... shown below ... */ };

    return {
        getGalleryImages: getGalleryImages,
        upload: upload
    };
};

module.exports = galleryController;

若為本端測試，有用的作業是將檔案物件列印至主控台 console.log(file)。 對上傳表單執行本機測試並顯示檔案的控制台日誌的輸出。

{ fieldname: 'img-file',
originalname: 'Chrysanthemum.jpg',
encoding: '7bit',
mimetype: 'image/jpeg' }

您回呼的意見在測試時宣告應用程式已「順利上傳檔案」。

影像擷取及顯示

請記住，在 app.js 中，代碼行 app.use('/gallery', galleryRouter); 告訴 Express 框架在請求 /gallery 路由時使用該路由器。 該路由器使用 galleryController.js，定義 getGalleryImages 函數，您先前已看到其簽章。 使用您為圖像上傳函數設定的相同 s3 對象，呼叫名為 listObjectsV2 的函數。 此函數傳回定義儲存桶中每個物件的索引資料。 要在 HTML 中顯示圖像，您需要為 web-images 儲存桶中的每個 JPEG 圖像提供一個圖像 URL，以便在視圖模板中顯示。 包含 listObjectsV2 傳回的資料物件的閉包包含有關儲存桶中每個物件的元資料。

程式碼循環遍歷 bucketContents 搜尋以“.jpg”結尾的任何物件鍵，並建立一個參數以傳遞給S3 getSignedUrl 函數。 當您提供物件的儲存桶名稱和金鑰時，此函數會傳回任何物件的簽章 URL。 在回呼函數中，將每個 URL 保存在陣列中，並將其作為名為 imageUrls 屬性的值傳遞給HTTP Server回應方法 res.render。

//...

    var getGalleryImages = function (req, res) {
        var params = {Bucket: myBucket};
        var imageUrlList = [];

        s3.listObjectsV2(params, function (err, data) {
            if (data) {
                var bucketContents = data.Contents;
                for (var i = 0; i < bucketContents.length; i++) {
                    if (bucketContents[i].Key.search(/.jpg/i) > -1) {
                        var urlParams = {Bucket: myBucket, Key: bucketContents[i].Key};
                        s3.getSignedUrl('getObject', urlParams, function (err, url) {
                            imageUrlList.push(url);
                        });
                    }
                }
            }
            res.render('galleryView', {
                title: title,
                imageUrls: imageUrlList
            });
        });
    };

//...

最後一個程式碼範例顯示 galleryView 範本的主體，以及顯示影像所需的程式碼。 從 res.render() 方法取得 imageUrls 陣列，並反覆運算一對巢狀 <div>...</div> 標籤。 每一個都會在要求 /gallery 路徑時針對映像檔傳送 GET 要求。

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="/">Home</a></li>
        <li role="presentation" class="active"><a href="/gallery">Gallery</a></li>
    </ul>
    <div class="container">
        <h2>IBM COS Image Gallery</h2>

        <div class="row">
            <% for (var i=0; i < imageUrls.length; i++) { %>
                <div class="col-md-4">
                    <div class="thumbnail">
                            <img src="<%=imageUrls[i]%>" alt="Lights" style="width:100%">
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</body>

</html>

從 http://localhost:3000/gallery 本端測試應用程式，並查看您的影像。

確定至 Git

現在應用程式的基本功能已經開始運作，請將程式碼提交到本機儲存庫，然後將其推送到GitHub。 使用GitHub Desktop，按一下 Changes（請參閱圖 11），在 Summary 欄位中鍵入變更摘要，然後按一下 Commit to Local-dev。

當您按一下 同步時，您的確定會傳送至遠端 local-dev 分支。 此動作會在 Delivery Pipeline中啟動「建置及部署階段」。