Sådan hostes et statisk sted i skyen i fire trin

Statiske websteder kan være vært for alle slags websteder fra din personlige portefølje til en virksomheds destinationsside eller endda en blog.

Den største fordel ved statiske websteder er, at de er enkle at administrere. De er også meget omkostningseffektive. Og med statiske websteder har du ikke brug for komplekse indholdsadministrationstjenester (CMS), der kører på servere hele tiden (selvom du ikke har nogen trafik).

I dette indlæg lærer du at være vært for et statisk websted i AWS-skyen i 4 trin ved hjælp af AWS Amplify og Route 53. Og den bedste del? Det koster dig næsten intet hver måned.

Hvad er et statisk websted?

Statiske websteder er websteder, der serveres fra en lagringsserver eller et indholdsleveringsnetværk (CDN). Det er ikke nødvendigt at have en kørende server, der opretter HTML-filerne.

Disse websteder er forudbyggede som HTML-filer, der er gemt et eller andet sted på internettet og derefter tjent som de blev bygget.

Statiske websteder kan have dynamisk indhold, men det håndteres på klientsiden ved hjælp af JavaScript eller nogle tredjepartsintegrationer ved hjælp af API'er.

Nogle fordele ved at bruge et statisk sted er:

  • De er lette at skalere
  • Hvis du bruger et CDN, er indlæsningstiderne hurtige
  • De er omkostningseffektive
  • De er nemme at vedligeholde

For eksempel er min personlige hjemmeside et godt eksempel på et statisk sted:

Marcias personlige hjemmeside

Hvad er AWS?

AWS står for Amazon Web Services og er den mest udbredte cloudplatform. Det har mange forskellige tjenester, der hjælper dig med at udvikle og være vært for dine applikationer.

AWS har også datacentre over hele verden, og millioner af kunder bruger det.

Ved hjælp af skyen til dine applikationer sænker du omkostningerne, hjælper dig med at blive mere adræt og giver dig mulighed for at innovere hurtigere, end hvis du brugte dine egne lokale servere.

Trin 1 - Opsæt din AWS-konto

Det første trin i denne proces er at få en AWS-konto. Du skal være vært for din statiske side i skyen, og for at du skal have en gyldig AWS-konto.

Hvis du lige nu opretter din konto, skal det gratis niveau være tilstrækkeligt til dette projekt. Det gratis niveau giver dig adgang til mange AWS-tjenester gratis i de første 12 måneder.

For eksempel får du 5 GB gratis lagerplads. Det er fantastisk, da vi har brug for opbevaring for at gemme vores statiske websted i skyen.

Husk, at det at have en AWS-konto er gratis, hvis du ikke bruger nogen tjenester. Du vil ikke blive opkrævet noget gebyr for oprettelse af kontoen, og hvis du ikke bruger kontoen, vil der ikke blive opkrævet noget.

For at oprette en AWS-konto kan du følge trinene i denne video:

Trin 2 - Opret dit statiske sted og konfigurer det med AWS Amplify

Lige nu efter at have læst denne overskrift undrer du dig måske over, hvad er AWS Amplify?

AWS Amplify er en open source-ramme, der giver funktioner, der hjælper dig med at opbygge cloud-native web- og mobilapplikationer. Den har 4 komponenter:

  • Amplify CLI
  • Amplify-bibliotekerne
  • Amplify UI Components, og
  • Amplify Console.

Amplify CLI hjælper dig med at konfigurere alle de tjenester, du har brug for for at oprette en cloud-backend til din applikation ved hjælp af kommandolinjegrænsefladen.

Bibliotekerne hjælper dig med at integrere dine klientapplikationer direkte med backend-tjenesterne.

Amplify UI-komponenterne er UI-biblioteker specielt til React, React Native, Angular, Ionic og Vue, der hjælper dig med at udvikle din cloud-native applikation let.

Endelig er Amplify Console en AWS-tjeneste, der giver en git-baseret arbejdsgang til kontinuerlig implementering og til hosting af fuld stack web- og mobilapplikationer.

I dette indlæg vil vi ikke bruge alle funktionerne i AWS Amplify, vi skal bare bruge konsollen. Men jeg anbefaler, at du tjekker nogle tutorials om, hvordan du bygger mere komplekse applikationer ved hjælp af AWS Amplify.

