Amikor tavaly létrehoztam az első portfóliómat, arra alapoztam, amit a freeCodeCamp-től tanultam (HTML, CSS és egy kis JavaScript).
Ekkor csak a localhoston néztem meg a portfóliómat, a fájlok megtekintésével a helyi számítógépemen. Nem tudtam semmit arról, hogyan lehet weboldalt online tárolni.
Az első webhelyem fogadásának megtanulása nem volt egyszerű, de nagyszerű tanulási élmény volt. Ha vágyakozó webfejlesztő vagy, vagy csak saját statikus webhelyének elindítása érdekli, remélem, hogy hasznosnak találja ezt az útmutatót.
Kinek szól ez az útmutató?
Ez az útmutató azoknak a kezdőknek szól, akik statikus webhelyet (fix tartalmú webhelyet) akarnak üzemeltetni. Adok egy útmutatót a következőkhöz:
- Hogyan vásárolhat domaint.
- A tartomány konfigurálása külső tárhelyszolgáltatóhoz.
- Hogyan tárolhatja webhelyét az Amazon Web Services (AWS) segítségével.
- Hogyan teheti biztonságossá webhelyét (SSL-tanúsítás) az Amazon Certification Manager használatával.
Lehet, hogy van néhány új terminológia számodra. Kérjük, folytassa, és keresse meg a nem ismert feltételeket. Hasznos linkeket és magyarázatokat tettem oda, ahol megfelelőnek gondoltam.
Mi az a domain név és a DNS (Domain Name System)?
A domain név a webhely címe. Például a thecodinghamster.com. De egy számítógép számára a domain név valójában számok sorozata (IP-cím). Az IP-cím így néz ki: 123.321.0.1
Nem könnyű számunkra hosszú számsorra emlékezni. Tehát a számítógép egy DNS- re utal, hogy a szöveges webhelycímet lefordítsa egy IP-címre, amelyet aztán megérthet. A DNS olyan, mint egy könyvtár.
Megnéztem ezt a nagyszerű videót, amely öt perc alatt elmagyarázza a domain nevet, a DNS-t és annak működését. Kérjük, nézze meg a videó első öt percét, ha érdekli:
Hol lehet megvásárolni a domain nevét?
Domainnevet vásárolhat egy domainnév-nyilvántartótól. Az árak néhány dollártól kezdődnek. Domainneve egyedi. Minden domain név regisztrátor különböző szintű szolgáltatásokat / támogatást kínál. De regisztrálhatja domainjét bármely regisztrátornál.
Mi az a tárhelyszolgáltató?
„Az internetes tárhelyszolgáltatás olyan szolgáltatás, amely internetes szervereket futtat, lehetővé téve a szervezetek és magánszemélyek számára, hogy tartalmat szolgáltassanak az internetre. Különböző szintű szolgáltatások és különféle szolgáltatások állnak rendelkezésre. ”Amikor tárhely szolgáltatót kerestem a webhelyemhez, különböző lehetőségeket tártam fel. Az árak havonta 2,00–5,00 font között mozogtak, különféle tárolási lehetőségekkel 0,5–10 GB között. Az árak elfogadhatónak tűntek, de csak statikus webhelyet akartam csinálni. Volt benne néhány kép, HTML, CSS és JavaScript fájl. Nincs dinamikus tartalom.
Miért pont az AWS?
Néhány további kutatás után megtaláltam az AWS-t. Az AWS ingyenes szint opciót kínál. Lényegében rengeteg ingyenes terméket kap. Némelyikük 12 hónap elteltével jár le, mások pedig örökké ingyenesek. A statikus webhelyek tárolásának egyetlen költsége a hosztolt zóna létrehozásának költsége. Ez havonta 0,50 dollárba került. Tehát elmentem az AWS-szel, és beállítottam a fiókomat.
Az AWS nagyszerű tulajdonsága az ár és megbízható tárhelyszolgáltató. De egy dolgot szem előtt kell tartani, hogy támaszkodik a dokumentációjukra. Amint elkezdtem olvasni, hogy az AWS milyen szolgáltatásokat kínál, gyorsan zavarossá vált! A statikus weboldalak létrehozásához a hivatalos AWS útmutatót használtam. De azon kaptam magam, hogy eltévedek, ha rákattintok egy másik linkre mutató linkre, és így tovább. Más tudnivalókat kezdtem kutatni a tudásbeli hiányosságok pótlására.
Ezt a kiváló útmutatót találtam Victoria Drake-től.
Követtem Victoria Drake útmutatását az AWS mellett, és sikerült elrontanom. De még mindig volt néhány dolog, amelyet nem magyaráztak el, és remélem, hogy ezt kivégzem.
Mielőtt folytatnánk, itt van a teendők listája:
- Végezzen néhány kutatást a domainregisztrátorokról, és vásárolja meg a domain nevét.
- Regisztráljon egy ingyenes fiókot az AWS-nél.
- Nyissa meg mind az AWS dokumentációját, mind Victoria Drake útmutatóját. Használja az útmutatómat a dokumentáció végigviteléhez (remélem, hogy van értelme!).
Essünk neki!
AWS: Hozzon létre egy hosztolt zónát az 53-as úton.
Az 53-as út az összes DNS-kérés kezelése.
Az első dolog, amit be kell állítania, az az 53-as útvonalon tárolt zónája. Ez nagyon egyszerű, ha a domainjét AWS-en keresztül vásárolta. A hosztolt zóna automatikusan létrejön, miután megvásárolta. Ha ezt megtette, akkor ugorjon a következő szakaszra ( Az S3 vödrök beállítása ).
Ha azonban olyan volt, mint én, és egy másik regisztrátoron keresztül vásárolta meg a domain nevét, akkor tegye a következőket.
Ez a következő rész arról szól, hogyan hozhat létre hosztolt zónát az 53-as úton, ha még nem vásárolta meg a domain nevét az AWS-től:
- Lépjen a konzol 53-as útjára, és kattintson a „Tárolt zóna létrehozása” elemre. Töltse ki a domain címét, a megjegyzés nem kötelező, és válassza a „Public Hosted Zone” lehetőséget. Kattintson a „Létrehozás” gombra.
2. Miután létrehozta a tárolt zónát, szüksége van az NS (névkiszolgálók) rekordokra:
3. Lépjen a domain név regisztrátorához és jelentkezzen be. A regisztrátortól függően a beállításai között találnia kell egy "Névszerverek" nevű szakaszt, amelyet szerkeszthet. Másolnia kell az AWS NS rekordokat, és módosítania kell a meglévő NS rekordokat a tartomány beállításaiban.
Felhívjuk figyelmét, hogy az NS-rekord végén ne másolja a pontot / pontot. Például az is legyen „ns-63.awsdns-07.com”, nem pedig „ns-63.awsdns-07.com”.
A terjedése akár 24 órát is igénybe vehet.
Állítsa be az S3 vödröket
Addig beállíthatja az S3 vödröket. Az S3 vödör tárolja a fájlokat, például az index.html fájlt.
Két csoportot kell konfigurálnia a webhelyéhez: 1) sajátdomainnév.com és 2) www.neveddomainneved.com.
Az első csoport a fő csoport, ahova feltölti az összes dokumentumot, például az index.html fájlt. A második vödör átirányítja az első vödörre. Az S3 vödrök beállításához kövesse az SW vödör beállításának AWS dokumentációját (2: Vödrök létrehozása és konfigurálása, valamint adatok feltöltése).
A dokumentáción kívül néhány dolgot érdemes megjegyezni:
- A 2.1 szakaszban (2. rész): kattintson a Hogyan hozhatok létre S3 vödröt linkre Ez lépésről lépésre ismerteti az összes választandó beállítást.
- A 2.1 szakaszban (3. rész): még nem kell feltöltenie a webhely fájljait. Addig hozzáadhat egy teszt index.html fájlt.
Vegye figyelembe a végpontját . Ezt megtalálja az S3 vödör> „Tulajdonságok” lap> „Statikus webtárhely” mezőben. Valahogy így kell kinéznie: //azdomainneved.com.s3-webhely.eu-west-2.amazonaws.com
Adja hozzá az Alias / „A” rekordokat az 53-as útvonalhoz
Végül térjen vissza az 53-as útra, és nyissa meg a hosztolt zónát az Alias-rekordok beállításához. Kövesse a „3. lépés: Álnévrekordok hozzáadása az example.com és a www.example.com címhez” című dokumentumot. Ez egészen egyszerű.
Miután az NS beállítások elterjedtek, webhelye aktív ! Meglátogathatja webhelyét a domain címen, pl. A sajátdomainneve.com
Kérjük, vegye figyelembe, hogy nem lesz biztonságos, és a // címsorban megjelenik egy // előtag. Erre a következő szakaszban térek ki.
Hogyan lehet biztonságossá tenni webhelyét, és mi az SSL tanúsítvány?
Nagyon fontos, hogy biztonságossá tegye webhelyét, és ehhez SSL-tanúsítványt kell beszereznie. Az SSL a Secure Sockets Layer rövidítése, és titkosítást használ az adatok biztonságos átviteléhez a felhasználó és a webhely között. A Google emeli a rangsorolást a HTTPS-t használó webhelyek számára is.
Ha SSL-tanúsítvánnyal védi a webhelyet, a címsávban // és egy lakat szimbólum jelenik meg.
Különböző típusú SSL-tanúsítványok léteznek: Kiterjesztett érvényesítési tanúsítvány és Domain-hitelesített tanúsítvány. Személyes webhelyhez vagy bloghoz csak egy domain által hitelesített tanúsítványra van szükség. Nem látja cége nevét sem a sáv bal oldalán, mint a fenti példa. Ezt csak akkor kapja meg, ha rendelkezik kibővített érvényesítési tanúsítvánnyal, amely inkább a nagyvállalatoknak / vállalkozásoknak szól.
Mennyibe kerül egy SSL tanúsítvány?
Az SSL-tanúsítvány megszerzésének számos módját láttam. Fizethet egy olyan szolgáltatásért, amely ezt az Ön nevében fogja megtenni, vagy ingyen is megteheti a Let's Encrypt szolgáltatással. A Let's Encrypt hivatalos tanúsító hatóság (CA). Három havonta meg kell újítania a tanúsítványt, és a folyamat meglehetősen bonyolult.
Nem akartam prémiumot fizetni, és nem akartam, hogy három havonta megújuljak. Kényelmesen, az AWS SSL tanúsítványokat tud kiadni, nagyon csekély díj ellenében. Minden kiadott tanúsítványért 0,75 dollárt fizet, és az egy évig tart.
Ha úgy dönt, hogy nem megy az AWS-szel, győződjön meg róla, hogy elvégezte-e a kutatását, és megbízható CA-t választott!
Hogyan szerezhet SSL tanúsítványt AWS-sel?
Jelentkezzen be AWS-konzoljára, és lépjen az AWS Certificate Manager (ACM) oldalra.
Győződjön meg arról, hogy az alapértelmezett (Ohio) régiót N. Virginia tartományra változtatta. Ez nem egyértelmű az útmutatókban, és csak az N. Virginia régió adhat ki tanúsítványokat. Megtanultam a nehéz utat és sok időt pazaroltam el!
Ezután kattintson a „Kezdő lépések” elemre a „Biztonsági tanúsítványok” alatt.
Kövesse az AWS dokumentációját („Nyilvános tanúsítvány igénylése a konzol használatával”), és használja Victoria Drake útmutatóját (az „SSL tanúsítvány” alatt).
Az útmutatók mellett néhány olyan dolog van, amelyet nem magyaráztak el teljesen:
- A domain tulajdonjogát e-mailben vagy közvetlenül a DNS-sel kell igazolnia . Azt javaslom, hogy mindig ellenőrizzük a tulajdonjogot DNS-ellenőrzéssel .
- Miután kérte a tanúsítványt, valami hasonlót kap (kivéve, hogy az állapot függőben van). Kattintson az „DNS-konfigurációs fájl exportálása” elemre:
Ez egy Excel táblázat, amely ilyesmit tartalmaz:
- Ezeket a rekordokat hozzá kell adnia a DNS-beállításaihoz a regisztrátorral. Jelentkezzen be, és lépjen a DNS-beállításokhoz. A kezelőfelület a különböző regisztrátoroktól függ, de a DNS-beállítások alatt keresi a Host rekordokat.
- Kattintson a „Rekord hozzáadása” elemre, és a rekord típusa CNAME :
Két rekordot kell hozzáadnia: 1) A hosztnévnek „@” kell lennie, a célnévnek pedig a DNS-konfigurációs fájl Record értékének kell lennie.
2) A hosztnév legyen * (csillag), a célnév pedig a DNS-konfigurációs fájl Record értéke legyen.
Ha további információt szeretne a CNAME-ről és a rekordtípusokról, akkor ezt a hasznos cikket találtam.
Elég hosszú, de kihúztam a hasznos részt:
„Megjegyzés: A hosztnév a tartománynév előtti előtagra utal. Üres rekord létrehozásához használjon @ jelet a Gazdanév mezőben. Ez egy üres előtagot jelent (tehát a név pontosan megegyezik a domain névvel; például divapirate.com). A @ hostname-t a domain gyökerének is nevezik. A gazdagépnévben egy * (csillag) helyettesítő karakter, és bármilyen előtagot képvisel. Például egy rekord létrehozása a * .divapirate.com webhelyen a .divapirate.com oldalra mutat a megadott IP-címre. ”Csak várnia kell az ellenőrzésre. Számomra ez körülbelül egy órát vett igénybe.
Hogyan adhatja hozzá SSL-tanúsítványát?
Az AWS segítségével a CloudFront beállításával SSL-tanúsítványt adhat a webhelyéhez . A CloudFront kiválóan alkalmas webhelye felgyorsítására. Az AWS dokumentációját és Victoria Drake útmutatóját használtam (nézze meg hasznos tippjeit).
Felhívjuk figyelmét, hogy amikor létrehozza a CloudFront disztribúcióját, van egy legördülő menü az SSL tanúsítvány hozzáadásához. Ha már kapott SSL tanúsítványt, akkor azt a legördülő menüben előre kitölti.
A CloudFront irányítópultjának állapotát „Engedélyezve” állapotúra kell módosítani. Ez nem azonnali, és kis időt vesz igénybe.
Majdnem ott…
Végül meg kell szereznie a domain nevét a CloudFront terjesztésből. Valami ilyennek kell lennie, mint ez a dsfdser83543. cloudfront.net .
Menjen vissza az 53-as útvonalhoz> Tárolt zóna> módosítsa mindkét Alias rekordot (Alias Target) CloudFront tartománynévre.
Voálá! Az első biztonságos statikus webhelyét az AWS segítségével tárolta.
Remélem, hasznosnak találta ezt. Ha kérdése van, vagy csak köszönni szeretne, keressen meg a Twitteren @PhoebeVF
Nagyon köszönöm Victoria Drake-nek az útmutatót. A témával kapcsolatos fejlettebb oktatóanyagokért olvassa el Victoria cikkét: "Statikus webhelyének tárolása az AWS S3, az 53-as út és a CloudFront segítségével".
Az illusztrációk a //undraw.co jóvoltából