Как да хоствате статичния си уебсайт с AWS - Ръководство за начинаещи

Когато създадох първото си портфолио миналата година, го основах на наученото от freeCodeCamp (HTML, CSS и малко JavaScript).

По това време бях разглеждал портфолиото си само на localhost, като разглеждах файловете на моя локален компютър. Не знаех нищо за това как да хоствам уебсайт онлайн.

Да науча как да хоствам първия си уебсайт не беше лесно, но беше страхотно учебно преживяване. Ако сте амбициозен уеб разработчик или просто се интересувате от стартирането на собствен статичен уебсайт, тогава се надявам, че това ръководство ще ви бъде полезно.

За кого е това ръководство?

Това ръководство е насочено към начинаещи, които искат да хостват статичен уебсайт (сайт с фиксирано съдържание). Ще осигуря ръководство за следното:

  1. Как да закупите домейн.
  2. Как да конфигурирате домейна си за външен доставчик на хостинг.
  3. Как да хоствате уебсайта си с Amazon Web Services (AWS).
  4. Как да направите уебсайта си защитен (SSL сертификация) с помощта на Amazon Certification Manager.

Може да има някаква нова терминология за вас. Моля, продължете и потърсете непознати термини. Поставих полезни връзки и обяснения там, където сметнах за подходящо.

Какво е име на домейн и DNS (Domain Name System)?

Името на домейн е адресът на вашия уебсайт. Например thecodinghamster.com. Но за компютър името на домейн всъщност е поредица от числа (IP адрес). IP адресът изглежда така: 123.321.0.1

Не ни е лесно да запомним дълъг низ от числа. Така че вашият компютър се позовава на DNS, за да преведе текстово адресиран уебсайт в IP адрес, който след това може да разбере. DNS е като директория.

Гледах това страхотно видео, което обяснява името на домейна, DNS и как работи това за по-малко от пет минути. Моля, гледайте първите пет минути от видеото, ако се интересувате:

Къде можете да закупите името на вашия домейн?

Можете да закупите име на домейн от регистратор на име на домейн. Цените започват от няколко долара. Името на вашия домейн е уникално. Всеки регистратор на име на домейн предлага различни нива на услуги / поддръжка. Но можете да регистрирате домейна си при всеки регистратор.

Какво е хостинг доставчик?

„Услугата за интернет хостинг е услуга, която управлява интернет сървъри, позволявайки на организации и лица да обслужват съдържание в Интернет. Предлагат се различни нива на услуги и различни видове услуги. "

Когато търсех доставчик на хостинг за моя уебсайт, проучих различни опции. Цените варираха от £ 2.00 - £ 5.00 на месец с различни опции за съхранение от 0.5GB до 10GB. Цените изглеждаха разумни, но всичко, което исках да направя, беше да хоствам статичен уеб сайт. Имаше няколко изображения, HTML, CSS и JavaScript файлове. Няма динамично съдържание.

Защо AWS?

След допълнителни проучвания открих AWS. AWS предлага безплатна опция за ниво. По същество получавате много безплатни продукти. Някои от тях изтичат след 12 месеца, а други са свободни завинаги. Единствените разходи, които ще понесете за хостване на статичен уебсайт, са разходите за създаване на хоствана зона. Това струва $ 0,50 на месец. Затова отидох с AWS и си настроих акаунта.

Страхотното при AWS е цената и това е надежден хостинг доставчик. Но едно нещо, което трябва да имате предвид, е, че разчитате на тяхната документация. Когато започнах да чета за това какви услуги предлага AWS, бързо стана объркващо! Използвах официалното ръководство на AWS, предоставено за настройване на статични уебсайтове. Но открих, че се губя с щракване върху връзка към друга връзка и т.н. Започнах да изследвам други ръководства, за да компенсирам пропуските в знанията.

Намерих това отлично ръководство от Виктория Дрейк.

Следвах ръководството на Виктория Дрейк заедно с AWS и успях да се разбъркам. Но все пак имаше няколко неща, които не бяха обяснени, които се надявам да довърша.

Преди да продължим, ето списъкът ви със задачи:

  • Направете проучване на регистраторите на домейни и купете името на домейна си.
  • Регистрирайте се за безплатен акаунт в AWS.
  • Нека документацията от AWS и ръководството на Виктория Дрейк са отворени. Използвайте моето ръководство, за да ви преведе през документацията (надявам се, че има смисъл!).

