Verwenden der Befehlszeile

Beginnen Sie mit dem Öffnen eines Tools, mit dem erfahrene Entwickler vertraut sind, und das der neue beste Freund aller sein wird, die gerade anfangen: Der Befehlszeile. Für viele hat die grafische Benutzerschnittstelle (GUI) die Befehlszeilenschnittstelle Ihres Computers in den Status der zweiten Klasse versetzt. Aber jetzt ist es an der Zeit, es wieder zu bringen (obwohl die GUI nicht bald verschwinden wird, besonders wenn Sie das Web durchsuchen müssen, um Anweisungen für das Befehlszeilen-Toolset herunterzuladen).

Öffnen Sie eine Shell und erstellen Sie ein Verzeichnis. Wechseln Sie Ihr eigenes Referenzverzeichnis in das neu erstellte Verzeichnis. Nach der Erstellung hat Ihre Anwendung ein eigenes Unterverzeichnis mit dem Startcode und der Konfiguration, die für den Betrieb erforderlich sind.

Verlassen Sie die Befehlszeile und kehren Sie zu Ihrem Browser zurück, damit Sie die Anweisungen zur Installation der IBM Cloud Platform-Entwicklertools unter dem Link befolgen können. Die Developer Tools bieten einen erweiterbaren und wiederholbaren Ansatz für die Erstellung und Bereitstellung von Cloud-Anwendungen.

Docker installieren

Die Verwendung von Containern wie Dockerbeschleunigt die Entwicklung und vereinfacht Tests und unterstützt die automatisierte Bereitstellung. Ein Container ist eine leichtgewichtige Struktur, die kein Betriebssystem benötigt, sondern nur Ihren Code und die Konfiguration für alles von Abhängigkeiten bis zu Einstellungen.

Docker wird als Teil von Developer Toolsinstalliert und Sie benötigen es. Seine Arbeit erfolgt vor allem im Hintergrund innerhalb von Routinen, die Ihre neue App Gerüste. Docker muss aktiv sein, damit die Erstellungsbefehle ausgeführt werden können. Erstellen Sie online ein Docker bei Docker Hub, führen Sie die Docker aus und melden Sie sich an.

Node.js installieren

Die von Ihnen erstellte Anwendung verwendet Node.JS als serverseitige Engine zur Ausführung des JavaScript für diese Webanwendung. Um den Node Package Manager (npm) zur Verwaltung der Abhängigkeiten Ihrer Anwendung zu verwenden, müssen Sie Node lokal installieren. Außerdem vereinfacht eine lokale Installation von Node das Testen und beschleunigt die Entwicklung.

Bevor Sie beginnen, können Sie einen Versionsmanager wie Node Version Manager oder nvm verwenden, um Nodezu installieren. Ein Versionsmanager verringert die Komplexität bei der Verwaltung verschiedener Versionen von Node.js.

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

...oder ' wget (nur eines ist notwendig, aber nicht beide; verwenden Sie das, was auf Ihrem System verfügbar ist):

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

Oder, für Windows, können Sie ' nvm für Windows mit Installationsprogrammen und Quellcode unter dem Link verwenden.

Installieren Sie Nodemithilfe von nvm.

nvm install v6.17.1

Unabhängig davon, welche Methode Sie nach der Installation von Node.js und npm (im Lieferumfang von Nodeenthalten) auf Ihrem Computer verwenden, gratulieren Sie zu einem gut gestarteten Job!

Git installieren

Sie sind wahrscheinlich bereits mit Gitvertraut, da es sich um das am häufigsten verwendete Versionssteuerungssystem für Quellcode handelt. Sie verwenden Git später, wenn Sie eine Continuous Deployment (CD) Toolchain in der IBM Cloud Plattform für die kontinuierliche Bereitstellung und das Deployment erstellen. Wenn Sie kein GitHub haben, erstellen Sie ein kostenloses öffentliches persönliches Konto auf der GitHub; andernfalls können Sie sich mit einem beliebigen anderen Konto anmelden.

