{"id":1188,"date":"2019-09-29T13:31:48","date_gmt":"2019-09-29T11:31:48","guid":{"rendered":"https:\/\/azure.teamprojects.de\/?page_id=1188"},"modified":"2019-09-29T23:13:37","modified_gmt":"2019-09-29T21:13:37","slug":"azure-app-service-plan-und-web-app","status":"publish","type":"page","link":"https:\/\/azure.teamprojects.de\/?page_id=1188","title":{"rendered":"App Service-Plan und Web-App"},"content":{"rendered":"\n

Einrichtung<\/strong><\/p>\n\n\n\n

Der Azure App Service erm\u00f6glicht das Erstellen und Hosten von Web-Apps, mobilen Back-Ends und RESTful-APIs in vielen verschiedenen Programmiersprachen, ohne eine Infrastruktur verwalten zu m\u00fcssen. Der Dienst bietet eine automatische Skalierung und Hochverf\u00fcgbarkeit, unterst\u00fctzt Windows und Linux und erm\u00f6glicht automatisierte Bereitstellungen \u00fcber GitHub, Azure DevOps oder ein anderes beliebiges Git-Repository. <\/p>\n\n\n\n

Um eine Web-App erstellen zu k\u00f6nnen wird ein App Service-Plan ben\u00f6tigt. Mit diesem App Service-Plan werden die genutzten Computerressourcen f\u00fcr eine auszuf\u00fchrende Web-App definiert. Diese Computerressourcen entsprechen der Serverfarm beim herk\u00f6mmlichen Webhosting. Es k\u00f6nnen eine oder mehrere Apps f\u00fcr die Ausf\u00fchrung auf denselben Computerressourcen (oder in demselben App Service-Plan) konfiguriert werden.<\/p>\n\n\n\n

Wenn ein App Service-Plan in einer bestimmten Region (z. B. \u201eEuropa, Westen\u201c) erstellt wird, werden f\u00fcr den Plan in dieser Region Computerressourcen erstellt. Alle Apps, die in diesen App Service-Plan einf\u00fcgt werden, werden auf diesen Computerressourcen ausgef\u00fchrt. Die Menge an Computerressourcen, welche verwendet werden soll, kann aus verschiedenen Preispaketen<\/a> ausgew\u00e4hlt werden. Wie ein App Service-Plan in Azure Schritt f\u00fcr Schritt erstellt wird, kann dem Tutorial „Verwalten eines App Service-Plans in Azure<\/a>“ aus den Microsoft Docs entnommen werden. <\/p>\n\n\n\n

F\u00fcr den in diesem Projekt verwendeten App Service-Plan wurde das oben genannten Tutorial durchgearbeitet. F\u00fcr die Server Location wurde West Europa und f\u00fcr die Computerressourcen der Developer-\/Free-Tarif gew\u00e4hlt. Die \u00dcbersicht des Service-Plan f\u00fcr dieses Projekt sah wie folgt aus:<\/p>\n\n\n\n

\"\"
\u00dcbersicht des App Service-Plan des Projekts im Azure-Portal<\/figcaption><\/figure>\n\n\n\n

Nachdem der App Serice-Plan erstellt wurde, kann die Web-App eingerichtet und mit dem Service-Plan verbunden werden. Hiernach kann mit der eigentlichen Arbeit an der Web-App begonnen werden. Um eine Grundlage f\u00fcr die Web-App zu erhalten, auf der aufgebaut werden konnte, wurde das Tutorial „Visualisieren von Echtzeit-Sensordaten aus Azure IoT Hub in einer Webanwendung<\/a>„verwendet. Aus der folgenden Abbildung k\u00f6nnen die gew\u00e4hlten Einstellungen der Web-App entnommen werden.<\/p>\n\n\n\n

\"\"
Overview der Web-App des Projekts im Azure-Portal
<\/figcaption><\/figure>\n\n\n\n

F\u00fcr die Web-App wurde eine eigene einzigartige URL erstellt, unter welcher sie von \u00fcberall aus erreicht werden kann. Zus\u00e4tzlich muss ein eigener Github Account zum deployen des Codes erstellt werden. \u00dcber die Git clone URL kann jederzeit, wenn die Einlogdaten bekannt sind, der aktuelle Code der Web-App bezogen werden.<\/p>\n\n\n\n

Einrichten der SQL abfrage<\/strong> <\/h2>\n\n\n\n

F\u00fcr die sp\u00e4tere Verbindung der Web-App mit einer SQL-Datenbank wurde sich an das „Schnellstart: Abfragen einer Azure SQL-Datenbank mithilfe von Node.js<\/a>“ Tutorial aus den Microsoft Docs gehalten. Der aus dem Tutorial gewonnen Code wurde so abge\u00e4ndert, dass er als eigene Klasse fungiert und somit leicht in den Code der Web-app eingearbeitet werden konnte. Die neue SQL-Abfrage Klasse sieht wie folgt aus:<\/p>\n\n\n\n

var Connection = require('tedious').Connection;\nvar Request = require('tedious').Request;\nconst EventEmitter = require('events');\n\nclass SQLQuery extends EventEmitter {\n    constructor() {\n        super();\n        this.config = {\n            authentication: {\n                options: {\n                    userName: '******',\n                    password: '******'\n                },\n                type: 'default'\n            },\n            server: 'h-da-team.database.windows.net',\n            options:\n            {\n                database: 'dbAzureProjekt',\n                encrypt: true\n            }\n        }\n        this.connection = new Connection(this.config);\n\n        \/\/ Attempt to connect and execute queries if connection goes through\n        this.connection.on('connect', async (connErr) => {\n            if (connErr) {\n                throw new Error(`Connection Error: ${connErr}`);\n            } else {\n                console.log(\"INIT Done\");\n                this.emit('done');\n            }\n        });\n    }\n\n    async queryDatabase() {\n        return new Promise( (resolve, reject) => {\n            let tables = [];\n            console.log('Reading rows from the Table...');\n            \/\/ Read all rows from table\n            var request = new Request(\n                \"SELECT * FROM tabTables\",\n                function (err, rowCount, rows) {\n                    console.log('Finished queryDB');\n                    resolve(tables);\n                }\n            );\n    \n            request.on('row', function (columns) {\n                columns.forEach(function (column) {\n                    console.log(\"%s\\t%s\", column.metadata.colName, column.value);\n                    tables.push(column.value);\n                });\n            });\n            this.connection.execSql(request);\n        });\n    }\n\n    async readTable(tableName,friendlyId,amountOfData){\n        return new Promise( (resolve, reject) => {\n        let tableValue = [];\n        friendlyId = \"'\"+friendlyId+\"'\";\n        var request = new Request(\n            'SELECT TOP '+amountOfData+' * FROM '+ tableName + ' WHERE friendlyId='+ friendlyId +' ORDER BY sensorTimeStamp DESC',\n            function (err, rowCount, rows) {\n                console.log(rowCount + ' row(s) returned bla');\n\n                resolve(tableValue);\n            }\n        );\n        request.on('row', function (columns) {\n            columns.forEach(function (column) {\n                tableValue.push(column);\n            });\n            \n        });\n        this.connection.execSql(request);\n        });\n    }\n}\nmodule.exports = SQLQuery;<\/code><\/pre>\n\n\n\n
Diese Klasse wurde dem Projektordner der Web-App hinzugef\u00fcgt, um die beiden Teilprojekte zusammenzuf\u00fchren und die SQL-Abfrage als Teil der Web-App nutzen zu k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Einrichtung Der Azure App Service erm\u00f6glicht das Erstellen und Hosten von Web-Apps, mobilen Back-Ends und RESTful-APIs in vielen verschiedenen Programmiersprachen, ohne eine Infrastruktur verwalten zu m\u00fcssen. Der Dienst bietet eine automatische Skalierung und Hochverf\u00fcgbarkeit, unterst\u00fctzt Windows und Linux und erm\u00f6glicht automatisierte Bereitstellungen \u00fcber GitHub, Azure DevOps oder ein anderes beliebiges Git-Repository. Um eine Web-App erstellen … <\/p>\n
\u201eApp Service-Plan und Web-App\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":100,"featured_media":0,"parent":714,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/1188"}],"collection":[{"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1188"}],"version-history":[{"count":83,"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/1188\/revisions"}],"predecessor-version":[{"id":1488,"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/1188\/revisions\/1488"}],"up":[{"embeddable":true,"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=\/wp\/v2\/pages\/714"}],"wp:attachment":[{"href":"https:\/\/azure.teamprojects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}