Statikus webhely hosztolása a felhőben négy lépésben

A statikus webhelyek mindenféle weboldalt befogadhatnak az Ön személyes portfóliójától kezdve a cég nyitóoldaláig vagy akár egy blogig.

A statikus helyek legfőbb előnye, hogy egyszerűen kezelhetők. Nagyon költséghatékonyak is. A statikus webhelyeknél pedig nincs szükség komplex tartalomkezelő szolgáltatásokra (CMS), amelyek folyamatosan a szervereken futnak (még akkor is, ha nincs forgalmuk).

Ebben a bejegyzésben megtudhatja, hogyan lehet egy statikus webhelyet 4 lépésben az AWS felhőben tárolni, az AWS erősítés és az 53-as út használatával. És a legjobb? Minden hónapban szinte semmibe sem kerül.

Mi az a statikus webhely?

A statikus webhelyek olyan webhelyek, amelyeket egy tárolószerver vagy egy tartalomszolgáltató hálózat (CDN) szolgáltat. Nincs szükség futó szerverre a HTML fájlok létrehozásához.

Ezek a webhelyek HTML fájlokként vannak előre elkészítve, amelyeket valahol az interneten tárolnak, majd azok felépítésükkor szolgálnak fel.

A statikus webhelyek tartalmazhatnak dinamikus tartalmat, de az ügyféloldali felületen JavaScript vagy néhány harmadik fél által integrált API-k segítségével integrálják őket.

A statikus webhely használatának néhány előnye:

  • Könnyen méretezhetők
  • Ha CDN-t használ, a betöltési idő gyors
  • Költséghatékonyak
  • Könnyen karbantarthatók

Például a személyes webhelyem jó példa egy statikus webhelyre:

Marcia személyes weboldala

Mi az AWS?

Az AWS az Amazon Web Services rövidítése, és a legszélesebb körben elfogadott felhőplatform. Sok különböző szolgáltatással rendelkezik, amelyek segítenek fejleszteni és tárolni az alkalmazásokat.

Az AWS-nek világszerte adatközpontjai is vannak, és ügyfelek milliói használják.

A felhő használata az alkalmazásokhoz csökkenti a költségeket, segít abban, hogy mozgékonyabbá váljon, és gyorsabb innovációt tesz lehetővé, mintha saját helyszíni szervereit használná.

1. lépés - Állítsa be az AWS-fiókot

Ennek a folyamatnak az első lépése az AWS-fiók megszerzése. Statikus oldalát a felhőben fogja üzemeltetni, ehhez érvényes AWS-fiókkal kell rendelkeznie.

Ha csak most hozza létre fiókját, akkor az ingyenes szintnek elegendőnek kell lennie ehhez a projekthez. Az ingyenes szint számos AWS-szolgáltatáshoz ingyenes hozzáférést biztosít az első 12 hónapban.

Például 5 GB ingyenes tárhelyet kap. Ez nagyszerű, mivel tárhelyre van szükségünk, hogy statikus webhelyünket felhőbe menthessük.

Ne feledje, hogy az AWS-fiók ingyenes, ha nem használ semmilyen szolgáltatást. A fiók létrehozásáért nem számítunk fel díjat, és ha nem használja a fiókot, akkor semmi sem kerül felszámolásra.

AWS-fiók létrehozásához kövesse a videó lépéseit:

2. lépés - Hozzon létre statikus webhelyet és konfigurálja azt az AWS Amplify alkalmazással

Most, miután elolvasta a címsort, elgondolkodhat, mi az AWS Amplify?

Az AWS Amplify egy nyílt forráskódú keretrendszer, amely olyan funkciókat kínál, amelyek segítenek felhőben honos webes és mobil alkalmazások felépítésében. 4 részből áll:

  • az Amplify CLI
  • az Amplify könyvtárak
  • az Amplify UI Components, és
  • az Amplify Console.

Az Amplify CLI segít a parancssori felület használatával konfigurálni az összes olyan szolgáltatást, amelyre szükség van felhő háttérrendszer létrehozásához az alkalmazáshoz.

A könyvtárak segítenek az ügyfélalkalmazások közvetlen integrálásában a háttérszolgáltatásokkal.

Az Amplify UI komponensek kifejezetten a React, React Native, Angular, Ionic és Vue felhasználói felület könyvtárak, amelyek segítenek a felhőben natív alkalmazás egyszerű fejlesztésében.

Végül az Amplify Console egy AWS szolgáltatás, amely git alapú munkafolyamatot biztosít a folyamatos telepítéshez és a teljes verem webes és mobil alkalmazások tárolásához.

Ebben a bejegyzésben nem fogjuk használni az AWS Amplify összes képességét, csak a konzolt fogjuk használni. De azt javaslom, hogy nézzen meg néhány oktatóanyagot arról, hogyan lehet összetettebb alkalmazásokat létrehozni az AWS Amplify használatával.