Opret det statiske sted

Nu har du alt hvad du behøver for at komme i gang med dit statiske websted. Til denne demo fungerer enhver statisk HTML. Jeg har lige oprettet en fil kaldet index.html og tilføjet denne kode inde i den:

Hello Foobar

This is my super simple site

Upload det til AWS Amplify Console

Når vi har det statiske sted, er det næste trin at gå til AWS Amplify-tjenesten i AWS-konsollen.

Find AWS Amplify-tjenesten i AWS-konsollen

Når denne tjeneste åbnes, vil du så se noget som dette:

AWS forstærke konsol

Klik på knappen Connect-app, så får du vist denne side:

Indstillinger for implementering af dit eksisterende projekt

Derefter kan du vælge Implementere uden en Git-udbyder og fortsætte.

Du får en side til manuel implementering af din app. Der kan du vælge en app navn og et miljø navn og derefter kan du trække din ansøgning mappe i browseren.

Start af en manuel implementering i AWS Amplify

Når applikationen er uploadet, ser du en meddelelse, der siger "Implementering fuldført vellykket".

Nu er dit websted hostet i skyen. Gå til det link, der er under domæneteksten . Det fører dig til dit netop indsatte statiske sted.

Trin 3 - Køb et domæne til dit websted

Nu er det tid til at få et domæne til dit websted. At dele dette domæne- link er ikke særlig praktisk, og et domæne kan være en enklere måde at navngive dit websted på.

Til det skal du gå ind i din AWS-konto til en tjeneste kaldet Route53.

Find tjenesten Route53 i AWS-konsollen

Derefter, når rute 53 åbnes, kan du gå til et link, der siger Registrer domæne , og en side som denne vises.

Her skal du vælge et domænenavn. Domæner faktureres årligt, og de har forskellige omkostninger afhængigt af slutningen (som .com, .net osv.).

Når du har valgt et domænenavn, kan du føje det til kortet. Følg derefter de instruktioner, som Route53 giver.

Trin 4 - Konfigurer domænet i din AWS Amplify-app

Nu hvor du har domænet, er det tid til at komme tilbage til din AWS Amplify-app - den du lige har konfigureret.

Derefter til venstre klikker du på linket Domænestyring, og denne side åbnes:

Tilføjelse af et domæne til dit websted

Den domænenavn tekstfeltet vil foreslå det domæne, du netop registreret. Vælg det, accepter alle standardkonfigurationer, og klik derefter på Gem .

Derefter bliver du sendt til en side, hvor domænet og SSL-certifikatet vil blive konfigureret. Du behøver ikke at gøre noget i det trin, bare vent, indtil alt er konfigureret. Det tager et stykke tid, så vær tålmodig.  

Nu er du færdig, så du kan gå til dit nye domæne og se din statiske side.

Sådan opdateres dette websted

Hver gang du har brug for at ændre noget på dit statiske sted, skal du gå til AWS Amplify og opdatere filerne. Dybest set slipper du bare biblioteket i Amplify-appen.

Opdatering af dit statiske websted

Konklusion

Nu har du et statisk sted hostet i skyen. Dette websted er meget skalerbart og pålideligt. Webstedet hostes ved hjælp af AWS CDN kaldet AWS CloudFormation, så dette vil gøre dit websted meget hurtigt for dine brugere.

De samlede omkostninger ved hosting efter din AWS-konto er ældre end 12 måneder vil være omkring $ 0,50 USD til $ 4 USD pr. Måned afhængigt af hvor stort dit websted er, og hvor meget trafik du får.

De andre årlige omkostninger, du har, er det domæne, der kan starte fra $ 9 USD om året.

Og hvis du vil gøre dette lidt mere automatiseret, anbefaler jeg at se på AWS Amplify automatiske implementeringer ved hjælp af Github.

Tak for læsningen.

Jeg er Marcia Villalba, Developer Advocate for AWS og vært for en YouTube-kanal kaldet FooBar, hvor jeg har over 250 video-tutorials om praksis uden serverless, AWS og softwareingeniør.

  • Twitter: //twitter.com/mavi888uy
  • Youtube: //youtube.com/foobar_codes