de Paul Berg

Cum să găzduiești un site web static cu S3, CloudFront și Route53

Cum sa gazduiesti un site web static cu S3 CloudFront

De curând mi-am configurat personalul auto-găzduit blog și am subestimat efortul pe care trebuia să-l depun pentru a-l face exact așa cum îmi doream. Așa că am decis să scriu un tutorial pentru a-i ajuta pe alții să o facă cu mai puține cheltuieli generale.

Acest articol va intra în detalii detaliate despre cum să bifați toate casetele de mai jos, cu accent pe componentele backend.

  1. Găzduire plătită
  2. Certificat SSL
  3. Subdomeniul funcțional www
  4. Design foarte personalizabil, dar minimalist
  5. Articole bazate pe reduceri

Pentru 4 și 5 de mai sus, am folosit Hugo cu Minim temă.

Avertisment

Rețineți că acesta este un tutorial detaliat, destinat celor care apreciază flexibilitatea și interoperabilitatea cu alte servicii AWS mai mult decât orice altceva. Dacă doar căutați ceva ușor și rapid, vă recomandăm să folosiți Netlify sau Amplifica.

Condiții prealabile

Voi presupune în continuare că:

  1. V-ați proiectat și v-ați codat site-ul sau cel puțin aveți o machetă.
  2. Aveți un cont AWS (dacă nu, mergeți înregistrați unul. Conturile AWS includ un an de acces gratuit la nivel).
  3. Sunteți familiarizat cu DNS și cum functioneaza, cel puțin la un nivel înalt.

În ceea ce privește DNS, o explicație rapidă este că este un fel de director al internetului și, la fel cum deține Google google.com, puteți deține propriul dvs. domeniu, cum ar fi example.com de asemenea. Pentru a face acest lucru, trebuie să mergeți la un registrator DNS și să cumpărați domeniul dorit. Recomand cu tărie utilizarea Namecheap ca registrator, deoarece au o interfață de utilizare minunată și prețuri mici. Ca alternativă, ai putea alege Hai tăticu.

În cazul în care domeniul dvs. „.com” este preluat și doriți câteva mashup-uri inteligente, următoarele site-uri ar fi de ajutor:

După ce îl achiziționați, nu setați încă nicio înregistrare DNS. Vom face asta mai târziu, odată ce vom ajunge la Route53.

Gazduire cu Amazon AWS

După cum s-a menționat mai sus, obiectivul este de a utiliza un serviciu pay-as-you-go, deoarece este de departe cea mai rentabilă opțiune de acolo. Plăteam un cost fix în intervalul de zeci de USD pe lună pentru un server, chiar dacă aveam perioade în care abia mai exista activitate pe el.

Cu toate acestea, din experiența mea, v-aș recomanda să mergeți modular și să mergeți cu un serviciu pay-as-you-go, cum ar fi AWS.

Înainte de a intra, este important să înțelegeți nomenclatura:

  • AWS: Amazon Web Services
  • S3: Serviciu de stocare simplu, pentru stocarea fișierelor
  • Route53: un serviciu pentru gestionarea înregistrărilor DNS
  • CloudFront: rețea de livrare a conținutului (CDN) pentru accelerarea site-ului dvs. web, necesară și pentru a genera certificatul SSL

Iată o îngrijire Harta mintii proiectat cu Cloudcraft pentru ceea ce vei construi:

Cum sa gazduiesti un site web static cu S3 CloudFront

Mai întâi ne vom concentra pe calea către partea dreaptă, deci configurația normală (cu Route53, CloudFront și S3), nu cea pentru subdomeniul www. Important, folosind această configurație modulară, nu veți rula deloc niciun server Linux backend, deci nu trebuie să vă faceți griji cu privire la actualizarea sau corecția nimic. Cât de convenabil este asta?

Amazon Simple Stoarage Service (S3)

Aici veți stoca fișierele statice (HTML, CSS, JavaScript). Dacă ați folosit aplicația Create React sau un alt cadru de dezvoltare frontend, căutați folderul „build” sau „public” generat.