Sie müssen SSH-Schlüssel generieren und in Ihr GitHub-Profil hochladen, um über die Befehlszeile sicheren Zugriff auf GitHub zu erhalten. Dies stellt jedoch jetzt ein bewährtes Verfahren dar, da Sie die Schritte für die Instanz von GitHub wiederholen, die später für IBM Cloud Platform verwendet wird.

Laden Sie zunächst GitHub Desktop herunter und führen Sie das Installationsprogramm aus. Melden Sie sich nach Abschluss des Installationsprogramms bei GitHub mit Ihrem Konto an.

Geben Sie einen Namen und eine E-Mail-Adresse (diese werden öffentlich angezeigt) für alle Festschreibungen in Ihrem Repository ein. Sobald die Anwendung mit Ihrem Konto verknüpft ist, werden Sie möglicherweise aufgefordert, die Anwendungsverbindung über Ihr GitHub-Konto online zu überprüfen.

App in IBM Cloud Platform bereitstellen

Um die Starter-App mit Ihren Änderungen an IBM Cloud Platform zu erhalten, stellen Sie sie mithilfe von Developer Tools bereit, indem Sie dieselben Schritte wiederholen, die Sie zuvor ausgeführt haben.

1. Wenn Sie das noch nicht getan haben, oder wenn Sie neu gestartet oder abgemeldet sind, melden Sie sich bei der IBM Cloud Plattform an, indem Sie den Befehl ' login verwenden.

   ibmcloud login
   

2. Legen Sie den API-Endpunkt für Ihre Region fest, indem Sie den Befehl api verwenden.

   ibmcloud api cloud.ibm.com
   

3. Erstellen Sie die Anwendung für die Bereitstellung dieser Anwendung mit dem Befehl build (wie im Beispiel).

   ibmcloud dev build
   

   1. Die Anwendung wird zunächst lokal getestet. Auf diese Weise können Sie denselben Code lokal mit dem Befehl run ausführen.

   ibmcloud dev run
   

4. Stellen Sie die App mit dem Befehl deploy in IBM Cloud Platform bereit.

   ibmcloud dev deploy
   

   Der Code zeigt die Abfolge der Befehle, die in diesem Beispiel zum Erstellen, Testen und Bereitstellen der ursprünglichen Webanwendung verwendet werden.

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

   Wenn der Prozess beendet ist, meldet IBM Cloud Platform, dass die App hochgeladen, erfolgreich bereitgestellt und gestartet wurde. Wenn Sie auch in der IBM Cloud Plattform-Webkonsole angemeldet sind, werden Sie auch dort über den Status Ihrer App informiert. Am wichtigsten ist jedoch, dass Sie die Bereitstellung der App durch das Besuchen der von IBM Cloud Platform gemeldeten App-URL in einem Browser oder durch Klicken auf die App-Schaltfläche in der Webkonsole überprüfen können.

   Testen Sie die App. Die sichtbare Änderung der Standardappvorlage, die bei der Erstellung der Starter-App bereitgestellt wurde, ist der Nachweis dafür, dass die Bereitstellung der App in IBM Cloud Platform erfolgreich war.

   

Git-Branch erstellen

Jetzt müssen Sie einen Zweig (Branch) für die lokale Entwicklungsumgebung erstellen, die Sie für die Build-Stage der Delivery Pipeline für IBM Cloud Platform verwenden.

1. Wenn Sie GitHub Desktop verwenden, klicken Sie auf das Symbol für die Verzweigung; Sie werden aufgefordert, einen Namen für die Verzweigung einzugeben. In diesem Beispiel wird " local-dev als Name verwendet.

   

2. Nachdem Sie den Zweig erstellt haben, vergleicht GitHub die lokalen Dateien im Local-dev-Zweig mit den Dateien im Repository im Standardzweig und meldet Keine lokalen Änderungen. Sie können auf 'Veröffentlichen' klicken, um den im lokalen Repository erstellten Zweig zum GitHub-Repository hinzuzufügen (wie in Abbildung 5 dargestellt).

   

