Site-urile statice pot găzdui tot felul de site-uri web din portofoliul dvs. personal, până la o pagină de destinație a companiei sau chiar un blog.

Principalul avantaj al site-urilor statice este că sunt ușor de gestionat. De asemenea, sunt foarte rentabili. Și cu site-urile statice, nu aveți nevoie de servicii complexe de gestionare a conținutului (CMS) care rulează pe servere tot timpul (chiar dacă nu aveți trafic).

În această postare, veți învăța cum să găzduiți un site static în cloud AWS în 4 pași, folosind AWS Amplify și Traseul 53. Și cea mai bună parte? Nu te va costa aproape nimic în fiecare lună.

Ce este un site static?

Site-urile web statice sunt site-uri web servite de la un server de stocare sau o rețea de livrare a conținutului (CDN). Nu este nevoie să aveți un server care rulează pentru a crea fișierele HTML.

Aceste site-uri web sunt pre-construite ca fișiere HTML care sunt stocate undeva pe internet și apoi servite așa cum au fost construite.

ad-banner

Site-urile statice pot avea conținut dinamic, dar acesta este tratat din partea clientului folosind JavaScript sau unele integrări ale unor terțe părți folosind API-uri.

Unele avantaje ale utilizării unui site static sunt:

  • Sunt ușor de scalat
  • Dacă utilizați un CDN, timpul de încărcare este rapid
  • Sunt rentabile
  • Sunt ușor de întreținut

De exemplu, a mea Site personal este un bun exemplu de site static:

Site-ul personal al Marcia
Site-ul personal al Marcia

Ce este AWS?

AWS înseamnă Amazon Web Services și este cea mai adoptată platformă cloud. Are o mulțime de servicii diferite pentru a vă ajuta să vă dezvoltați și să găzduiți aplicațiile.

AWS are, de asemenea, centre de date în întreaga lume și milioane de clienți îl folosesc.

Folosind cloud-ul pentru aplicațiile dvs., veți reduce costurile, vă veți ajuta să deveniți mai agili și vă va permite să inovați mai repede decât dacă ați folosi propriile servere locale.

Pasul 1 – Configurați contul AWS

Primul pas în acest proces este de a obține un Cont AWS. Veți găzdui pagina statică în cloud și, pentru aceasta, trebuie să aveți un cont AWS valid.

Dacă abia acum vă creați contul, nivel gratuit ar trebui să fie suficient pentru acest proiect. Nivelul gratuit vă va oferi acces la o mulțime de servicii AWS gratuit în primele 12 luni.

De exemplu, veți obține 5 GB spațiu de stocare gratuit. Este minunat, deoarece avem nevoie de spațiu de stocare pentru a salva site-ul nostru static în cloud.

Rețineți că deținerea unui cont AWS este gratuită dacă nu utilizați niciun serviciu. Nu veți fi taxat pentru crearea contului și, dacă nu îl utilizați, nu va fi taxat nimic.

Pentru a crea un cont AWS, puteți urma pașii din acest videoclip:

Pasul 2 – Creați site-ul static și configurați-l cu AWS Amplify

Chiar acum, după ce ați citit titlul, s-ar putea să vă întrebați, ce este AWS Amplify?

AWS Amplify este un cadru open-source care oferă funcții care vă ajută să creați aplicații web și mobile native în cloud. Are 4 componente:

  • CLI-ul Amplify
  • bibliotecile Amplify
  • componentele UI Amplify și
  • Consola Amplify.

CLI-ul Amplify vă ajută să configurați toate serviciile de care aveți nevoie pentru a crea un backend cloud pentru aplicația dvs. utilizând interfața din linia de comandă.

Bibliotecile vă ajută să vă integrați aplicațiile client direct cu serviciile de backend.

Componentele Amplify UI sunt biblioteci UI special pentru React, React Native, Angular, Ionic și Vue care vă vor ajuta să vă dezvoltați cu ușurință aplicația nativă în cloud.

În cele din urmă, Amplify Console este un serviciu AWS care oferă un flux de lucru bazat pe git pentru implementare continuă și pentru găzduirea aplicațiilor web și mobile full-stack.

În acest post nu vom folosi toate capacitățile AWS Amplify, ci vom folosi doar Consola. Dar vă recomand să verificați câteva tutoriale despre cum să construiți aplicații mai complexe utilizând AWS Amplify.

Creați site-ul static

Acum aveți tot ce aveți nevoie pentru a începe cu site-ul dvs. static. Pentru această demonstrație, orice HTML static va funcționa. Tocmai am creat un fișier numit index.html și am adăugat acest cod în interiorul său:

<html>
    <h1>Hello Foobar</h1>
    <p>This is my super simple site</p>
