Serverless webhosting met AWS Amplify

IT-ROCKSTAR JEROEN DE DEKEN

 

Het hosten van een website hoeft lang niet meer zo moeilijk en duur te zijn. Door een website serverless te hosten betaal je enkel voor het daadwerkelijke gebruik en dankzij de koppeling met een online repository kan je gebruik maken van CI/CD om deze ook altijd up-to-date te houden. In deze tutorial gaan we gebruik maken van AWS CodeCommit maar je zou dit ook kunnen doen met behulp van GitHub. 

Welke AWS services gaan we gebruiken 

Hieronder een overzicht van de verschillende services die we in deze tutorial gaan gebruiken. Klik op de link als je meer informatie wil over elke service. Als je nieuw bent bij AWS kan je alle stappen volgen zonder dat hier kosten aan verbonden zijn. Mocht jouw free tier al verlopen zijn zou het kunnen dat er wel iets in rekening gebracht wordt. De prijzen bij AWS zijn afhankelijk per regio in AWS dus kijk zelf welke prijzen voor jou van toepassing zijn. 

AWS Amplify Console 

Biedt een op Git gebaseerde workflow voor het hosten van fullstack serverless webapps met continuous deployment. Meer informatie over de prijzen is beschikbaar op deze website 

Er is ondersteuning voor het deployen van Single Page Apps (SPA’s) die zijn gebouwd met frameworks zoals React, Angular, Vue, Ember maar ook voor static websites die zijn gegenereerd met frameworks als Gatsby, Eleventy, Hugo, VuePress en Jekyll. Eenvoudige static websites kunnen ook zonder verbinding met een repository door handmatige implementatie door een upload vanaf jouw lokale pc of door te verwijzen naar een Amazon S3 bucket of een externe URL. 

In deze tutorial houden we het eenvoudig met een single page html om de focus te houden op de AWS Services waar we mee gaan werken. 

AWS CodeCommit  

Source control service voor Git repositories. Meer informatie over de prijzen is beschikbaar op deze website. 

AWS Identity and Access Management (IAM) 

Wordt gebruikt om de gebruikers en de rechten te beheren binnen AWS. Hier zijn geen kosten aan verbonden. 

Laten we beginnen 

Voordat we echt beginnen moet je aanmelden op de aws console met behulp van jouw account, heb je deze nog niet dan kan je deze aanmaken met behulp van de informatie op deze site. Als je bent aangemeld is het ook belangrijk om een regio aan te duiden waarin je wil werken. Gebruik in de console de dropdown rechtsbovenaan om de regio ‘Europe (Ireland) eu-west-1’ te selecteren. Nu is alles klaar om echt aan de slag te gaan. 

De juiste service terugvinden in AWS kan op meerdere manieren. De optie die ik het makkelijkste vind is door links bovenaan de dropdown ‘Services’ uit te klappen en de service naam in te vullen in de zoekbalk. 

Aanmaken van een repository 

Dit doen we zoals gezegd met behulp van de service CodeCommit, open deze service in de AWS console 

Afbeelding met tekst

Automatisch gegenereerde beschrijving 

  1. Selecteer ‘Create repository’ 

  1. Geef de repository de naam ‘ServerlessWebhosting’ 

  1. Nadat je op ‘Create’ hebt geklikt is de nieuwe repository aangemaakt 

Rechten toewijzen aan IAM gebruiker 

Ga hiervoor naar de service IAM in de AWS console 

  1. Klik op ‘Users’ in het linker menu om het beheer scherm van de gebruikers te openen 

  1. Selecteer jouw gebruikersnaam en selecteer de tab ‘Security Credentials’ 
    Afbeelding met tekst

Automatisch gegenereerde beschrijving 

  1. Ga op zoek naar het onderdeel ‘HTTPS Git credentials for AWS CodeCommit’ en klik op ‘Generate’. Dit zal ervoor zorgen dat een naam en paswoord gegenereerd is. 
    Afbeelding met tekst

Automatisch gegenereerde beschrijving 

  1. Bewaar de gegevens door op ‘Download credentials’ te klikken, om veiligheids redenen is het niet mogelijk om deze later terug te zien dus let op dat je deze niet kwijtraakt. Sluit daarna het scherm. 
     

Clone de repository lokaal 

Dit doe je weer vanuit de CodeCommit service 

  1. In de details van jouw repository is als het goed de tab ‘HTTPS’ geselecteerd, klik op de ‘copy’ knop bij stap 3 van deze pagina. 
    Afbeelding met tekst

Automatisch gegenereerde beschrijving 

  1. Gebruik jouw favoriete terminal en voer daar het gekopieerde commando uit. Hier zal je de credentials die je eerder hebt aangemaakt nodig hebben. Je krijgt een waarschuwing dat je een lege repository hebt binnengehaald maar dit is normaal. Hierna zal de repository op jouw apparaat beschikbaar zijn in de submap ‘ServerlessWebhosting’. 

Website maken 

Nu gaan we de website zelf maken. Gebruik hiervoor een willekeurige text editor 

  1. Ga naar de directory ‘ServerlessWebhosting’ die je zonet hebt aangemaakt 

  1. Maak een nieuwe file aan met de naam ‘index.html’ 

  1. Plak de volgende text in de inhoud van deze file 
    <html> 
    <head> 
      <title>Serverless webhosting with AWS Amplify</title> 
    </head> 
    <body style="background: black; color: #FFE000"> 
    <div>Welcome to my first website on AWS</br>Powered by Team Rockstars IT</div> 
    </body> 
    </html> 

Commit de aanpassingen 

Dit doe je weer vanuit de terminal en voor de mensen die bekend zijn met Git gebeurd er niets bijzonders maar voor de rest even de commando’s die je moet uitvoeren 

$ git add . 
$ git commit -m ‘new’ 
$ git push 

Afbeelding met tekst

Automatisch gegenereerde beschrijving 

Als je nu in CodeCommit kijkt naar de repository ‘ServerlessWebhosting’ zal je zien dat daar de nieuwe file aan is toegevoegd. Mogelijk moet je eerst het scherm refreshen. 

Afbeelding met tekst

Automatisch gegenereerde beschrijving 

Hosten van de website 

Om de website beschikbaar te maken voor de hele wereld moeten we deze nog hosten, dit doen we met behulp van de service ‘AWS Amplify’ 

 

  1. Klik op de ‘Get started’ knop onder deploy 
     

  1. Selecteer ‘CodeCommit’ en klik ‘Continue’ 
     

  1. In het nieuwe scherm selecteer je ‘ServerlessWebhosting’ bij de repository, je kan verbinden met meerdere branches maar vandaag hebben we ons beperkt tot slechts 1 dus deze kan je op ‘master’ laten staan en op ‘Next’ klikken 
     

  1. De build settings laten we ook even standaard, klik ook hier op ‘Next’ 

  1. In het Review scherm kan je nog eens terugzien wat je hebt geselecteerd en als je hier akkoord mee bent klik je op ‘Save and deploy’ 
     

  1. Je zal zien dat Amplify nu aan de slag gaat om alles online te brengen.