1611324250 405 Cum sa gazduiesti un site web static cu S3 CloudFront

Iată ce trebuie să faceți:

  1. Configurați o găleată S3 numită „example.com”. Observați că numele cupei S3 sunt global și, la fel ca în cazul domeniilor, va trebui să găsiți un alt nume dacă cineva a luat example.com înaintea ta. Pe baza nevoilor dvs., puteți activa sau dezactiva opțiunile pe care AWS le oferă: versionare, înregistrare acces server, criptare etc.
  2. Asigurați-vă că debifați casetele care menționează blocarea și eliminarea ACL-urilor și politicilor de acces public. De multe ori, cupele S3 sunt folosite pentru a stoca date private, astfel încât AWS optimizează configurația pentru configurații extrem de sigure. Totuși, în cazul dvs., doriți ca bucketul să fie accesibil publicului.
  3. Asigurați-vă că setați o politică, iată o exemplu.
  4. Activați „Găzduirea statică a site-ului web” pentru bucket și bifați „Utilizați acest bucket pentru a găzdui un site web”
  5. Încărcați fișierele, asigurându-vă că „index.html” se află la baza rădăcinii

Toate operațiunile de mai sus se pot face folosind fie Consola Web AWS Management sau AWS CLI. Cu toate acestea, în special pentru pasul 4, aș recomanda să o faceți în consolă, astfel încât să puteți obține punctul final pentru noul dvs. site găzduit (am ascuns-o pe a mea din motive de confidențialitate):

1611324250 105 Cum sa gazduiesti un site web static cu S3 CloudFront

Testați-l în browser pentru a vă asigura că ați configurat corect cupa S3. Ar trebui așa:

example.com.s3-website.your-region.amazonaws.com

CloudFront

Pentru a găzdui un site web static, nu aveți de fapt nevoie de CloudFront sau de orice alt CDN, deoarece nu există multe date de stocat, iar câștigurile în eficiență și UX sunt mici. Cu toate acestea, unul dintre obiectivele inițiale a fost acela de a avea un site web securizat printr-un certificat SSL, așa că vom folosi CloudFront.

1611324250 131 Cum sa gazduiesti un site web static cu S3 CloudFront

Acum, este posibil să fi auzit despre CloudFlare, care este, fără îndoială, cel mai simplu mod de a porni și a rula cu un CDN și oferă, de asemenea, avantajul unei anumite securități SSL. Spun „unele” pentru că au această caracteristică înșelătoare numită „SSL flexibil”, care nu are garanțiile de securitate un certificat SSL auto-semnat are.

Prin urmare, nu veți folosi acest lucru, ci veți folosi un serviciu similar în AWS numit CloudFront. Vă puteți gândi că are propriile servere de distribuție a conținutului, deoarece datele sunt stocate în cache în mai multe locații din întreaga lume pentru a oferi utilizatorilor dvs. timpi de răspuns rapid. Mai important pentru site-ul static, face posibilă și utilizarea unui certificat SSL.

Din nou, vă puteți crea distribuția CloudFront utilizând interfața de administrator AWS sau instrumentul CLI. Iată un exemplu configurare.

Avertismente:

  1. Numele de origine ar trebui să fie punctul final pe care l-ați obținut după activarea „Găzduirii statice a site-urilor web” pe bucket-ul dvs. S3.
  2. NU setați niciun „DefaultRootObject”. Lasă-l gol.
  3. Permiteți atât HTTP, cât și HTTPS. Veți putea redirecționa automat utilizatorii de la HTTP la HTTPS după ce certificatul este semnat și instalat.

Asigurați-vă că așteptați un timp pentru ca distribuția să pornească corect (poate dura până la 15 minute). Testați-l deschizând punctul final pe care îl primiți, site-ul dvs. static S3 ar trebui să apară. Punctul final ar trebui să arate astfel:

13fb4knzujxq0b.cloudfront.net

Notați punctul dvs. final CloudFront undeva, deoarece îl vom folosi cu Route53 într-o secundă.