</html>

Încărcați-l în AWS Amplify Console

După ce avem site-ul static, următorul pas este să mergem la Serviciul AWS Amplify din consola AWS.

Găsirea serviciului AWS Amplify în AWS Console
Găsirea serviciului AWS Amplify în AWS Console

Atunci când serviciul se deschide, veți vedea ceva de genul acesta:

Consola AWS Amplify
Consola AWS Amplify

Apasă pe Conectați aplicația buton și apoi vi se va prezenta această pagină:

Opțiuni pentru implementarea proiectului dvs. existent
Opțiuni pentru implementarea proiectului dvs. existent

Apoi puteți selecta Implementați fără un furnizor Git și continuă.

Vi se va prezenta o pagină pentru a vă implementa manual aplicația. Acolo, alegeți un numele aplicatiei si un mediu inconjurator Nume și apoi puteți trage dosarul aplicației în browser.

Lansarea unei implementări manuale în AWS Amplify
Lansarea unei implementări manuale în AWS Amplify

Când aplicația termină încărcarea, veți vedea un mesaj care spune „Implementarea a fost finalizată cu succes”.

Acum site-ul dvs. web este găzduit în cloud. Accesați linkul care se află sub Domeniu text. Acest lucru vă va duce la site-ul static instalat.

1611525308 752 Cum sa gazduiesti un site static in cloud in patru

Pasul 3 – Cumpărați un domeniu pentru site-ul dvs. web

Acum este timpul să obțineți un domeniu pentru site-ul dvs. web. Împărtășind asta Domeniu link-ul nu este foarte practic și un domeniu poate fi un mod mai simplu de a vă denumi site-ul web.

Pentru asta trebuie să intri în interiorul tău Cont AWS la un serviciu numit Route53.

Găsirea serviciului Route53 în consola AWS
Găsirea serviciului Route53 în consola AWS

Atunci când se deschide Traseul 53, puteți merge la un link care spune Înregistrați domeniul, și apare o pagină ca aceasta.

1611525308 238 Cum sa gazduiesti un site static in cloud in patru

Aici trebuie să alegeți un nume de domeniu. Domeniile sunt facturate anual și au costuri diferite în funcție de final (cum ar fi .com, .net și așa mai departe).

După ce alegeți un nume de domeniu, îl puteți adăuga pe card. Apoi, urmați instrucțiunile pe care le oferă Route53.

Pasul 4 – Configurați domeniul în aplicația AWS Amplify

Acum că aveți domeniul, este timpul să reveniți la aplicația AWS Amplify – cea pe care tocmai ați configurat-o.

Apoi, în stânga, faceți clic pe Administrarea domeniului link și această pagină se deschide:

Adăugarea unui domeniu pe site-ul dvs.
Adăugarea unui domeniu pe site-ul dvs.

domeniu caseta de text va sugera domeniul pe care tocmai l-ați înregistrat. Doar alegeți-l, acceptați toate configurațiile implicite, apoi faceți clic Salvați.

După aceea, veți fi direcționat către o pagină unde vor fi configurate domeniul și certificatul SSL. Nu trebuie să faceți nimic în acel pas, așteptați până când totul este configurat. Durează ceva, așa că aveți răbdare.

Acum ați terminat, astfel încât să puteți merge pe noul dvs. domeniu și să vedeți pagina statică.

Cum se actualizează acest site

Acum, de fiecare dată când trebuie să schimbați ceva în site-ul dvs. static, trebuie să mergeți la AWS Amplify și să actualizați fișierele. Practic, veți plasa directorul în aplicația Amplify.

Actualizarea site-ului static
Actualizarea site-ului static

Concluzie

Acum aveți un site static găzduit în cloud. Acest site este foarte scalabil și fiabil. Site-ul este găzduit folosind AWS CDN numit AWS CloudFormation, deci acest lucru va face site-ul dvs. foarte rapid pentru utilizatorii dvs.

Costul total al găzduirii după ce contul dvs. AWS depășește 12 luni va fi de aproximativ $0,50 USD până la 4 USD pe lună, în funcție de cât de mare este site-ul dvs. și de cât trafic obțineți.

Celălalt cost anual pe care îl veți avea este domeniul care poate începe de la 9 USD pe an.

Și dacă doriți să faceți acest lucru puțin mai automat, vă recomand să vă uitați AWS Amplify implementează automat utilizând Github.

Mulțumesc pentru lectură.

Sunt Marcia Villalba, avocat dezvoltator pentru AWS și gazda unui canal YouTube numit FooBar, unde am peste 250 de tutoriale video despre Serverless, AWS și practicile inginerilor de software.