Da der Local-dev-Zweig nun im GitHub in Ihrer Toolchain veröffentlicht ist, wird die Build-Phase Ihrer IBM Cloud Platform Delivery Pipeline ausgelöst, gefolgt von der Deployment-Phase, sobald Sie eine Übergabe an diese vornehmen. Die Bereitstellung der Anwendung über die Befehlszeile ist nicht erforderlich, da die Bereitstellung direkt in Ihren Arbeitsablauf integriert wurde.

Einrichten Ihrer Speicherzugangsdaten

Sie müssen die Object Storage-Berechtigungsnachweise für die Webanwendung konfigurieren und ein Bucket einrichten, in dem die Bilder gespeichert und abgerufen werden. Der API-Schlüssel, den Sie erstellen, benötigt Object Storage HMAC-Anmeldeinformationen, wie sie in Ihren Dienstanmeldeinformationen definiert sind. Die Begriffe " access_key_id und " secret_access_key sind Ihnen vielleicht bekannt, da Sie ein AWS haben und eine Anmeldedatei verwenden, die bereits die Einträge " aws_access_key_id und " aws_secret_access_key enthält.

Wenn Sie einen API-Schlüssel erstellt und heruntergeladen, und anschließend die HMAC-Berechtigungsnachweise kopiert haben, führen Sie die folgenden Schritte aus:

1. Geben Sie in der lokalen Entwicklungsumgebung die Berechtigungsnachweise im Windows-Pfad %USERPROFILE%\\.aws\\credentials an. Für Mac/Linux-Benutzer sollten die Berechtigungsnachweise in ~/.aws/credentials) angegeben werden. Das Beispiel zeigt den Inhalt einer typischen Credentials-Datei.

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

2. In der Webseite für die Anwendung, die Sie mit dem CLI-Befehl auf der IBM Cloud Plattform erstellt haben, definieren Sie Ihre erforderlichen Anmeldeinformationen als Umgebungsvariablen gemäß den Best Practices für die Entwicklung, indem Sie sich bei der IBM Cloud Plattform, und wählen Sie Ihre Anwendung ' webapplication. Klicken Sie in den Registerkarten auf Laufzeit.

3. Klicken Sie im Runtime-Fenster am Anfang der Seite auf Umgebungsvariablen und blättern Sie zum Abschnitt Benutzerdefiniert, in dem Sie die Variablen hinzufügen können.

4. Fügen Sie zwei Variablen hinzu: eine mit dem Wert Ihres " access_key_id, wobei " AWS_ACCESS_KEY_ID als Name des Schlüssels verwendet wird, und eine weitere mit dem Wert Ihres geheimen Zugangsschlüssels, die " AWS_SECRET_ACCESS_KEY heißt. Diese Variablen und ihren jeweiligen Werten werden von der App zum Authentifizieren bei der Object Storage-Instanz verwendet, wenn sie in IBM Cloud Platform ausgeführt wird (siehe Abbildung 6). Wenn Sie die Einträge fertiggestellt haben, klicken Sie auf 'Speichern'; die App wird automatisch erneut von IBM Cloud Platform gestartet.

   

Fügen Sie als nächsten Schritt im Object Storage-Portal für die Serviceinstanz ein Bucket hinzu, in dem die Bilder enthalten sind. In diesem Szenario wird der Bucket mit dem Namen " web-images verwendet.

App entwerfen

In einer einfachen Webanwendung für eine Bildergalerie muss ein Benutzer zwei Hauptaufgaben ausführen können:

• Bilder von einem Web-Browser in das Object Storage-Bucket hochladen
• Bilder im Object Storage-Bucket in einem Web-Browser anzeigen

In den nächsten Schritten liegt der Schwerpunkt darauf, diese beiden Demonstrationsfunktionen auszuführen und nicht darauf, eine vollständig entwickelte einsatzfähige App zu erstellen. Wenn dieses Lernprogramm bereitgestellt wird und zugänglich und aktiv bleibt, bedeutet dies, dass alle, die die App finden, dieselben Aktionen ausführen können: Dateien in das IBM Cloud Object Storage-Bucket hochladen und bereits im Bucket befindliche JPEG-Bilder anzeigen.