Traseul53

Este timpul să conectați domeniul pe care l-ați cumpărat de la registratorul dvs. DNS cu CloudFront și S3. Route53 acționează ca pod pentru asta.

1611324251 632 Cum sa gazduiesti un site web static cu S3 CloudFront

Iată ce va trebui să faceți pentru a configura Route53 și a conecta domeniul cu CloudFront:

  1. Creați o zonă găzduită Route53 și setați-vă domeniul. Faceți-o publică.
  2. Veți primi 4 înregistrări NS. Copiați și lipiți serverele de nume în pagina dvs. de administrare a domeniului extern. Dacă folosiți Namecheap, iată cum vă puteți actualiza serverele de nume. În cadrul Namecheap, accesați Cont -> Tablou de bord -> Gestionați -> Servere de nume -> DNS personalizat și introduceți cei 4 servere de nume acolo:
1611324251 779 Cum sa gazduiesti un site web static cu S3 CloudFront

3. Creați un set de înregistrări și lăsați numele gol (va fi implicit la example.com). Atunci ar trebui să:

  • Setați tipul la „A – adresă IPv4”
  • Răspundeți cu „Da” la „Alias” și setați ținta alias la adresa URL de distribuție CloudFront.
  • Păstrați politica de rutare ca „Simplă” și, pe baza bugetului și nevoilor dvs., activați sau dezactivați „Evaluați sănătatea țintă”.

4. Repetați pasul 3 pentru tipul „AAAA – adresă IPv6” dacă ați activat distribuția CloudFront pentru a fi compatibilă cu IPv6. Dacă ați urmat acest tutorial, IPv6 a fost activat în mod implicit.

Rețineți că propagarea DNS poate dura până la 72 de ore, deși ar trebui să fie actualizat în mod normal în câteva ore sau mai repede. Dacă ați setat anterior orice alte înregistrări DNS (cum ar fi MX pentru e-mailurile de serviciu), va trebui să le resetați în Route53.

Configurarea subdomeniului WWW

Felicitări pentru că ai ajuns până aici! Îmi pare rău să vă anunț că acum trebuie să repetați toți cei trei pași anteriori. Da, ai auzit bine, din cauza modului evaziv de funcționare a internetului, www nu este ceva inclus ca componentă holistică a HTTP.

Este important să subliniem că nu este obligatoriu să adăugați un subdomeniu www pe site-ul dvs. și puteți trece în siguranță la pasul următor dacă sunteți bine că utilizatorii finali nu vă pot accesa site-ul web prin www.example.com. Am fost un pic pedant în legătură cu asta și a trebuit pur și simplu să adaug subdomeniul www.

Note:

  1. Refaceți doar pașii pentru S3, CloudFront și Route53, la care nu trebuie să mergeți (și nu puteți) Namecheap a cumpara www.example.com.
  2. Pentru toate câmpurile în care ți s-a cerut să pui example.com, acum pus www.example.com.

Dacă vă întrebați dacă prin crearea găleților S3, înseamnă că vi se cere să implementați fișierele statice pe amândouă, răspunsul este nu, nu trebuie să faceți asta. Când activați „Găzduire statică de site-uri web” pentru al doilea compartiment S3, selectați „Redirecționare solicitări” în loc de „Folosiți acest compartiment pentru a găzdui un site web”:

1611324251 710 Cum sa gazduiesti un site web static cu S3 CloudFront

Certificat SSL

LetsEncrypt este unul dintre cele mai bune lucruri care s-au întâmplat pe internet în ultimii doi ani. Au acces democratizat la certificatele SSL și aceasta este o realizare imensă, felicitări pentru ei! Dacă LetsEncrypt a fost atât de util pentru dvs., luați în considerare crearea unui donare.

