• Jeroen De Deken
  • AWS Amplify
  • HTML
  • Github

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.