使用命令行

首先，打开有经验的开发者都熟悉，并且新手也能轻松上手的工具：命令行。 对于许多用户，图形用户界面 (GUI) 将计算机的命令行界面降级为二级状态。 但是现在，是时候将其带回来了 (尽管 GUI 不会很快消失，尤其是当您需要浏览 Web 以下载命令行工具集的指示信息时)。

打开 shell 并创建目录。 将您自己的参考目录更改为您创建的新目录。 创建后，您的应用程序将拥有自己的子目录，其中包含启动和运行所需的启动代码和配置。

离开命令行并返回到浏览器，以便您可以遵循指示信息在链接处安装 IBM Cloud Platform 开发者工具。 Developer Tools为构建和部署云应用程序提供了可扩展和可重复的方法。

安装 Docker

使用容器 (例如 Docker) 可加速开发，简化测试并支持自动化部署。 容器是一种轻量级结构，它不需要操作系统，只需要你的代码和从依赖关系到设置的所有配置。

Docker 作为 Developer Tools的一部分进行安装，您需要它。 其工作主要在用于构建新应用程序的例程中的后台进行。 Docker 必须处于运行中，构建命令才会有效。 在 "Docker中枢在线创建 "Docker账户，运行 "Docker应用程序并登录。

安装 Node.js

您构建的应用程序使用 Node.JS作为服务器端引擎来运行此网络应用程序的JavaScript代码。 要使用Node包管理器（npm）管理应用程序的依赖关系，必须在本地安装Node。 此外，Node 的本地安装简化了测试，加快了开发速度。

在开始之前，可以考虑使用版本管理器 (例如，Node 版本管理器或 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，因为它是最广泛使用的源代码版本控制系统。 之后，当您在“IBM Cloud平台中创建用于持续交付和部署的持续部署（CD）工具链时，就会使用”Git。 如果您没有GitHub账户，请在 GitHub 网站上创建一个免费的公共个人账户；否则，请使用您可能拥有的任何其他账户登录。

您需要生成 SSH 密钥并将其上载到 GitHub 概要文件，以便从命令行安全地访问 GitHub。 但是，现在执行此操作提供了良好的实践，因为您稍后将对用于 IBM Cloud Platform 的 GitHub 实例重复这些步骤。

现在，下载 GitHub Desktop 并运行安装程序。 安装程序完成后，使用您的帐户登录到 GitHub。

输入对存储库的任何落实的名称和电子邮件 (这将公开显示)。 将应用程序链接到您的帐户后，可能会要求您通过 GitHub 帐户在线验证应用程序连接。

将应用程序部署到 IBM Cloud Platform。

要获取具有 IBM Cloud Platform 更改的入门模板应用程序，请通过重复先前执行的相同步骤，使用 Developer Tools 来部署该应用程序。

1. 如果尚未登录，或已重启或注销，请使用IBM Cloud平台。使用 "login 命令登录平台。

   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
   

   代码显示了本示例中用于构建、测试和部署初始网络应用程序的命令序列。

   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平台网络控制台，您也会在那里收到应用程序状态的通知。 但是，最重要的是，您可以通过使用浏览器访问 IBM Cloud Platform 报告的应用程序 URL，或者在 Web 控制台中通过单击“查看应用程序”按钮，验证应用程序是否已部署。

   测试应用程序。 您可以看到创建时部署的缺省应用程序模板更改为如下所示的入门模板应用程序，这证明了已将应用程序成功部署到 IBM Cloud Platform。

   

创建 Git 分支

现在，需要为本地开发环境创建分支，以用于 IBM Cloud Platform Delivery Pipeline 的构建阶段：

1. 如果使用GitHub桌面，请单击分支图标；系统会提示你输入分支名称。 本例使用 "local-dev 作为名称。

   

2. 创建分支后，GitHub会将 Local-dev 分支上的本地文件与默认分支仓库中的文件进行比较，并报告“无本地变更”。 现在，可以单击“发布”以将在本地存储库上创建的该分支添加到 GitHub 存储库（如图 5 所示）。

   

现在，Local-dev 分支已发布到工具链中的GitHub代码库，您的IBM Cloud平台交付管道的构建阶段将被触发，随后您将随时推送提交到部署阶段。平台Delivery Pipeline后，只要推送提交，就会触发部署阶段。 无需通过 CLI 部署应用程序，因为部署已直接集成到工作流程中。

设置存储凭证

您需要为 Web 应用程序配置 Object Storage 凭证，以及将在其中存储和检索图像的“存储区”。 您将创建的 API 密钥需要“Object StorageHMAC 凭据，该凭据由您的”服务证书 定义。 您可能认识“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 命令创建的应用程序的网页中平台上使用 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 的数据桶。

设计应用程序

下面是用户应该能够使用简单图像库 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）包含一个 scriptlet（JavaScript变量的绑定），用于第 1 行的页面标题。 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">

索引视图的主体包含 bootstrap 风格的导航标签和上传表单，其基本布局由 bootstrap 附带的 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: 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 中的代码。 您必须创建一个新的 express 路由器实例，并在开始时将其命名为 "imageUploadRoutes。 之后，创建一个返回“imageUploadRoutes 的函数，并将其赋值给一个名为”router 的变量。 完成后，该函数必须作为模块导出，以便框架和 "app.js 中的主代码可以访问。 要将路由逻辑与上传逻辑分开，需要一个名为 "galleryController.js 的控制器文件。 由于该逻辑专门用于处理传入的请求并提供适当的响应，因此应将该逻辑放在该函数中，并将其保存在 "./src/controllers 目录下。

The instance of the Router from the Express framework is where your imageUploadRoutes is designed to route requests for the root app route ("/") when the HTTP POST method is used. Inside the post method of your imageUploadRoutes, use middleware from the multer and multer-s3 modules that is exposed by the galleryController as 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平台使用S3API 的实现，因此请将存储设置为 "s3-multer 对象。 此 s3-multer 对象包含分配给 s3 对象的 s3 属性。 还有一个 bucket 属性被分配给 myBucket 变量，而该变量又被分配值 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' }

来自回调的反馈声明应用程序在测试时“已成功上载文件”。

图像检索和显示

Remember back in app.js, the line of code app.use('/gallery', galleryRouter); tells the express framework to use that router when the /gallery route is requested. 该路由器使用 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桌面，单击“更改”（见图 11），在“摘要”字段中输入更改摘要，然后单击“提交到本地-dev”。

单击 同步时，您的落实将发送到远程 local-dev 分支。 此操作将在 Delivery Pipeline中启动构建和部署阶段。