Acest pas este crucial și, de asemenea, cel mai greu din întregul tutorial, așa că procedați cu atenție. Puteți utiliza fie propria mașină, fie un server Linux pentru a genera certificatul, dar am ales prima opțiune, este mai simplă și mai puțin costisitoare.

  1. Mergeți la certbot-s3front repo și instalați instrumentul. Trebuie să aveți instalat Python și pip.
  2. Urmați instrucțiunile lor, dar (1) săriți părțile S3 și CloudFront, ați făcut deja acest lucru și (2) setați „example.com,www.example.com„ca valoare pentru parametrul„ -d ”(domeniu). Citiți mai multe despre acest lucru în LE forum.
  3. După ce ați generat cu succes certificatul SSL, puteți opțional să activați „Redirecționarea HTTP către HTTPS” pe domeniul dvs. gol (adică „example.com”) distribuție CloudFront. Nu faceți acest lucru pentru „www”, deoarece oricum vă va redirecționa către domeniul gol.
  4. Asigurați-vă că faceți backup pentru /etc/letsencrypt/live/example.com certificat (e).

Note:

  1. Din cauza motive misterioaseNu am putut face ca autentificarea certbot să funcționeze prin setarea variabilelor de mediu „AWS_ACCESS_KEY_ID” și „AWS_SECRET_ACCESS_KEY”. Acest lucru ar putea fi cauzat de faptul că am mai multe profiluri diferite ~/.aws/credentials, dar nu sunt sigur. Pentru a evita o „NoCredentialsError”, trebuie doar să setați temporar un profil „implicit” și certbot va prelua acest lucru.
  2. Dacă ai ghinion ca mine și primești o altă eroare „IAMCertificateId”, verifică această soluție.

ACM

La scurt timp după publicarea acestui articol, o mulțime de oameni au sărit în a spune că ar fi mult mai ușor să folosiți AWS Certificate Manager (ACM) pentru generarea certificatelor. Nu este nevoie să vă gândiți la reînnoiri, dar înseamnă că sunteți blocat cu AWS.

Blocaje

  1. Fără logică de server: acest tutorial se aplică numai site-urilor web statice, deci nu puteți rula nicio logică de backend utilizând un modul Node.js cum ar fi ExpressJS. Pentru aceasta, puteți fie să rotiți o instanță EC2, să scrieți funcții Lambda sau să utilizați Docker prin ECS / Kubernetes.
  2. Certificatele LetsEncrypt expiră în 90 de zile: puteți rezolva acest lucru în două moduri. În primul rând, ați putea seta un memento în calendarul dvs., ceea ce recunosc că este suboptim, dar sunt într-o fază de experimentare, așa că nu mă deranjează un pic de lucru manual. În al doilea rând, ați putea seta o lucrare cron, dar aveți nevoie de un server Linux și să utilizați opțiunile „- reînnoire implicită – text” atunci când interacționați cu certbot.
  3. Previzualizările de linkuri bogate pot fi o mizerie: aceasta ar putea fi o problemă specifică temei mele Hugo, dar cred, de asemenea, că toată lumea dorește să aibă o imagine și o descriere adecvate atunci când își partajează linkurile pe site-ul web. Iată cum am reușit să o fac.

Învelire

Felicitări, aveți acum un site static foarte ieftin, dar totuși extrem de flexibil! Statisticile de facturare pentru 100 – 1000 de vizitatori activi lunari și implementările S3 destul de frecvente sunt între 1 $ și 2 $, deci aceasta este o furt! Pentru utilizare dincolo de aceasta, poate fi necesar să vă actualizați componentele AWS, dar acest lucru nu intră în sfera acestui tutorial.

Dacă sunteți un dezvoltator cu experiență interesat să reproduceți acest tutorial pe mai multe conturi AWS, vă recomandăm să consultați Terraform. Este un instrument super duper cool Infrastructure-as-a-Service pe care îl puteți utiliza pentru a defini S3, CloudFront și Route53 ca fragmente de cod. Nu este tehnologia atât de grozavă?

Sper că veți găsi util acest tutorial! Găsește-mă pe Stare de nervozitate sau Keybase dacă vrei să conversezi.

credite

  • Amazon pentru siglele AWS, S3, CloudFront și Route53

Publicat inițial la paulrberg.com