Hozza létre a statikus webhelyet

Most minden megvan, amire szüksége van a statikus webhely megkezdéséhez. Ennél a bemutatónál bármilyen statikus HTML működik. Most létrehoztam az index.html nevű fájlt, és hozzáadtam ezt a kódot:

Hello Foobar

This is my super simple site

Töltse fel az AWS Amplify Console-ra

Miután megvan a statikus hely, a következő lépés az AWS-konzolon található AWS Amplify szolgáltatás megnyitása.

Az AWS Amplify szolgáltatás megkeresése az AWS konzolon

Amikor a szolgáltatás megnyílik, valami ilyesmit fog látni:

AWS Amplify konzol

Kattintson a Csatlakozás alkalmazás gombra, és ekkor megjelenik ez az oldal:

A meglévő projekt telepítésének lehetőségei

Ezután kiválaszthatja a Telepítés Git-szolgáltató nélkül lehetőséget, és folytathatja.

Megjelenik egy oldal az alkalmazás manuális telepítéséhez. Itt kiválaszthatja az alkalmazás és a környezet nevét , majd áthúzhatja az alkalmazás mappáját a böngészőbe.

Manuális telepítés indítása az AWS Amplify alkalmazásban

Amikor az alkalmazás befejezi a feltöltést, megjelenik egy üzenet, amely azt mondja: "A telepítés sikeresen befejeződött".

Most a webhelyét a felhő tárolja. Lépjen a Domain szöveg alatti linkre . Ezzel eljuthat az éppen telepített statikus webhelyére.

3. lépés - Vásároljon domaint a webhelyéhez

Itt az ideje, hogy domainet szerezzen a webhelyéhez. A Domain link megosztása nem túl praktikus, és a domain egyszerűbb módja lehet a webhely elnevezésének.

Ehhez be kell lépnie az AWS-fiókjában egy Route53 nevű szolgáltatásba.

Az 53-as útvonal keresése az AWS konzolon

Aztán amikor az 53-as út megnyílik, akkor keresse meg a Domain regisztrálása hivatkozást , és megjelenik egy ilyen oldal.

Itt ki kell választania egy domain nevet. A domaineket évente számlázzák, és a költségük a végződéstől függően különböző (például .com, .net és így tovább).

Miután kiválasztott egy domain nevet, hozzáadhatja azt a kártyához. Ezután csak kövesse az Route53 utasításait.

4. lépés - Konfigurálja a tartományt az AWS Amplify alkalmazásban

Most, hogy rendelkezik a domainnel, itt az ideje visszatérni az AWS Amplify alkalmazáshoz - az imént konfigurálthoz.

Ezután a bal oldalon kattintson a Domain kezelés linkre, és ez az oldal megnyílik:

Domain hozzáadása a webhelyéhez

A domain szövegdoboz az imént regisztrált domaint javasolja. Csak válassza ki, fogadja el az összes alapértelmezett konfigurációt, majd kattintson a Mentés gombra .

Ezt követően egy olyan oldalra irányít, ahol a tartomány és az SSL tanúsítvány lesz konfigurálva. Ebben a lépésben nem kell semmit tennie, csak várjon, amíg minden be van állítva. Eltart egy ideig, ezért légy türelmes.  

Most elkészült, így beléphet az új domainjébe, és megtekintheti a statikus oldalát.

A webhely frissítése

Most, amikor valamit módosítania kell a statikus webhelyen, fel kell lépnie az AWS Amplify oldalra, és frissítenie kell a fájlokat. Alapvetően csak el kell dobnia a könyvtárat az Amplify alkalmazásban.

A statikus webhely frissítése

Következtetés

Most egy statikus webhelyet tárol a felhőben. Ez az oldal nagyon skálázható és megbízható. A webhely az AWS CloudFormation nevű AWS CDN használatával van üzemeltetve, így ez nagyon gyorsá teszi webhelyét a felhasználók számára.

Az AWS-fiók 12 hónapnál régebbi tárhelyének teljes költsége havonta 0,50 USD és 4 USD között lesz, attól függően, hogy mekkora a webhelye és mekkora forgalmat ér el.

A másik éves költsége az a domain, amely évente 9 USD-től kezdődhet.

És ha ezt egy kicsit automatizáltabbá akarja tenni, javasoljuk, hogy nézze meg az AWS Amplify automatikus telepítéseit a Github segítségével.

Köszönöm, hogy elolvasta.

Marcia Villalba vagyok, az AWS fejlesztői szószólója és a FooBar nevű YouTube-csatorna házigazdája, ahol több mint 250 oktatóvideóm van a Serverless, AWS és szoftvermérnöki gyakorlatokról.

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