Как да хоствате статичен уебсайт с S3, CloudFront и Route53

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

Тази статия ще разгледа подробно как да маркирате всички полета по-долу с акцент върху задните компоненти.

  1. Хостинг с плащане
  2. SSL сертификат
  3. Функционален www поддомейн
  4. Високо адаптивен, но минималистичен дизайн
  5. Статии, задвижвани от Markdown

За 4 и 5 по-горе използвах Hugo с минималната тема.

Протест

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

Предварителни

По-нататък ще приема, че:

  1. Вие сте проектирали и кодирали вашия уебсайт или поне имате макет.
  2. Имате AWS акаунт (ако не, отидете регистрирайте такъв. AWS акаунтите включват една година безплатен достъп до ниво).
  3. Вие сте запознати с DNS и как работи, поне на високо ниво.

Що се отнася до DNS, бързото обяснение е, че това е нещо като директория в Интернет и също като Google притежава google.com, вие също можете да притежавате свой собствен домейн, като example.com. За да го направите, трябва да отидете на DNS регистратор и да закупите вашия домейн, който искате. Горещо препоръчвам да използвате Namecheap като свой регистратор, тъй като те имат страхотен потребителски интерфейс и ниски цени. Като алтернатива можете да изберете GoDaddy.

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

  • LeanDomainSearch
  • Wordoid
  • Domainr

След като го закупите, още не задавайте никакви DNS записи. Ще направим това по-късно, след като стигнем до Route53.

Хостинг с Amazon AWS

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

От моя опит обаче бих ви препоръчал да преминете модулно и да отидете с услуга за изплащане като AWS.

Преди да скочите, важно е да разберете номенклатурата:

  • AWS: Услуги на Amazon
  • S3: Проста услуга за съхранение, за съхранение на файлове
  • Route53: Услуга за обработка на DNS записи
  • CloudFront: мрежа за доставяне на съдържание (CDN) за ускоряване на вашия уебсайт, необходима също за генериране на SSL сертификат

Ето кокетна карта за дизайн, създадена с Cloudcraft за това, което ще изградите:

Първо ще се съсредоточим върху пътя от дясната страна, така че нормалната конфигурация (с Route53, CloudFront и S3), а не тази за поддомейна www. Важното е, че използвайки тази модулна конфигурация, изобщо няма да стартирате никакъв резервен Linux сървър, така че не е нужно да се притеснявате за актуализиране или лепенки на нещо. Колко удобно е това?

Услуга за лесно съхранение на Amazon (S3)

Тук ще съхраните статичните си файлове (HTML, CSS, JavaScript). Ако сте използвали Create React App или някаква друга рамка за разработка на интерфейса, потърсете генерираната папка „build“ или „public“.

Ето какво трябва да направите:

  1. Настройте кофа S3, наречена „example.com“. Забележете, че имената на кофите S3 са глобални и, подобно на домейните, ще трябва да намерите друго име, ако някой е взел example.com преди вас. Въз основа на вашите нужди можете да активирате или деактивирате опциите, които AWS ви предоставя: версия, регистриране на достъп до сървъра, криптиране и т.н.
  2. Уверете се, че премахнете отметката от квадратчетата, в които се споменава блокиране и премахване на публичен достъп ACL и политики. Много пъти кофите S3 се използват за съхранение на лични данни, така че AWS оптимизира конфигурацията за високо сигурни конфигурации. Във вашия случай обаче искате да имате публично достъпна кофа.
  3. Уверете се, че зададете правило, ето един пример.
  4. Активирайте „Статичен хостинг на уебсайтове“ за вашата кофа и поставете отметка „Използвайте тази кофа, за да хоствате уебсайт“
  5. Качете вашите файлове, като се уверите, че „index.html“ е в основата на вашата кофа

Всички операции по-горе могат да се извършват с помощта на уеб конзолата за управление на AWS или AWS CLI. По-специално за стъпка 4, препоръчвам да го направите в конзолата, за да можете да получите крайната точка за новия си хостван уебсайт (скрих моята поради причини за поверителност):

Тествайте го в браузъра, за да сте сигурни, че сте настроили правилно S3 кофата си. Трябва да е така:

example.com.s3-website.your-region.amazonaws.com

CloudFront

