AWS Statikus weboldal
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
- Jelentkezz be az AWS fiókodba.
- Keresőben keresd meg az S3-at
- Hozz létre egy bucketet az S3 felületén a Create bucket gombra kattintva
- 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
- Kattints a lapalján a Create bucket gombra
- Megnyitjuk a bucket-et
- Properties fülre megyünk és legörgetünk a lap aljára
- Static website hosting részt szerkesszük és engedélyezzük
- Adjuk meg a megfelelő helyen az index.html és error.html fájlok nevét
- Mentsük el a változásokat
- Permission fülre menjünk át
- Keressük meg a Bucket policy részt
- Edit gomb megnyomásával szerkeszthetjük is
- Az itt szereplő mezőbe másoljuk be a bucket-policy.json fájl tartalmát, majd mentsük el
- Görgessünk a lap aljára és mentsük el a változásokat
Fájlok feltöltése S3 bucket-be
- Menjünk a Objects fülre
- Upload gombra kattintva kezdjük el a fá ljok feltöltését (Add files)
- Amikor a fájlok feltöltésre kerültek navigáljunk át a Properties fülre és görgessünk a lap aljára
- És ott találjuk a weboldalunk linkjét. (formátum: http://<bucket neve>.s3-website.<aws régió neve>.amazonaws.com)
- Ha ezt megnyitjuk, akkor láthatjuk a weboldalunkat
- 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:
- Jelentkezz be az AWS fiókodba.
- Keresőben keresd meg az Route 53-at
- Lépjünk be a domain zónába, ami a domain nevünkhöz tartozik
- Create record gombra kattintva elkezem a dns bejezés létrehozását
- Átváltunk a varázsló nézetre, a Switch to wizard linkre kattintva
- Válasszuk a Simple routing lehetőséget, majd Next gomb
- Define simple record gombra kattintva folytatjuk a beálltást
- 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
- Define simple record gombra kattintva elmentjük a változásokat
- A teljes véglegesítéshez kattintsunk a Create record gombra
- Ezzel létrejött a domainhez tartozó DNS bejegyzés, és használatba is vehetjük azt.
- 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ű. 🙂