Ето ни!

AWS: Създайте хоствана зона на път 53.

Маршрут 53 е мястото, където се обработват всички ваши DNS заявки.

Първото нещо, което трябва да настроите, е вашата хоствана зона с Route 53. Това е наистина лесно, ако сте закупили домейна си чрез AWS. Хостваната зона се създава автоматично, след като я закупите. Ако сте направили това, просто преминете към следващия раздел ( Настройте вашите S3 кофи ).

Ако обаче сте като мен и сте закупили името на вашия домейн чрез друг регистратор, моля, направете следното.

Следващата част е как да създадете хоствана зона на път 53, ако не сте закупили името на вашия домейн от AWS:

  1. Отидете на път 53 във вашата конзола и кликнете върху „Създаване на хоствана зона“. Попълнете адреса на домейна си, коментарът не е задължителен и изберете „Обществено хоствана зона“. Кликнете върху „Създаване“.

2. След като бъде създадена вашата хоствана зона, имате нужда от вашите записи за NS (Name Servers):

3. Отидете до регистратора на вашето име на домейн и влезте. В зависимост от вашия регистратор, трябва да намерите раздел в настройките си, наречен „Имен сървъри“, който можете да редактирате. Трябва да копирате в AWS NS записите и да промените съществуващите NS записи в настройките на вашия домейн.  

Моля, обърнете внимание, не копирайте точката / точката в края на записа на NS. Например, трябва да бъде „ns-63.awsdns-07.com“, а не „ns-63.awsdns-07.com“.

Размножаването ще отнеме до 24 часа.

Настройте вашите кофи S3

Междувременно можете да настроите вашите S3 кофи. Кофата S3 е хранилището за вашите файлове, като например index.html.

Трябва да конфигурирате две групи за вашия уебсайт: 1) yourdomainname.com и 2) www.yourdomainname.com.

Първата група е основната ви група, където ще качите всичките си документи, като например index.html. Втората група пренасочва към първата група. За да настроите вашите S3 групи, моля, следвайте документацията на AWS за това как да настроите вашата група S3 (2: Създаване и конфигуриране на групи и качване на данни).

В допълнение към документацията има няколко неща, които трябва да се отбележат:

  • В раздел 2.1 (част 2): щракнете върху връзката Как да създам сегмент S3? Това е ръководство стъпка по стъпка и обяснете всички настройки, които трябва да изберете.
  • В раздел 2.1 (част 3): все още не е нужно да качвате файловете на уебсайта си. Междувременно можете да добавите тест index.html.

Обърнете внимание на вашата крайна точка . Можете да намерите това в своя сегмент S3> раздел „Свойства“> поле „Статичен уеб хостинг“. Тя трябва да изглежда по следния начин: //yourdomainname.com.s3-website.eu-west-2.amazonaws.com

Добавете записите Alias ​​/ “A” в път 53

Накрая се върнете към път 53 и отворете хостваната зона, за да настроите вашите записи на Alias. Можете да следвате документацията на „Стъпка 3: Добавяне на записи на псевдоними, например.com и www.example.com“. Това е съвсем просто.

След като настройките на NS се разпространят, вашият сайт е активен ! Ще можете да посетите сайта си на адреса на домейна, например yourdomainname.com

Моля, имайте предвид, че няма да е сигурен и ще видите префикс // в адресната лента. Ще стигна до това в следващия раздел.

Как да направим уебсайта си сигурен и какво е SSL сертификат?

Много е важно да направите уебсайта си сигурен и за да направите това, ще трябва да получите SSL сертификат. SSL означава Secure Sockets Layer и използва криптиране за сигурен трансфер на данни между потребител и сайт. Google също ще даде тласък на класацията за уебсайтове с HTTPS.

Ако защитите уебсайта със SSL сертификат, ще видите // и символ на катинар в адресната лента.

Има различни видове SSL сертификати: сертификат за разширена проверка и сертификат за домейн. За личен уебсайт или блог е необходим само сертификат, потвърден от домейн. Също така няма да видите името на вашата компания отляво на лентата, както в горния пример. Получавате това само ако имате разширен сертификат за валидиране, който е по-подходящ за големи компании / предприятия.

Колко струва SSL сертификат?