App entwickeln

In der Datei " package.json sehen Sie innerhalb des Skriptobjekts, wie "start" definiert ist. Mithilfe dieser Datei wird Node von IBM Cloud Platform bei jedem Start der App signalisiert, dass 'app.js' ausgeführt werden soll. Verwenden Sie es auch, wenn Sie die Anwendung lokal testen. Sehen Sie sich die Hauptanwendungsdatei mit dem Namen " app.js an. Dies ist der Code, den Sie Node.js beim Starten Ihrer Anwendung mit dem Befehl ' npm start (oder ' nodemon) als erstes verarbeiten lassen.

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

Die Datei app.js verwendet Knoten zum Laden von Modulen, die für den Einstieg erforderlich sind. Vom Express-Framework wird die App als ein Singleton mit dem Namen app erstellt. Das Beispiel endet damit, dass der App mitgeteilt wird, dass sie auf den zugewiesenen Port und eine Umgebungseigenschaft oder standardmäßig auf 3000 hören soll (wobei der Großteil des Codes weggelassen wird). Beim erfolgreichen Start wird eine Meldung mit der Server-URL auf der Konsole ausgegeben.

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);
});
//...

Sehen wir uns an, wie ein Pfad und Ansichten definiert werden. Die erste Codezeile weist das Express-Framework an, das öffentliche Verzeichnis zu verwenden, um Ihre statischen Dateien bereitzustellen, die alle statischen Bilder und Stylesheets enthalten, die Sie verwenden. Die folgenden Zeilen teilen der Anwendung mit, wo die Vorlagen für Ihre Ansichten im Verzeichnis " src/views zu finden sind, und stellen Ihre Ansichts-Engine auf EJS ein. Darüber hinaus verwendet das Framework die Body-Parser-Middleware, um eingehende Anfragedaten als JSON für die Anwendung bereitzustellen. In den letzten Zeilen des Beispiels reagiert die Express-Anwendung auf alle eingehenden GET-Anforderungen an Ihre Anwendungs-URL, indem sie die Ansichtsvorlage " index.ejs wiedergibt.

//...
// 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});
});

//...

In der folgenden Abbildung wird die Indexansichtsvorlage dargestellt, wenn sie wiedergegeben und an den Browser gesendet wird. Bei Verwendung von nodemon haben Sie möglicherweise festgestellt, dass Ihr Browser aktualisiert wurde, als Sie Ihre Änderungen gespeichert haben.

Unsere Ansichtsvorlagen nutzen HTML-Code zwischen den <head>...</head>; -Tags gemeinsam, sodass Sie ihn in einer separaten Include-Vorlage platziert haben. Diese Vorlage (head-inc.ejs) enthält ein Scriptlet (eine Bindung für eine JavaScript ) für den Seitentitel in Zeile 1. Die Variable " title wird in " app.js gesetzt und in der Zeile darunter als Daten für Ihre Ansichtsvorlage übergeben. Andernfalls verwenden Sie einfach einige CDN-Adressen, um " Bootstrap CSS, " Bootstrap JavaScript und " JQuery einzuholen. Fügen Sie schließlich eine angepasste statische Datei styles.css aus Ihrem Verzeichnis pubic/stylesheets hinzu.

<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">

Der Hauptteil der Indexansicht enthält Ihre Bootstrap-gestylten Navigationsregisterkarten und Ihr Upload-Formular in einem Grundlayout, das durch die in Bootstrap enthaltenen CSS-Stile vorgegeben ist.

Berücksichtigen Sie diese beiden Spezifikationen für Ihre Anwendung:

• Setzen Sie Ihre Formularmethode auf " POST und den Kodierungstyp der Formulardaten auf "multipart/form-data" in Zeile 24. Für die Formularaktion senden Sie die Daten von Ihrem Formular an die App an die App-Route "/". Später müssen Sie in Ihrer Routerlogik zusätzliche Arbeit leisten, um ' POST an diese Route zu bearbeiten.

