Web アプリケーションの開発

コマンド行の使用

まずは、経験豊富な開発者にとっては使い慣れたツールであり、開発初心者にとっては新たな常用ツールとなるコマンド・ラインを開きましょう。 多くの場合、グラフィック・ユーザー・インターフェース (GUI) は、コンピューターのコマンド・ライン・インターフェースを第 2 クラスの状況に解放します。 しかし、現時点では、これを元に戻す必要があります (ただし、コマンド・ライン・ツール・セットの説明をダウンロードするために Web を参照する必要がある場合は、GUI はすぐには使用できません)。

シェルを開き、ディレクトリーを作成します。 自分のリファレンス・ディレクトリを、作成した新しいディレクトリに変更する。 作成されたアプリケーションは、立ち上げと実行に必要なスターターコードとコンフィギュレーションを含む独自のサブディレクトリを持ちます。

コマンド・ラインを終了してブラウザーに戻り、リンクにある IBM Cloud Platform 開発者ツール をインストールする手順に従います。 Developer Toolsは、クラウド・アプリケーションの構築とデプロイに、拡張性と再現性のあるアプローチを提供します。

Docker のインストール

Dockerなどのコンテナーを使用すると、開発が迅速化され、テストが容易になり、自動デプロイメントがサポートされます。 コンテナとは、オペレーティング・システムを必要とせず、コードと、依存関係から設定まですべてのコンフィギュレーションだけを必要とする軽量な構造だ。

Docker は、 Developer Toolsの一部としてインストールされ、必要になります。 その作業は主に、新しいアプリケーションをスキャフォールドするルーチン内のバックグラウンドで行われます。 ビルド・コマンドが機能するためには、Docker が実行中でなければなりません。 DockerhubからオンラインでDockerアカウントを作成し、Dockerアプリを実行してサインインする。

Node.js のインストール