Виждал съм редица начини за получаване на SSL сертификат. Можете да платите премия за услуга, която ще направи това от ваше име, или можете да го направите безплатно с Let's Encrypt. Let's Encrypt е официален сертифициращ орган (CA). Но трябва да подновявате сертификата си на всеки три месеца и процесът е доста сложен.

Не исках да плащам премия или исках неприятностите с подновяването на всеки три месеца. Удобно е, че AWS може да издава SSL сертификати срещу много малка такса. Плащате $ 0.75 за всеки издаден сертификат и той продължава една година.

Ако решите да не отидете с AWS, не забравяйте да направите вашето проучване и да изберете доверен CA!

Как се получава SSL сертификат с AWS?

Влезте във вашата AWS конзола и отидете до AWS Certificate Manager (ACM).

Уверете се, че сте сменили региона от подразбирането (Охайо) на Северна Вирджиния. Това не е изрично в ръководствата и само регионът на Северна Вирджиния може да издава сертификати. Научих по трудния начин и загубих много време!

След това кликнете върху „Първи стъпки“ под „Сертификати за предоставяне“.

Следвайте документацията с AWS („Искане на публичен сертификат с помощта на конзолата“) и използвайте ръководството на Виктория Дрейк (под „SSL сертификат“).

В допълнение към ръководствата има няколко неща, които не са напълно обяснени:

  • Ще трябва да потвърдите собствеността на домейна си по имейл или директно с DNS. Бих препоръчал винаги да проверявам собствеността чрез проверка на DNS .
  • След като поискате сертификата си, ще получите нещо подобно (с изключение на състоянието, което чака). Кликнете върху „Експортиране на DNS конфигурационен файл“:

Това е електронна таблица на Excel, която ще съдържа нещо подобно:

  • Ще трябва да добавите тези записи към настройките на DNS с вашия регистратор. Влезте и отидете в настройките на DNS. Интерфейсът варира в зависимост от различните регистратори, но вие търсите вашите записи на хост под вашите DNS настройки.
  • Кликнете върху „Добавяне на запис“> типът на записа е CNAME :

Трябва да добавите два записа: 1) Името на хоста трябва да бъде „@“, а името на целта трябва да бъде стойността на записа от DNS конфигурационния файл.

2) Името на хоста трябва да бъде * (звездичка), а името на целта трябва да бъде стойността на записа от DNS конфигурационния файл.

Ако искате повече информация за CNAME и типовете записи, намерих тази полезна статия.

Доста е дълъг, но извадих полезната част:

„Забележка: Името на хоста се отнася до префикса преди името на домейна. За да създадете празен запис, използвайте @ в полето Име на хост. Това представлява празен префикс (така че името съвпада точно с името на домейна; например divapirate.com). Името на @ host се нарича още коренът на домейна. * (Звездичка) в името на хоста е заместващ символ и представлява всеки префикс. Например, създаването на запис за * .divapirate.com ще насочи .divapirate.com към предоставения IP адрес. “

Трябва само да изчакате проверката. За мен това отне около час.

Как добавяте вашия SSL сертификат?

С AWS можете да добавите SSL сертификат към уебсайта си чрез настройване на CloudFront . CloudFront е чудесен за ускоряване на вашия уебсайт. Използвах документацията на AWS и ръководството на Виктория Дрейк (внимавайте за нейните полезни съвети).

Моля, обърнете внимание, че когато създавате вашата CloudFront дистрибуция, има падащо меню за добавяне на вашия SSL сертификат. Ако вече сте получили SSL сертификат, той ще бъде предварително попълнен в падащото меню.

Състоянието ви в таблото за управление на CloudFront трябва да се промени на „Разрешено“. Това не е мигновено и отнема малко време.

Почти там…

И накрая, трябва да вземете вашето име на домейн от дистрибуцията на CloudFront. Трябва да е нещо подобно на dsfdser83543. cloudfront.net .

Върнете се на път 53> хоствана зона> променете двата записа на Alias ​​(Alias ​​Target) на CloudFront Domain Name

Voila! Хоствали сте първия си защитен статичен уебсайт с AWS.

Надявам се, че сте намерили това полезно. Ако имате някакви въпроси или просто искате да поздравите, намерете ме в Twitter @PhoebeVF

Голямо благодаря на Виктория Дрейк за нейния водач. За по-усъвършенстван урок по тази тема, моля, вижте статията на Виктория: "Хостинг на статичния ви сайт с AWS S3, Route 53 и CloudFront".

Илюстрациите с любезното съдействие на //undraw.co