• Anzeige einer Rückmeldung über den Status des versuchten Datei-Uploads an den Benutzer. Dieses Feedback wird in einer Variablen namens "status" an Ihre Ansicht übergeben und nach dem Hochladeformular angezeigt.

<!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>

Nehmen wir uns einen Moment Zeit, um zu app.js zurückzukehren. Das Beispiel richtet Express-Routen ein, um zusätzliche Anfragen an Ihre Anwendung zu bearbeiten. Der Code für diese Routing-Methoden befindet sich in zwei Dateien im Verzeichnis ' ./src/routes in Ihrem Projekt:

• imageUploadRoutes.js: Diese Datei regelt, was passiert, wenn der Benutzer ein Bild auswählt und auf Hochladen klickt.

• galleryRoutes.js: Diese Datei verarbeitet Anfragen, wenn der Benutzer auf die die Registerkarte Galerie klickt, um die Ansicht ' imageGallery aufzurufen.

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

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

//...

Bildupload

Siehe den Code aus imageUploadRoutes.js. Sie müssen eine Instanz eines neuen Express-Routers erstellen und ihn zu Beginn " imageUploadRoutes nennen. Erstellen Sie später eine Funktion, die " imageUploadRoutes zurückgibt, und weisen Sie sie einer Variablen namens " router zu. Nach der Fertigstellung muss die Funktion als Modul exportiert werden, damit sie für das Framework und Ihren Hauptcode in " app.js zugänglich ist. Um Ihre Routing-Logik von der Upload-Logik zu trennen, benötigen Sie eine Controller-Datei mit dem Namen " galleryController.js. Da diese Logik der Verarbeitung der eingehenden Anfrage und der Bereitstellung der entsprechenden Antwort gewidmet ist, legen Sie diese Logik in diese Funktion und speichern Sie sie im Verzeichnis " ./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. Verwenden Sie innerhalb der Methode " post Ihres " imageUploadRoutes die Middleware der Module " multer und " multer-s3, die von " galleryController als " upload dargestellt wird. Die Middleware übernimmt die Daten und die Datei aus Ihrem Upload-Formular " POST, verarbeitet sie und führt eine Callback-Funktion aus. Überprüfen Sie in der Callback-Funktion, ob Sie einen HTTP-Statuscode von " 200 erhalten und ob Sie mindestens eine Datei in Ihrem Anfrageobjekt hochgeladen haben. Legen Sie auf der Grundlage dieser Bedingungen die Rückmeldung in Ihrer " status fest und rendern Sie die Indexansicht-Vorlage mit dem neuen 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;

Im Vergleich dazu ist der Code für den " galleryRouter ein Muster an Einfachheit. Folgen Sie demselben Muster wie bei " imageUploadRouter und verlangen Sie " galleryController in der ersten Zeile der Funktion, und richten Sie dann Ihre Route ein. Der Hauptunterschied besteht darin, dass Sie HTTP-Anfragen mit " GET anstelle von " POST weiterleiten und die gesamte Ausgabe in der Antwort von " getGalleryImages senden, was durch " galleryController in der letzten Zeile des Beispiels deutlich wird.

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;

Betrachten Sie als Nächstes den Controller für die Galerie.

Beachten Sie, wie Sie den multer-Upload einrichten, der Code abschneidet, den Sie momentan ignorieren. Sie benötigen die Module ' ibm-cos-sdk, ' multer und ' multer-s3. Aus dem Code geht hervor, wie ein S3-Objekt konfiguriert werden muss, von dem auf einen Object Storage-Serverendpunkt verwiesen wird. Der Einfachheit halber legen Sie Werte wie die Endpunktadresse, die Region und den Bucket statisch fest, aber sie können leicht über eine Umgebungsvariable oder eine JSON-Konfigurationsdatei referenziert werden.