За да хоствате статичен уебсайт, всъщност нямате нужда от CloudFront или друг CDN, тъй като няма много данни за съхранение и печалбите в ефективността и UX са малко. Една от първоначалните цели обаче беше да има уебсайт, защитен от SSL сертификат, така че ще използваме CloudFront.

Сега може би сте чували за CloudFlare, който е може би най-лесният начин да станете и да работите с CDN, а също така осигурява предимството на някои SSL сигурност. Казвам „някои“, защото имат тази подвеждаща функция, наречена „Гъвкав SSL“, която няма сигурността, която гарантира самостоятелно подписан SSL сертификат.

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

Отново можете да създадете вашата CloudFront дистрибуция с помощта на администраторския интерфейс AWS или инструмента CLI. Ето примерна конфигурация

Предупреждения:

  1. Името на произход трябва да бъде крайната точка, която сте получили след активирането на „Статичен хостинг на уебсайтове“ на вашата S3 кофа.
  2. НЕ задавайте „DefaultRootObject“. Оставете го празен.
  3. Разрешете както HTTP, така и HTTPS. Ще можете да пренасочвате автоматично потребителите от HTTP към HTTPS след подписване и инсталиране на сертификата.

Уверете се, че изчакайте известно време за правилното зареждане на дистрибуцията (може да отнеме до 15 минути). Тествайте го, като отворите получената крайна точка, вашият статичен уебсайт S3 трябва да се появи. Крайната точка трябва да изглежда така:

13fb4knzujxq0b.cloudfront.net

Забележете някъде вашата крайна точка в CloudFront, защото ще я използваме с Route53 след секунда.

Route53

Време е да свържете домейна, който сте купили във вашия DNS регистратор, с CloudFront и S3. Route53 действа като мост за това.

Ето какво ще трябва да направите, за да конфигурирате Route53 и да свържете домейна с CloudFront:

  1. Създайте хоствана зона на Route53 и задайте вашия домейн. Публикувайте го.
  2. Ще ви бъдат предоставени 4 NS записи. Копирайте и поставете сървърите на имена в страницата си за администриране на външни домейни. Ако използвате Namecheap, ето как можете да актуализирате своите сървъри на имена. В рамките на Namecheap отидете на акаунт -> табло за управление -> управление -> сървъри на имена -> персонализиран DNS и поставете там своите 4 сървъра на имена:

3. Създайте набор от записи и оставете името празно (по подразбиране ще бъде example.com). Тогава трябва да:

  • Задайте типа на „A - IPv4 адрес“
  • Отговорете с „Да“ на „Псевдоним“ и задайте цел на псевдоним на вашия URL адрес за разпространение в CloudFront.
  • Поддържайте политиката за маршрутизиране като „проста“ и въз основа на бюджета и нуждите си активирайте или деактивирайте „Оценете целевото здраве“.

4. Повторете стъпка 3 за тип „AAAA - IPv6 адрес“, ако сте активирали вашата CloudFront дистрибуция да е съвместима с IPv6. Ако следвате този урок, IPv6 е активиран по подразбиране.

Имайте предвид, че разпространението на DNS може да отнеме до 72 часа, въпреки че обикновено трябва да се актуализира в рамките на няколко часа или по-бързо. Ако предварително сте задали други DNS записи (като MX за работни имейли), ще трябва да ги нулирате в Route53.

Настройка на вашия поддомейн WWW

Поздравления за достигането дотук! Съжалявам, че ви уведомявам, че сега трябва да повторите всички предишни три стъпки. Да, чухте това право, поради неуловимия начин на работа на интернет, www не е нещо, включено като цялостен компонент на HTTP.

Важно е да се отбележи, че наистина не е задължително да добавите www поддомейн към вашия уебсайт и можете спокойно да преминете към следващата стъпка, ако сте добре, когато крайните потребители не могат да получат достъп до вашия уеб сайт чрез www.example.com , Бях малко педантичен по въпроса и просто трябваше да добавя www поддомейна.

Забележки:

  1. Откажете само стъпките за S3, CloudFront и Route53, не е нужно (и не можете) да отидете в Namecheap, за да купите www.example.com.
  2. За всички полета, където сте помолени да поставите example.com, сега поставете www.example.com.

