cloudservices

| Olvasási idő: 3 perc |

Az egyszerű, gyors és költséghatékony weboldalhosztolás egyik legjobb módja, ha statikus weboldalunkat az AWS-re helyezzük. Ebben a bejegyzésben videóban lépésre bemutatom, hogyan lehet egy statikus weboldalt S3-ban tárolni, a publikus elérést beállítani. Ideális megoldás portfóliók, dokumentációk vagy egyszerű céges oldalak számára.

Ráadásul a weboldal fejlesztésében ChatGPT is a segítségünkre lesz.

Hogyan készítsd el a weboldaladat (index.html és error.html fájlokkal) ChatGPT segítségével

Hozz létre egy felhasználói fiókot ChatGPT-ben, majd nyiss egy új beszélgetést és add meg neki a következő prompt-ot. (Kedved szerint módosítsd a számodra fontos adatokat. Pl.: Milyen legyen a kinézet és a stílus, mi legyen a domain név, mi legyen a cég neve és profilja)

Szia,

Segíts nekem. Te egy webfejlesztő vagy.

AWS S3 static website-ot szeretnék létrehozni. Ehhez kérlek készíts egy index.html fájlt és egy error.html fájlt. Emellett hozd létre a szükséges bucket policy-t is. A bucket neve a domain neve legyen.

Az index.htm egy komplex, modern, letisztult, színes (fekete, ezüst, mélyzöld), egylapos weboldal legyen ami egy magyar startup cég weboldala lesz. 

Cég neve: LignumArt
Iparág: Faipar, luxus bútorok egyedi megrendelésre
Domain név: lignumart.mentorcloud.hu

Előre is köszönöm.

Ez alapján legenerálásra kerül 3 fájl tartalma (index.html, error.html, bucket-policy.json) A számítógépeken hozd létre ezeket a fájlokat és másold bele a megfelelő tartalmakat.

S3 bucket konfiguráció és bucket policy beállítása

1. Jelentkezz be az AWS fiókodba.
2. Keresőben keresd meg az S3-at
3. Hozz létre egy bucketet az S3 felületén a Create bucket gombra kattintva
4. A bucket adatai:
   • Név: a te domain-ed neve. Mi esetünkben lignumart.mentorcloud.hu
   • Block all public access részből vedd ki az összes jelölőt
   • Nyugtázd, hogy elfogadod a nyilvános fájlokkal kapcsolatos kockázatokat
5. Kattints a lapalján a Create bucket gombra
6. Megnyitjuk a bucket-et
7. Properties fülre megyünk és legörgetünk a lap aljára
8. Static website hosting részt szerkesszük és engedélyezzük
9. Adjuk meg a megfelelő helyen az index.html és error.html fájlok nevét
10. Mentsük el a változásokat
11. Permission fülre menjünk át
12. Keressük meg a Bucket policy részt
13. Edit gomb megnyomásával szerkeszthetjük is
14. Az itt szereplő mezőbe másoljuk be a bucket-policy.json fájl tartalmát, majd mentsük el
15. Görgessünk a lap aljára és mentsük el a változásokat

Fájlok feltöltése S3 bucket-be

1. Menjünk a Objects fülre
2. Upload gombra kattintva kezdjük el a fá ljok feltöltését (Add files)
3. Amikor a fájlok feltöltésre kerültek navigáljunk át a Properties fülre és görgessünk a lap aljára
4. És ott találjuk a weboldalunk linkjét. (formátum: http://<bucket neve>.s3-website.<aws régió neve>.amazonaws.com)
5. Ha ezt megnyitjuk, akkor láthatjuk a weboldalunkat
6. Ezzel gyakorlatilag készen vagyunk 🙂

Saját domain használata a weboldalhoz

Itt a Route 53 szolgáltatást fogjuk használni egyéni domain rendeléssel. A példánkban feltételezzük, hogy AWS.ben már beállítottuk a domain zónánkat (Route 53 hosted zone).

Az alábbi lépéseket kell követned:

1. Jelentkezz be az AWS fiókodba.
2. Keresőben keresd meg az Route 53-at
3. Lépjünk be a domain zónába, ami a domain nevünkhöz tartozik
4. Create record gombra kattintva elkezem a dns bejezés létrehozását
5. Átváltunk a varázsló nézetre, a Switch to wizard linkre kattintva
6. Válasszuk a Simple routing lehetőséget, majd Next gomb
7. Define simple record gombra kattintva folytatjuk a beálltást
8. Itt az alábbiakat állítjuk be
   • Record name: az általunk választott aldomain neve (mi esetünkben: lignumart), ha a fő domain nevünket akarjuk itt beállítani, akkor ezt hagyjuk üresen
   • Record type: A
   • Value/Route traffic to: Amazon S3 website endpoint
   • Régió: az a régió ahová a bucket-ünket létrehoztuk
   • Végpont neve: a legördülő menüben megjelenik a mi S3 bucket-ünk
9. Define simple record gombra kattintva elmentjük a változásokat
10. A teljes véglegesítéshez kattintsunk a Create record gombra
11. Ezzel létrejött a domainhez tartozó DNS bejegyzés, és használatba is vehetjük azt.
12. Nyissuk meg böngészőnkben a megfelelő linket: http://<én domain nevem amit használtam> (mi példánkban: http://lignumart.mentorcloud.hu)

Ezzel elérhetővé vált mindenki számára a weboldalunk, az általunk beállított saját domain nevén.

Próbáld ki te is, és meglátod milyen egyszerű. 🙂