{"id":21683,"date":"2021-09-18T22:05:04","date_gmt":"2021-09-18T20:05:04","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=21683"},"modified":"2025-02-27T16:18:02","modified_gmt":"2025-02-27T15:18:02","slug":"ynstagram-cloud-computing-mit-aws-serverless","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/09\/18\/ynstagram-cloud-computing-mit-aws-serverless\/","title":{"rendered":"Ynstagram &#8211; Cloud Computing mit AWS &amp; Serverless"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/0qo7I4GSA1ZZs7cHUopN45xV3gn0EJICqkdu6TBayFrtHi7N8WfW2o1IOiFfseLK8A-PJuhcntSxIhGTjipoCA-_OErGHAl3rhfEDAFo8VKtvW4wVlacJ28MRMYCNssMzbA0M5h1=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Im Rahmen der Vorlesung \u201cSoftware Development for Cloud Computing\u201d haben wir uns hinsichtlich des dortigen Semesterprojektes zum Ziel gesetzt einen einfachen Instagram Klon zu entwerfen um uns die Grundkenntnisse des Cloud Computings anzueignen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Grundkonzeption \/ Ziele des Projektes<\/h2>\n\n\n\n<p>Da wir bereits einige Erfahrung mit React aufgrund anderer studentischer Projekte sammeln konnten, wollten wir unseren Fokus weniger auf die Funktionalit\u00e4t und das Frontend der Applikation richten und ein gr\u00f6\u00dferes Augenmerk auf die Cloud spezifischen Funktionen und Vorgehensweisen legen.&nbsp;<\/p>\n\n\n\n<p>Konkret planten wir die Umsetzung eines Instagram Klons mit den grundlegenden Funktionalit\u00e4ten:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bilder bzw. Beitr\u00e4ge hochladen<\/li><li>Titel &amp; Beschreibung von Beitr\u00e4gen anlegen<\/li><li>Liken von Beitr\u00e4gen\u00a0<\/li><li>Kommentieren von Beitr\u00e4gen<\/li><li>Accountmanagement<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entwurfsentscheidung<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Frontend<\/h3>\n\n\n\n<p>Aufgrund von bereits existierenden Vorkenntnissen und guter Erfahrungen entschieden wir uns f\u00fcr die Umsetzung des Frontends mit Hilfe des React Frameworks. Mit der Gestaltung als Web App ergibt sich zudem der Vorteil, dass \u201cYnstagram\u201d Plattform \u00fcbergreifend erreichbar ist.<\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Backend &#8211; von Firebase zu AWS<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/WQ3Bm87ZOgn0JT9Bbon3sobuuVO-z1XNBMs7CQMv8CzrxPy3S0AENzKFwz0Xe507dR4jU2OET5NiC_qzlf3kujLN5NudxisutimaPhrzfV26oL1kRibaM3GqnOx22pe7GnWQ85HV=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Zun\u00e4chst starteten wir unser Projekt mit Firebase umzusetzen. Zum einen verlor dies jedoch seinen Reiz hinsichtlich des Lerneffekts, da wir parallel unser Softwareprojekt mit Firebase verwirklichten. Gleichzeitig wurde uns durch die Einblicke in den Vorlesungen ein Bewusstsein f\u00fcr den Funktionsumfang von AWS geschaffen. <\/p>\n\n\n\n<p>Interessant war f\u00fcr uns hierbei beispielsweise die wesentlich umfangreicheren Einsatzm\u00f6glichkeiten von Lambda Funktionen. W\u00e4hrend diese in Firebase nur durch Eintr\u00e4ge \/ Trigger geschehen kann, konnten wir hier auf API Aufrufe zur\u00fcckgreifen. Auch die umsetzbaren Funktionalit\u00e4ten gestalteten sich als wesentlich umfangreicher. So bot sich uns unter anderem die M\u00f6glichkeit Bilder beim Upload automatisiert zu skalieren und perspektivisch lie\u00dfe sich auch recht einfach eine Analyse von Inhalten mit Hilfe von K\u00fcnstlicher Intelligenz umsetzen. W\u00e4hrend man bei Firebase in all dem schnell an gewisse Grenzen kommt, gibt es bei AWS einen viel breiteren Horizont an M\u00f6glichkeiten.\u00a0<\/p>\n\n\n\n<p>Dennoch gestaltete sich dieser Umstieg keineswegs als einfach, denn Firebase bietet eine wesentlich bessere \u00dcbersichtlichkeit und Dokumentation.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Serverless<\/h3>\n\n\n\n<p>Da uns die AWS Web Oberfl\u00e4che und die Online Erstellung von Lambda Funktionen keineswegs ansprachen suchten wir nach L\u00f6sungen um alle Konfigurationen wenn m\u00f6glich auch auf Github hinterlegt zu haben und im Code Editor anlegen zu k\u00f6nnen.\u00a0<\/p>\n\n\n\n<p>Dabei sind wir letztlich auf Serverless gesto\u00dfen. Hier werden alle Buckets, Tabellen und API Aufrufe \u00fcber ein serverless.yaml File verwaltet. So lassen sich neue Elemente viel \u00fcbersichtlicher \/ schneller anlegen und Konfigurationen k\u00f6nnen einfach von bereits erstellten Elementen \u00fcbernommen werden.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Postman<\/h3>\n\n\n\n<p>Um einen \u00dcberblick \u00fcber die erstellten API Routen zu behalten und um diese einfach testen zu k\u00f6nnen, haben wir uns f\u00fcr Postman entschieden. \u00dcber ein in Github geteiltes File k\u00f6nnen so alle am Projekt beteiligten die aktuellen API Routen sehen und neue Aufrufe anlegen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Umsetzung \/ Architektur<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">AWS Services<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/hsUPfw294inD7rhMKRPiQ6QzIKHjwM0SnzGxy6Mr-gIS3GOchULQVUPxTZoVsiOmDLqiRcRhCeV6g2U9aG51XQ8h5zeKg_97jimbH0HeN1C0CtdX9RQcnjIDawBSNEw8g83R31MF=s0\" alt=\"\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">DynamoDB<\/h3>\n\n\n\n<p>Da wir bereits in Firebase auf die dortige NoSQL Datenbank \u201cFirestore Database\u201d zur\u00fcckgegriffen hatten, entschieden wir uns hier f\u00fcr eine Beibehaltung dieser Datenbankstruktur. Der Vorteil liegt dabei gegen\u00fcber SQL Datenbanken in einfacheren Abfragen bedingt durch eine flachere Datenstruktur.&nbsp;<\/p>\n\n\n\n<p>Wir verwenden DynamoDB Tabellen um die zu den Bildern geh\u00f6renden Informationen wie z.B. Titel, Beschreibung, Autor etc. zu speichern. Die Verkn\u00fcpfung der Bilder mit den Datens\u00e4tzen in den Tabellen erfolgt dabei durch eine einzigartige ID.<\/p>\n\n\n\n<p>Es gibt dabei 2 Tabellen, eine in der zun\u00e4chst die Eingaben gespeichert werden, und eine weitere in die verarbeitete Datens\u00e4tze \u00fcbertragen werden.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/uHIUjOCac6FtCRlHaXzHpdK0iFz0yzTO0fBoFhoANNyW6RT2ZJ-SQvmBeqRMHfRUhh8en6GFOnpH-omK4gisz5hNrPF1RQdLs9wQ8yg9mLngk6iCXgHiOyrXv6pdfcB1lTO-3LaG=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Beide Tabellen sind dabei strukturell gleich aufgebaut. Zentral sind hier eine eindeutige ID, Datum der Erstellung, Account Name des Erstellers, sowie Beschreibung und Titel des Beitrags. Kommentare und Likes werden \u00fcber Arrays verwaltet.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S3<\/h3>\n\n\n\n<p>In S3 Buckets sind die zu den Beitr\u00e4gen hinterlegten Bilder gespeichert. Dabei gibt es einen Bucket mit den Originaldateien, sowie einen mit verringerter Aufl\u00f6sung. Der Name der Bilder entspricht dabei stets der den Beitr\u00e4gen zugeh\u00f6rigen einzigartigen ID. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cognito<\/h3>\n\n\n\n<p>Mit AWS Cognito konnten wir in wenigen Schritten unser Account Management einrichten. Cognito bietet dabei die Unterst\u00fctzung aktueller Identit\u00e4ts und Zugriffsmanagement Standards wie zB. Oauth 2.0 und SAML 2.0 und bietet gleichzeitig auch die M\u00f6glichkeit Multifaktor Authentifizierung zu implementieren.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Amplify<\/h3>\n\n\n\n<p>Wir nutzen AWS Amplify um das Frontend unserer Applikation zu hosten und um hierf\u00fcr eine CI\/CD Pipeline mit Development und Master Umgebung zu realisieren. Eine genauere Erkl\u00e4rung hierzu findet sich im Abschnitt &#8220;CI\/CD Pipeline&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lambda&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">API Gateway<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/SiikJjlnl72Q4VRCa_z5XwBCGQEhoYCrp5fiE4JiQe5rc5YqQgQBUsCTe9aLezFqtZcHYrVT1mRRzt_wpKjeflo_3iROavgylAm7-7SqWj3ThWqHSibNOs1UVDd_iIvPVrej2V5A=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Ein gro\u00dfteil unsere Lambda Funktionen wird \u00fcber API Aufrufe genutzt. Eine \u00dcbersicht dieser haben wir wie eingangs erw\u00e4hnt in einem Postman File hinterlegt. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">API-Routen<\/h4>\n\n\n\n<p><strong>POST \/image-upload<\/strong><\/p>\n\n\n\n<p>Hochladen eines Bildes in den S3 Bucket. Wird sowohl mit Bilddaten als auch mit dazugeh\u00f6rigen Informationen wie Beschreibung und Titel aufgerufen (JSON-Format).\u00a0<\/p>\n\n\n\n<p><strong>POST \/image-info<\/strong><\/p>\n\n\n\n<p>Erstellt einen Eintrag in die DynamoDB Tabelle mit s\u00e4mtlichen Informationen zu einem Beitrag, wird im Body als JSON \u00fcbermittelt.\u00a0<\/p>\n\n\n\n<p><strong>POST \/create-file<\/strong><\/p>\n\n\n\n<p>Erstellt eine Datei im S3 Bucket. Der Dateiname entspricht dem URL Parameter.<\/p>\n\n\n\n<p><strong>GET \/get-all-images<\/strong><\/p>\n\n\n\n<p>Gibt alle als \u201cvalid\u201d markierten Beitr\u00e4ge als Array im JSON-Format zur\u00fcck.<\/p>\n\n\n\n<p><strong>GET \/get-file<\/strong><\/p>\n\n\n\n<p>Gibt eine Datei anhand des Dateinamens zur\u00fcck.&nbsp;<\/p>\n\n\n\n<p><strong>GET \/image-info<\/strong><\/p>\n\n\n\n<p>Gibt die Informationen zu einem einzelnen Beitrag im JSON-Format zur\u00fcck.<\/p>\n\n\n\n<p><strong>PUT \/update-image-info<\/strong><\/p>\n\n\n\n<p>Genutzt um Kommentare zu Beitr\u00e4gen hinzuzuf\u00fcgen. Updated Eintr\u00e4ge in der DynamoDB Tabelle.<\/p>\n\n\n\n<p><strong>PUT \/update-likes<\/strong><\/p>\n\n\n\n<p>Verwendet um neue Likes hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DynamoDB \/ S3 Trigger<\/h3>\n\n\n\n<p>Neben direkten API Aufrufen verwenden wir auch Trigger auf DynamoDB Tabellen, sowie S3 Buckets.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemplarischer Ablauf eines Image Uploads<\/h4>\n\n\n\n<p>Dies l\u00e4sst sich am Besten am Ablauf einer Beitragserstellung darstellen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/cvn8eOGvjNBCVPj6ry_X0Un8UB-C1c4kRS6D8l1MEqHS3l7zHE1JgwGC40s2FHxLHo2sEoAuFhmEtRiQYCR7KcLW9cETYMut8AsRrONza-iurhSASwjUYYUgOmQnmCKw9sUdPpPv=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Per Post-Request wird zun\u00e4chst die Lambda Funktion \u201cimageUpload\u201d aufgerufen, welche das Bild in dem S3 Bucket hinterlegt. Dann wird \u00fcber einen Trigger automatisch die Lambda Funktion \u201cimageResize\u201d aufgerufen, welche die Bilder auf eine Aufl\u00f6sung von 400 x 400 Pixeln skaliert. Diese Bilder werden dann im Bucket f\u00fcr skalierte Bilder gespeichert. So k\u00f6nnen die Bilder im Feed gerade bei Mobilen Ger\u00e4ten schneller geladen werden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/T-f-3Z7NFX4DM2ygJmjD0kIOGZQY3Rw1hXvY3H9tm_ruvmxp8Qsa0eoFpIjW-yE788XxI3dekPCrCCPIvSkVneAurwGMCicxd6ImAXGC2xw6Bv7XrR2_gM5ut-Qls0xMSuT4K4Yc=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Parallel dazu wird in der DynamoDB Tabelle ein Eintrag angelegt. Auch hier wird ein Trigger aufgerufen der seinerseits die Funktion \u201cchangeText\u201d aufruft. Diese ersetzt in Anlehnung an den Namen \u201cYnstagram\u201d alle \u201ci\u201d in Beschreibung und Titel durch \u201cy\u201d. Hierbei handelt es sich lediglich um eine Spielerei die aus unserem Interesse entstand verschiedenste Trigger und Einsatzm\u00f6glichkeiten von Lambda Funktionen auszuprobieren.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CI\/CD Pipeline<\/h2>\n\n\n\n<p>Interessant war es f\u00fcr uns zudem erstmals wirklich Erfahrung mit einer CI\/CD Pipeline zu sammeln. Wir planten dabei die strikte Unterteilung in eine Entwicklungsumgebung und einer dieser prinzipiell gleichen finalen Umgebung. So dass der aktuelle Stand schon unter realistischen Bedingungen getestet werden kann bevor er letztlich ver\u00f6ffentlicht wird.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/nqGvb0f5wHSvo1ngak1TvbHqmGiv_029aBBAR-D9PGaP7If-BXgeQ4vQjv-ucC7N9j32UlTnv34i3vyDMYdJNFM_QGqjj7KA8KzCe5NxJvHZlNQwZ5-nFWH2EoHIy0JFUyd_chn_=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Diese CI\/CD Pipeline haben wir mit AWS Amplify und Github Actions umgesetzt. Dabei wird zun\u00e4chst stets auf einen Development Branch gepusht, welcher dann automatisch auf eine Entwicklungsumgebung auf Amplify hochgeladen wird. So k\u00f6nnen zun\u00e4chst alle Tests durchgef\u00fchrt werden, bevor dann mit einem Pull request die \u00c4nderung auf den Master Branch \u00fcbertragen werden. Wenn dies geschehen ist, werden diese ebenfalls automatisch in die Produktionsumgebung \u00fcbernommen bzw. deployed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-attachment-id=\"21688\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/09\/18\/ynstagram-cloud-computing-mit-aws-serverless\/s06\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06.png\" data-orig-size=\"3840,2160\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"S06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-1024x576.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-1024x576.png\" alt=\"\" class=\"wp-image-21688\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-1024x576.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-300x169.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-768x432.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-1536x864.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/S06-2048x1152.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Hier wird neben den durch Github Actions durchgef\u00fchrten Tests auch \u00fcberpr\u00fcft ob die Web Anwendung auch auf verschiedenen Ger\u00e4ten richtig skaliert und damit \u00fcberpr\u00fcft ob die UI f\u00fcr den Nutzer funktionsf\u00e4hig angezeigt wird. Der aktuelle Stand wird dabei selbstverst\u00e4ndlich nur \u00fcbernommen, wenn alle Tests erfolgreich abgeschlossen werden.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Serverless<\/h2>\n\n\n\n<p>Um der Un\u00fcbersichtlichkeit der AWS Weboberfl\u00e4chen aus dem Weg zu gehen und um Elemente leichter und reproduzierbar, \u00fcber Git verwaltet anlegen zu k\u00f6nnen haben wir uns f\u00fcr Serverless entschieden. Hier werden alle AWS Komponenten in einem \u201cserverless.yaml\u201d File angelegt.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Variablen<\/h3>\n\n\n\n<p>Es gibt dabei zum Beispiel auch die M\u00f6glichkeit unkompliziert Environment Variablen anzulegen:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/qk0VCwEtG7q8DlbdZRl_T6zP3YOBLfXJf2NiOO0WxT24jaf1SuBJSVgpS1zcXwLc3Y6fPaz7Jmy2ShNGYIazt0UOyDr1CkLQfczvhxM-UFUmWtN_R-m3YeIRdUdYLtAPmWdiflVh=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Welche wir wiederum \u00fcber eigene custom Variablen, welche an verschiedenen Stellen genutzt werden definiert haben:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vte6avy-czQZB3R1yT9VGDmW4FYkP-JerVagx0uOXsCVcgayXJe3tFewb6hFiUrs1eoCF9YYp86ARuLa6-v008hg1fnN6nDQGiXPtubU5qn1m2j7Z_ay55FdxbBeNIdD1iwblNM2=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Dies bringt den Vorteil mit sich, dass Namen flexibel ver\u00e4ndert und direkt \u00fcberall \u00fcbernommen werden, sprich sowohl in AWS als auch im Code \u00fcber die Environment Variablen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Functions<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/YnTTIyA_lVSEbS2j8qR0N0JRKz7vAsuxoQK9QRl23-ewA10IYw_nToW3_0E7eEPaa6atchoounXIkk48myC4VUCm7KivPuktnUj6SW63BKNb3qm4vlVVey_NLdc5WJofgehA28tu=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Gleicherma\u00dfen einfach lassen sich auch die Lambda Functions anlegen. Diese werden jeweils \u00fcber einen \u201chandler\u201d referenziert und werden dann durch ein \u201cevent\u201d aufgerufen, was entweder API Aufrufe oder eben bspw. DynamoDB \/ S3 Trigger sein k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Resources<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/SsHIE6tHUSwKjv6b2WuVMvutDPJH9YLvyfZYufOyynfb0faPplmF_qEVDrbgVMsJwSjguOa7AsTZKEEX7rsnmEpYyqt4QNnBaowl0NAPTrPllR_iieQM3EVudCwoFivqOyIBcMG1=s0\" alt=\"\" \/><\/figure>\n\n\n\n<p>Auch alle Buckets und Tabellen sind im .yaml File definiert. So k\u00f6nnen insbesondere neue Elemente sehr einfach angelegt werden, da man direkt auf zuvor definierte Konfigurationen zur\u00fcckgreifen kann. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/lu192DUqfhdDDJVITY5TRk8umx_Y-Ok3KNwwgBzF9xc4gUAeGczWVvgleXnQvIpsqGZzrUIx5ai3OATABxqb6fQYkIoaRN8FevVoBrPo2BcG3eN4gevE3-zUh41iMRoMIIWsRe1U=s0\" alt=\"\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Testing<\/h2>\n\n\n\n<p>Beim Testen haben wir uns vor allem auf die API Aufrufe und die grunds\u00e4tzlichen Funktionen fokussiert. Grunds\u00e4tzlich werden unsere Tests \u00fcber die im Abschnitt &#8220;CI\/CD Pipeline&#8221; dargestellte Pipeline mit Github Actions ausgef\u00fchrt. Diese sind auch Bestandteil des Amplify Deployment Prozesses. Zus\u00e4tzlich dazu haben wir CircleCi implementiert um die Serverless Komponenten automatisch zu deployen.\u00a0F\u00fcr das Testing nutzen wir allgemein ein lokales Mock-Up unserer DynamoDB da wir hier schnell auf das Problem gesto\u00dfen sind, dass unsere freien AWS Kontigente aufgebraucht waren.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ausblick \/ Fazit<\/h2>\n\n\n\n<p>Die gr\u00f6\u00dften Schwachstellen des Projektes liegen aktuell in nicht abgesicherten API Aufrufen, diese lie\u00dfen sich \u00fcber die Verwendung von API Keys sch\u00fctzen. Dabei sollten perspektivisch auch die Zugriffe auf DynamoDB sowie S3 \u00fcber IAM Role verwaltet werden.\u00a0<\/p>\n\n\n\n<p>F\u00fcr die Accountverwaltung w\u00e4re es sinnvoll die Multifaktor Authentifizierung einzurichten. Der Funktionsumfang lie\u00dfe sich selbstverst\u00e4ndlich noch deutlich ausbauen, wobei besonders die Nutzung von KI Komponenten f\u00fcr uns interessant w\u00e4re.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Insgesamt konnten wir, ausgehend von keinerlei Grundkenntnissen im Bereich Cloud Computing, uns mit Hilfe der Umsetzung des Projektes im Rahmen der Vorlesung einen \u00dcberblick und ein Grundverst\u00e4ndnis f\u00fcr die Welt des Cloud Computings erarbeiten, welche eine solide Basis bieten um zuk\u00fcnftig die vorliegenden Ans\u00e4tze noch wesentlich weiter zu vertiefen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Im Rahmen der Vorlesung \u201cSoftware Development for Cloud Computing\u201d haben wir uns hinsichtlich des dortigen Semesterprojektes zum Ziel gesetzt einen einfachen Instagram Klon zu entwerfen um uns die Grundkenntnisse des Cloud Computings anzueignen. Grundkonzeption \/ Ziele des Projektes Da wir bereits einige Erfahrung mit React aufgrund anderer studentischer Projekte sammeln konnten, wollten wir unseren Fokus [&hellip;]<\/p>\n","protected":false},"author":1050,"featured_media":21687,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,262,650],"tags":[150,7,25],"ppma_author":[861],"class_list":["post-21683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-technologies","category-rich-media-systems","category-scalable-systems","tag-ci-cd","tag-cloud","tag-nodejs"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/Prasentation_CC_01.png","jetpack-related-posts":[{"id":11711,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/29\/perfekter-gluhwein-fur-zuhause-thermometer-mit-raspberry-pi-und-aws\/","url_meta":{"origin":21683,"position":0},"title":"Perfekter Gl\u00fchwein f\u00fcr Zuhause: Thermometer mit Raspberry Pi und AWS","author":"jg129","date":"29. September 2020","format":false,"excerpt":"Abstract Kein anderes Getr\u00e4nk ist mit Weihnachtsm\u00e4rkten so verbunden wie Gl\u00fchwein. Und so trinkt sich der ausschweifende Weihnachtsmarktbesucher im Laufe der Adventszeit von Stand zu Stand bis er schlie\u00dflich am Ende des Jahres seinen Lieblingsstand gefunden hat. Doch auch daheim kann der perfekte Gl\u00fchwein gelingen.\u00a0 Wir zeigen, wie man sich\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/lh3.googleusercontent.com\/rbu36fXExVo14XfyUicXbIFjAgh1bvNnXHlaUVRfqLevpyZx4KVyjeuYdgItPx6y39R8L9Ub_hug03LYM3AIAW_F14vhBiXOZlt92qIpN0Y2h0H-czZ65ERnn3qUoWVh7JfI5ihA","width":350,"height":200,"srcset":"https:\/\/lh3.googleusercontent.com\/rbu36fXExVo14XfyUicXbIFjAgh1bvNnXHlaUVRfqLevpyZx4KVyjeuYdgItPx6y39R8L9Ub_hug03LYM3AIAW_F14vhBiXOZlt92qIpN0Y2h0H-czZ65ERnn3qUoWVh7JfI5ihA 1x, https:\/\/lh3.googleusercontent.com\/rbu36fXExVo14XfyUicXbIFjAgh1bvNnXHlaUVRfqLevpyZx4KVyjeuYdgItPx6y39R8L9Ub_hug03LYM3AIAW_F14vhBiXOZlt92qIpN0Y2h0H-czZ65ERnn3qUoWVh7JfI5ihA 1.5x"},"classes":[]},{"id":12032,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/admin-panel-web-app-in-der-aws-cloud\/","url_meta":{"origin":21683,"position":1},"title":"Admin Panel (Web App) in der AWS Cloud","author":"ss447","date":"30. September 2020","format":false,"excerpt":"1. Einleitung Im Rahmen der Vorlesung \u201eSoftware Development for Cloud Computing\u201c haben wir uns als Gruppe dazu entschieden aufbauend auf teilweise bereits vorhandener Codebasis an einem Startup-Projekt weiterzuarbeiten. Der Hauptfokus lag bei uns auf dem Ausbau von DevOps-Aspekten und auf dem eines stabilen und sicheren Systems, welches auch in der\u2026","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/qw9ZkWnvR4M\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":25800,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/14\/splid-2-0-die-zukunft-des-gemeinsamen-ausgabenmanagements\/","url_meta":{"origin":21683,"position":2},"title":"Splid 2.0 &#8211; Die Zukunft des gemeinsamen Ausgabenmanagements","author":"David Christoph Scheifers","date":"14. September 2023","format":false,"excerpt":"Im Rahmen der Vorlesung \u201cSoftware Development for Cloud Computing\u201d haben wir uns daf\u00fcr entschieden, einen Klon der App Splid auf Basis unterschiedlicher Cloud Technologien als Web App zu entwickeln, um uns so die Grundkenntnisse des Cloud Computings anzueignen. Projektidee Bei gemeinsamen Aktivit\u00e4ten und Gruppenausgaben ist es sehr hilfreich, einfache und\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":23412,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/22\/migration-einer-rest-api-in-die-cloud\/","url_meta":{"origin":21683,"position":3},"title":"Migration einer REST API in die Cloud","author":"Raphael Kienh\u00f6fer","date":"22. August 2022","format":false,"excerpt":"Im Rahmen der Vorlesung \"Software Development f\u00fcr Cloud Computing\" haben wir uns zum Ziel gesetzt, eine bereits bestehende REST API in die Cloud zu migrieren.","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/OnPrem.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/OnPrem.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/OnPrem.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/OnPrem.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":23679,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/31\/jobsuche-portal\/","url_meta":{"origin":21683,"position":4},"title":"Jobsuche Portal","author":"ag164","date":"31. August 2022","format":false,"excerpt":"SS22 - Dev4Cloud Projekt - von Robin H\u00e4rle und Anton Gerdts Ideenfindung \u00a0\u00a0\u00a0 Zu Beginn der Ideenfindungsphase f\u00fcr unser Projekt sahen wir uns die verschiedenen Apis auf Bund.dev an, um uns von der Thematik der verf\u00fcgbaren Daten inspirieren zu lassen. Wir entschieden uns ohne lange abzuw\u00e4gen daf\u00fcr ein Jobsuche-Portal mit\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":23579,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/30\/google-geodata-visualizer\/","url_meta":{"origin":21683,"position":5},"title":"Google Geodata Visualizer","author":"sk331","date":"30. August 2022","format":false,"excerpt":"Ein Projekt von Kai Kustermann, Michael Litschko, Sarah Mauff und Sebastian K\u00f6pp Einleitung Im Sommersemester 2022 haben wir uns als 4-k\u00f6pfige Gruppe dazu entschlossen, einen Google Geodata Visualizer zu erstellen. Das Projekt ist aus der Idee einer McDonald\u2019s-Achievement-Card entstanden. Die Idee war eine Website, die dem Benutzer anzeigt, welche McDonald\u2019s\u2026","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/16.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":861,"user_id":1050,"is_guest":0,"slug":"nikolas_schaber","display_name":"ns144","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bf06d15b3c9996b57428cbc3e2fd6aae5e1074e7aa50d414f4725bb468982e6c?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/21683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/1050"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=21683"}],"version-history":[{"count":6,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/21683\/revisions"}],"predecessor-version":[{"id":27402,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/21683\/revisions\/27402"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media\/21687"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=21683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=21683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=21683"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=21683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}