Ако се чудите дали създаването на S3 кофи означава, че сте длъжни да разгърнете статичните си файлове и в двете, отговорът е не, не е нужно да правите това. Когато активирате „Статичен хостинг на уебсайтове“ за втората си кофа S3, изберете „Пренасочване на заявки“ вместо „Използване на тази кофа за хостване на уебсайт“:

SSL сертификат

LetsEncrypt е едно от най-добрите неща, които се случиха с интернет през последните няколко години. Те имат демократизиран достъп до SSL сертификати и това е огромно постижение, кудо за тях! Ако LetsEncrypt ви беше толкова полезен, помислете дали да дарите.

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

  1. Насочете се към репото certbot-s3front и инсталирайте инструмента. Трябва да имате инсталиран Python и pip.
  2. Следвайте техните инструкции, но (1) пропуснете частите S3 и CloudFront, вече сте направили това и (2) зададете „example.com, www.example.com“ като стойност за параметъра „-d“ (домейн). Прочетете повече за това във форума на LE.
  3. След като успешно генерирате вашия SSL сертификат, по желание можете да активирате „Пренасочване на HTTP към HTTPS“ на вашия гол домейн (тоест „example.com“) CloudFront дистрибуция. Не правете това за „www“, тъй като той така или иначе ще пренасочи към голия ви домейн.
  4. Уверете се, че архивирате вашите /etc/letsencrypt/live/example.com сертификат (и).

Забележки:

  1. Поради мистериозни причини не можах да накарам проверката на автентификацията на certbot чрез задаване на променливите на средата „AWS_ACCESS_KEY_ID“ и „AWS_SECRET_ACCESS_KEY“. Това може да е причинено от факта, че имам няколко различни профила в ~ / .aws / пълномощията си, но не съм сигурен. За да избегнете „NoCredentialsError“, просто временно задайте профил „по подразбиране“ и certbot ще вземе това.
  2. Ако не сте късметлийка като мен и получите нова грешка „IAMCertificateId“, вижте това решение.

ACM

Малко след публикуването на тази статия много хора скочиха, за да кажат, че ще бъде много по-лесно да използвате AWS Certificate Manager (ACM) за генериране на сертификати. Няма нужда да мислите за подновявания, но това означава, че сте заключени с AWS.

Затруднения

  1. Без логика на сървъра: Този урок е приложим само за статични уебсайтове, така че не можете да стартирате всяка резервна логика, използвайки Node.js модул като ExpressJS. За това можете или да завъртите EC2 екземпляр, да напишете Lambda функции или да използвате Docker чрез ECS / Kubernetes.
  2. Сертификатите на LetsEncrypt изтичат след 90 дни: Можете да разрешите това по два начина. Първо, можете да зададете напомняне в календара си, което, признавам, е неоптимално, но съм във фаза на експериментиране, така че не ме притеснява малко ръчна работа. Второ, можете да зададете cron задача, но се нуждаете от Linux сървър и да използвате опциите „- подновяване по подразбиране - текст“, когато взаимодействате с certbot.
  3. Визуализацията на богатите връзки може да бъде бъркотия: Това може да е проблем, специфичен за моята тема Hugo, но също така мисля, че всеки иска да има правилно изображение и описание на преглед при споделяне на връзките към уебсайта си. Ето как успях да го направя.

Увийте-Up

Поздравления, сега имате наистина евтин, но все пак изключително гъвкав статичен уебсайт! Статистика за таксуване за 100 - 1000 месечни активни посетители и доста често внедряване на S3 са между $ 1 и $ 2, така че това е кражба! За начин на използване извън това, може да се наложи да надстроите вашите AWS компоненти, но това е извън обхвата на този урок.

Ако сте опитен програмист, който се интересува да копира този урок в множество AWS акаунти, може да искате да проверите Terraform. Това е супер дупер готин инструмент за инфраструктура като услуга, който можете да използвате, за да определите S3, CloudFront и Route53 като фрагменти от код. Дали технологията не е толкова странна?

Надявам се да намерите този урок за полезен! Намерете ме в Twitter или Keybase, ако искате да говорите.

Кредити

  • Amazon за логото на AWS, S3, CloudFront и Route53

Първоначално публикуван на paulrberg.com