Definieren Sie upload in imageUploadRouter, indem Sie eine neue multer-Instanz mit storage als einziger Eigenschaft erstellen. Diese Eigenschaft teilt dem " multer mit, wohin die Datei von Ihrem " multipart/form-data zu senden ist. Da die IBM Cloud Plattform eine Implementierung der S3 verwendet, setzen Sie den Speicher auf ein " s3-multer. Dieses Objekt s3-multer enthält eine Eigenschaft s3, die Ihrem Objekt s3 zugeordnet ist. Es gibt auch eine Eigenschaft bucket, die der Variablen myBucket zugeordnet ist, die wiederum den Wert web-images hat. Das " s3-multer verfügt nun über alle Daten, die zum Hochladen von Dateien in Ihren Object Storage erforderlich sind, wenn es Daten vom Upload-Formular erhält. Der Name (oder Schlüssel) des hochgeladenen Objekts ist der ursprüngliche Dateiname.

Verwenden Sie eine Zeitmarke als Teil des Dateinamens, um die Eindeutigkeit des Dateinamens beizubehalten.

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;

Eine hilfreiche Task für lokale Tests ist das Ausgeben des Dateiobjekts in der Konsole in console.log(file). Führen Sie einen lokalen Test des Upload-Formulars durch und zeigen Sie die Ausgabe des Konsolenprotokolls der Datei an.

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

Das Feedback von Ihrem Callback erklärt, dass die Anwendung beim Testen "Datei erfolgreich hochgeladen" hat.

Abrufen und Anzeigen eines Bilds

Erinnern Sie sich daran, dass in " app.js die Codezeile " app.use('/gallery', galleryRouter); dem Express-Framework mitteilt, dass es diesen Router verwenden soll, wenn die Route " /gallery angefordert wird. Dieser Router verwendet galleryController.js und definiert die Funktion getGalleryImages, deren Signatur Sie zuvor gesehen haben. Rufen Sie mit demselben " s3, das Sie für Ihre Bild-Upload-Funktion eingerichtet haben, die Funktion mit dem Namen " listObjectsV2 auf. Diese Funktion gibt die Indexdaten zurück, die jedes Objekt in Ihrem Bucket definieren. Um Bilder in HTML anzuzeigen, benötigen Sie eine Bild-URL für jedes JPEG-Bild in Ihrem ' web-images-Bucket, das in Ihrer Ansichtsvorlage angezeigt werden soll. Die Schließung mit dem von " listObjectsV2 zurückgegebenen Datenobjekt enthält Metadaten über jedes Objekt in Ihrem Bucket.

Der Code durchläuft die ' bucketContents und sucht nach einem Objektschlüssel, der auf ".jpg" endet, und erstellt einen Parameter, der an die S3 ' getSignedUrl übergeben wird. Diese Funktion gibt eine signierte URL für ein beliebiges Objekt zurück, wenn Sie den Bucket-Namen und den Schlüssel des Objekts angeben. Speichern Sie in der Callback-Funktion jede URL in einem Array und übergeben Sie sie an die HTTP Server " res.render als Wert für eine Eigenschaft namens " 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
            });
        });
    };

//...

Das letzte Codebeispiel zeigt den Hauptteil der Vorlage galleryView mit dem Code, der zum Anzeigen Ihrer Bilder erforderlich ist. Rufen Sie das Array imageUrls aus der Methode res.render() ab und iterieren Sie über ein Paar verschachtelter <div>...</div>-Tags. Jeder sendet eine GET-Anforderung für das Image, wenn die /gallery-Route angefordert wird.

<!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>

Testen Sie die Anwendung lokal über http://localhost:3000/gallery und zeigen Sie Ihr Image an.

In Git festschreiben

Nachdem die grundlegenden Funktionen der Anwendung nun funktionieren, übertragen Sie Ihren Code in Ihr lokales Projektarchiv und stellen ihn dann auf GitHub bereit. Klicken Sie mit GitHub Desktop auf Changes (siehe Abbildung 11), geben Sie eine Zusammenfassung der Änderungen in das Feld Summary ein und klicken Sie dann auf Commit to Local-dev.

Wenn Sie auf sync klicken, wird Ihre Festschreibung an die ferne local-dev-Verzweigung gesendet. Diese Aktion startet die Erstellungs-und Implementierungsphase in Ihrer Delivery Pipeline.