あなたがビルドするアプリは、このWebアプリケーションのJavaScriptコードを実行するサーバー側エンジンとして Node.JSを使用しています。 NodePackage Manager (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の場合は、リンク先のインストーラーとソースコードで'nvm Windows用を使うことができる。

nvm を使用して、 Nodeをインストールします。

nvm install v6.17.1

Node.js および npm ( Nodeに含まれています) をコンピューターにインストールした後でどちらの方法を使用しても、ジョブの開始をお祝いします。

Git のインストール

Gitは、最も広く使用されているソース・コード・バージョン管理システムであるため、既に熟知していると思います。 Gitを使うのは、IBM Cloudプラットフォームで継続的デプロイメント（CD）ツールチェインを作成するときです。プラットフォームで継続的デリバリーとデプロイを行う。 GitHubのアカウントをお持ちでない方は、GitHub のウェブサイトで無料の公開個人アカウントを作成してください。

コマンド・ラインから GitHub にセキュアにアクセスするには、SSH 鍵を生成して GitHub プロファイル にアップロードする必要があります。 ただし、これを行うと、後で IBM Cloud Platform に使用される GitHub のインスタンスに対してステップを繰り返すことになるため、適切な方法が用意されています。

ここでは、 GitHub Desktop をダウンロードし、インストーラーを実行します。 インストーラーが終了したら、アカウントを使用して GitHub にログインします。

リポジトリーへのコミットの名前と E メールを入力します (これはパブリックに表示されます)。 アプリケーションがアカウントにリンクされると、 GitHub アカウントを介してオンラインでアプリケーション接続を検証するように求められる場合があります。

IBM Cloud プラットフォームへのアプリのデプロイ

IBM Cloud Platform に対する変更をスターター・アプリに反映するには、前に実行したのと同じステップを繰り返して、 Developer Tools を使用してスターター・アプリをデプロイします。

1. まだの場合、または再起動したりログアウトした場合は、IBM Cloudにログインしてください。login コマンドを使用してプラットフォームにログインします。

   ibmcloud login
   

2. api コマンドを使用して、地域の API エンドポイントを設定します。

   ibmcloud api cloud.ibm.com
   

3. そのアプリを配信するために、buildコマンドでアプリをビルドする（例のように）。

   ibmcloud dev build
   

   1. アプリケーションをローカルでテストしてみましょう。 これにより、 run コマンドを使用して同じコードをローカルで実行できます。

   ibmcloud dev run
   

4. deploy コマンドを使用して、アプリを IBM Cloud Platform にデプロイします。

   ibmcloud dev deploy
   

   コードは、この例で初期ウェブ・アプリケーションのビルド、テスト、デプロイに使用される一連のコマンドを示しています。

   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 CloudPlatformウェブコンソールにもログインしている場合、アプリの状態が通知されます。Platform ウェブコンソールにもログインしている場合、アプリのステータスが通知されます。 しかし、最も重要なことは、IBM Cloud プラットフォームによって報告されたアプリの URL にブラウザーでアクセスするか、 Web コンソールから「アプリの表示」ボタンをクリックして、アプリがデプロイされたことを確認できるということです。

   アプリをテストします。 作成時にデプロイされたデフォルトのアプリ・テンプレートから、以下に示すスターター・アプリへ変化していることが見てわかれば、IBM Cloud プラットフォームへのアプリのデプロイが成功したことを示しています。

   

Git ブランチの作成

ここで、IBM Cloud プラットフォーム Delivery Pipeline のビルド・ステージに使用するローカル開発環境のブランチを作成する必要があります。

1. GitHubDesktop を使っている場合は、ブランチのアイコンをクリックします。ブランチの名前を入力するプロンプトが表示されます。 この例では「local-dev 名前として使っている。

   

   を作成する。

2. ブランチを作成すると、GitHubはLocal-dev ブランチ上のローカルファイルとデフォルトブランチ上のリポジトリにあるファイルを比較し、No local changes (ローカルの変更なし) と報告します。 これで、(図 5 に示されているように) 「Publish」をクリックして、ローカル・リポジトリーに作成したブランチを GitHub リポジトリーに追加できます。

   

   に git ブランチを公開します。

Local-devブランチがツールチェインのGitHubリポジトリに公開されたので、IBM Cloudのビルドステージが開始されます。PlatformDelivery Pipelineは、コミットをプッシュするといつでもビルドステージに続いてデプロイステージが開始されます。 デプロイはワークフローに直接統合されているため、CLIからアプリをデプロイする必要はありません。

ストレージ認証情報の設定

Web アプリケーションの Object Storage 資格情報と、イメージの保管および取得を行う「バケット」を構成する必要があります。 The API key that you will create will need Object Storage HMAC credentials, as defined by your サービス資格. 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. の CLI コマンドを使用して作成したアプリケーションのウェブページで、IBM Cloudプラットフォームにログインします。IBM Cloudプラットフォームにログインして、開発のベストプラクティスに従って必要な認証情報を環境変数として定義します。にログインし、アプリ'webapplication を選択します。 タブの中から Runtime をクリックする。

3. Runtimeウィンドウで、ページの最初にあるEnvironment variablesをクリックし、User-definedセクションまでスクロールすると、変数を追加することができます。

4. ひとつは「access_key_id 値で、キーの名前は「AWS_ACCESS_KEY_ID」とし、もうひとつはシークレットアクセスキーの値で、名前は「AWS_SECRET_ACCESS_KEY する。 これらの変数とそれぞれの値は、Object Storage プラットフォームでの実行時に、アプリが IBM Cloud インスタンスに対する認証に使用するものです (図 6 を参照)。 項目の追加が終わった後に「保存」をクリックすると、IBM Cloud プラットフォームが自動的にアプリを再始動します。

   

次に、サービス・インスタンスの Object Storage ポータルで、イメージを格納するバケットを追加します。 このシナリオでは、'web-images 名前のバケツを使います。

アプリの設計

以下は、シンプルなイメージ・ギャラリー Web アプリケーションでユーザーが実行できなければならない 2 つのメインタスクです。

• Web ブラウザーから Object Storage バケットにイメージをアップロードする。
• Object Storage バケット内のイメージを Web ブラウザーで表示する。

次のステップでは、完全に開発された実動グレードのアプリを構築するのではなく、これら 2 つのデモンストレーション機能を完成させる方法に焦点を当てます。 このチュートリアルをデプロイし、公開した状態で実行すると、このアプリを見つけたあらゆるユーザーが、IBM Cloud Object Storage バケットにファイルをアップロードしたり、既にバケット内に存在する JPEG イメージをブラウザーで表示したりという、同じアクションを実行できることになります。

アプリの開発

package.json ファイルのスクリプト・オブジェクトの中に、"start "の定義がある。 このファイルは、アプリが開始されるたびに app.js を実行するようノードに指示するために IBM Cloud プラットフォームが使用するものです。 また、アプリをローカルでテストする際にも使用する。 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アプリは、あなたのアプリのURLへのすべてのGETリクエストに応答し、「index.ejs ビューテンプレートをレンダリングする。

//...
// 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 を使用している場合は、変更を保存したときにブラウザーが最新表示されたことに気付くことがあります。

IBM のビュー・テンプレートは、 <head>...</head>; タグ間で HTML コードを共有するため、別個のインクルード・テンプレートに配置します。 このテンプレート（head-inc.ejs）には、1行目のページタイトルにスクリプトレット（JavaScript変数のバインディング）が含まれています。 title 変数は'app.js に設定され、その下の行でビューテンプレートのデータとして渡されます。 そうでなければ、単にCDNのアドレスを使って'Bootstrap CSS、'Bootstrap JavaScript、'JQuery を取り込んでいるだけだ。 最後に、カスタム静的 styles.css ファイルを pubic/stylesheets ディレクトリーから追加します。

<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スタイルによって提供される基本的なレイアウトのアップロードフォームが含まれます。

あなたのアプリについて、この2つの仕様を考えてみよう：

• 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 ディレクトリの下にある2つのファイルにあります：

• imageUploadRoutes.js: このファイルは、ユーザーが画像を選択し、アップロードをクリックしたときの処理を行います。 このファイルは、ユーザが画像を選択し、アップロードをクリックしたときの処理を行います。

• galleryRoutes.js: This file handles requests when the user clicks the Gallery tab to request the imageGallery view.

//...
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のインスタンスは、HTTPの'POST メソッドが使用されたときに、ルートアプリのルート("/")へのリクエストをルーティングするように'imageUploadRoutes 設計されています。 imageUploadRoutes の'post メソッド内で、'multer と'multer-s3 モジュールのミドルウェアを使用し、'galleryController が'upload として公開している。 ミドルウェアは、アップロードフォーム'POST からデータとファイルを受け取り、それを処理し、コールバック関数を実行する。 コールバック関数で、HTTPステータスコード'200 を取得し、アップロードするリクエストオブジェクトに少なくとも1つのファイルがあったことを確認する。 これらの条件に基づいて、'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 要求し、それからルートを設定する。 The main difference is that you are routing HTTP GET requests rather than POST, and sending all the output in the response from getGalleryImages, which is exposed by the galleryController on the last line of the example.

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 CloudPlatformは'S3APIの実装を使用しているので、storageを'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); のコード行が、'/gallery ルートが要求されたときにそのルーターを使うようにエクスプレスフレームワークに指示していることを思い出してほしい。 そのルーターは、 galleryController.js を使用して、 getGalleryImages 関数を定義します。この関数のシグニチャーは、以前に確認したものです。 画像アップロード関数に設定したのと同じ's3 オブジェクトを使って、'listObjectsV2 という名前の関数を呼び出す。 この関数は、バケツ内の各オブジェクトを定義するインデックスデータを返します。 HTML内に画像を表示するには、'web-images バケツにあるJPEG画像をビューテンプレートに表示するための画像URLが必要です。 listObjectsV2 が返すデータオブジェクトを持つクロージャには、バケツ内の各オブジェクトに関するメタデータが含まれています。

このコードでは、".jpg "で終わるオブジェクトキーを探して'bucketContents をループし、S3の'getSignedUrl 関数に渡すパラメータを作成する。 この関数は、オブジェクトのバケット名とキーを指定すると、そのオブジェクトの署名付きURLを返す。 コールバック関数で、各URLを配列に保存し、HTTP Serverのレスポンスメソッド「res.render 値として「imageUrls プロパティに渡す。

//...

    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にプッシュする。 GitHubDesktop を使って Changes をクリックし (図 11 を参照)、Summary フィールドに変更点の概要を入力して、Commit to Local-dev をクリックします。

「同期」 をクリックすると、コミットがリモート local-dev ブランチに送信されます。 このアクションにより、 Delivery Pipelineでビルド・ステージとデプロイ・ステージが開始されます。