Як розмістити свій статичний веб-сайт за допомогою AWS - Посібник для початківців

Коли я створив своє перше портфоліо минулого року, я базував його на тому, що дізнався з freeCodeCamp (HTML, CSS та трохи JavaScript).

На той момент я переглядав своє портфоліо лише на localhost, переглядаючи файли на своєму локальному комп’ютері. Я нічого не знав про те, як розмістити веб-сайт в Інтернеті.

Навчитися розміщувати свій перший веб-сайт було непросто, але це був чудовий досвід навчання. Якщо ви починаючий веб-розробник або просто зацікавлені у запуску власного статичного веб-сайту, то, сподіваюся, вам буде корисний цей посібник.

Для кого призначений цей путівник?

Цей посібник призначений для початківців, які хочуть розмістити статичний веб-сайт (сайт із фіксованим вмістом). Я надаю інструкції щодо наступного:

  1. Як придбати домен.
  2. Як налаштувати свій домен для зовнішнього хостинг-провайдера.
  3. Як розмістити свій веб-сайт за допомогою веб-служб Amazon (AWS).
  4. Як зробити свій веб-сайт безпечним (сертифікація SSL) за допомогою Amazon Certification Manager.

Можливо, є якась нова для вас термінологія. Будь ласка, шукайте терміни, які вам не знайомі. Я розмістив корисні посилання та пояснення там, де вважав за потрібне.

Що таке доменне ім'я та DNS (система доменних імен)?

Доменне ім’я - це адреса вашого веб-сайту. Наприклад thecodinghamster.com. Але для комп’ютера доменне ім’я насправді являє собою ряд чисел (IP-адреса). IP-адреса виглядає так: 123.321.0.1

Нам нелегко запам’ятати довгий рядок цифр. Отже, ваш комп’ютер посилається на DNS для перекладу текстової адреси веб-сайту на IP-адресу, яку він потім може зрозуміти. DNS - це як каталог.

Я переглянув це чудове відео, яке пояснює доменне ім'я, DNS і те, як це працює, менш ніж за п'ять хвилин. Будь ласка, перегляньте перші п’ять хвилин відео, якщо вам цікаво:

Де ви можете придбати своє доменне ім'я?

Ви можете придбати доменне ім’я у реєстратора доменних імен. Ціни починаються від декількох доларів. Ваше доменне ім’я унікальне. Кожен реєстратор доменних імен пропонує різні рівні послуг / підтримки. Але ви можете зареєструвати свій домен у будь-якого реєстратора.

Що таке хостинг-провайдер?

«Послуга хостингу в Інтернеті - це послуга, яка працює на серверах Інтернету, дозволяючи організаціям та приватним особам подавати вміст в Інтернет. Пропонуються різні рівні обслуговування та різні види послуг ".

Коли я шукав хостинг-провайдера для свого веб-сайту, я дослідив різні варіанти. Ціни варіювались від 2,00 до 5,00 фунтів на місяць з різними варіантами зберігання від 0,5 ГБ до 10 ГБ. Ціни здавались розумними, але все, що я хотів зробити, - це розмістити статичний веб-сайт. У ньому було кілька зображень, файли HTML, CSS та JavaScript. Немає динамічного вмісту.

Чому AWS?

Після подальших досліджень я знайшов AWS. AWS пропонує безкоштовний варіант рівня. По суті, ви отримуєте безліч безкоштовних продуктів. Деякі з них закінчуються через 12 місяців, а інші вільні назавжди. Єдина вартість, яку ви понесете за розміщення статичного веб-сайту, - це вартість створення розміщеної зони. Це коштувало 0,50 доларів на місяць. Тому я пішов з AWS і створив свій рахунок.

Чудова річ AWS - ціна та надійний хостинг-провайдер. Але слід пам’ятати одне, що ви покладаєтесь на їх документацію. Коли я почав читати про те, які послуги пропонує AWS, це швидко заплутало! Я використовував офіційний посібник AWS, який надається для налаштування статичних веб-сайтів. Але я виявив, що заблукав, натиснувши посилання на інше посилання тощо. Я почав досліджувати інші путівники, щоб заповнити прогалини в знаннях.

Я знайшов це чудовий путівник Вікторії Дрейк.

Я пішов за керівництвом Вікторії Дрейк поруч із AWS і встиг переплутати. Але все-таки було кілька речей, які не були пояснені, і я сподіваюся, що це вдасться розробити.

Перш ніж продовжити, ось ваш список справ:

  • Проведіть дослідження щодо реєстраторів доменів та придбайте доменне ім’я.
  • Зареєструйтеся для безкоштовного облікового запису в AWS.
  • Відкрийте документацію від AWS та посібник Вікторії Дрейк. Використовуйте моє керівництво, щоб провести вас по документації (сподіваюся, що це має сенс!).

Ось і ми!

AWS: Створіть розміщену зону на маршруті 53.

Шлях 53 - це місце, де обробляються всі ваші запити DNS.

Перше, що ви повинні налаштувати - це ваша розміщена зона з маршрутом 53. Це дуже просто, якщо ви придбали свій домен через AWS. Розміщена зона створюється автоматично після її придбання. Якщо ви зробили це, просто перейдіть до наступного розділу ( Налаштування сегментів S3 ).

Однак, якщо ви були подібні до мене і придбали своє доменне ім’я через іншого реєстратора, зробіть наступне.

У цій наступній частині описано, як створити розміщену зону на маршруті 53, якщо ви не купили своє доменне ім’я в AWS:

  1. Перейдіть до маршруту 53 на консолі та натисніть «Створити розміщену зону». Введіть адресу свого домену, коментар необов’язковий і виберіть «Загальнодоступна зона». Клацніть на “Створити”.

2. Після створення зони розміщення вам потрібні записи NS (сервери імен):

3. Перейдіть до реєстратора вашого доменного імені та увійдіть. Залежно від вашого реєстратора, у налаштуваннях ви повинні знайти розділ під назвою "Сервери імен", який ви можете редагувати. Вам потрібно скопіювати всі записи NS AWS та змінити існуючі записи 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

Додайте записи Псевдоніми / "A" у маршрут 53

Нарешті, поверніться до маршруту 53 і відкрийте свою розміщену зону, щоб налаштувати записи Alias. Ви можете слідувати документації на “Крок 3: Додайте записи псевдонімів для example.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, обов’язково проведіть дослідження та виберіть надійний центр сертифікації!

Як отримати сертифікат SSL за допомогою AWS?

Увійдіть у свою консоль AWS і перейдіть до диспетчера сертифікатів AWS (ACM).

Переконайтеся, що ви змінили регіон із типового (штат Огайо) на Північну Вірджинію. Це не чітко зазначено в посібниках, і лише регіон Північної Вірджинії може видавати сертифікати. Я навчився важким шляхом і витратив багато часу!

Потім натисніть “Почати” в розділі “Надання сертифікатів”.

Дотримуйтесь документації з AWS («Запит публічного сертифіката за допомогою консолі») та скористайтеся посібником Вікторії Дрейк (у розділі «Сертифікат SSL»).

Окрім путівників , є кілька речей, які не були повністю пояснені:

  • Вам потрібно буде підтвердити право власності на домен електронною поштою або безпосередньо через DNS. Я пропоную завжди перевіряти право власності шляхом перевірки DNS .
  • Після того, як ви запитаєте свій сертифікат, ви отримаєте щось на зразок цього (за винятком того, що статус буде очікувати) Клацніть на “Експортувати файл конфігурації DNS”:

Це електронна таблиця Excel, яка міститиме щось подібне:

  • Вам потрібно буде додати ці записи до налаштувань DNS разом із реєстратором. Увійдіть і перейдіть до налаштувань DNS. Інтерфейс відрізняється залежно від різних реєстраторів, але ви шукаєте свої записи хосту в налаштуваннях DNS.
  • Клацніть на “Додати запис”> тип запису CNAME :

Вам потрібно додати два записи: 1) Ім'я хосту має бути “@”, а цільове ім’я має бути значенням запису із файлу конфігурації DNS.

2) Ім'я хосту має бути * (зірочка), а ім'я цілі має бути значенням запису із файлу конфігурації DNS.

Якщо вам потрібна додаткова інформація про CNAME та типи записів, я знайшов цю корисну статтю.

Це досить довго, але я витягнув корисну частину:

“Примітка: Ім'я хосту посилається на префікс перед іменем домену. Щоб створити порожній запис, використовуйте @ у полі Ім'я хосту. Це порожній префікс (тому ім’я точно відповідає імені домену; наприклад, divapirate.com). Ім'я @ хосту також називається коренем домену. Зірочка (зірочка) в імені хосту є підстановкою та представляє будь-який префікс. Наприклад, створення запису для * .divapirate.com вказуватиме .divapirate.com на вказану IP-адресу. "

Вам просто потрібно почекати підтвердження. Для мене це зайняло близько години.

Як ви додаєте свій SSL-сертифікат?

За допомогою AWS ви можете додати сертифікат SSL на свій веб-сайт, налаштувавши CloudFront . CloudFront чудово підходить для пришвидшення роботи вашого веб-сайту. Я скористався документацією AWS та керівництвом Вікторії Дрейк (зверніть увагу на її корисні поради).

Зверніть увагу: під час створення дистрибутива CloudFront є спадне меню для додавання вашого SSL-сертифіката. Якщо ви вже отримали сертифікат SSL, він буде попередньо заповнений у спадному меню.

Ваш стан на інформаційній панелі CloudFront слід змінити на «Увімкнено». Це не миттєво і займає трохи часу.

Майже там…

Нарешті, вам потрібно отримати своє доменне ім’я з дистрибутива CloudFront. Це має бути щось на зразок цього dsfdser83543. cloudfront.net .

Поверніться до маршруту 53> розміщена зона> змініть обидва записи Alias ​​(ціль Alias) на доменне ім’я CloudFront.

Вуаля! Ви розмістили свій перший захищений статичний веб-сайт за допомогою AWS.

Сподіваюся, ви знайшли це корисним. Якщо у вас є запитання або просто ви хочете привітатись, знайдіть мене у Twitter @PhoebeVF

Велике спасибі Вікторії Дрейк за її гід. Щоб отримати більш досконалий підручник з цієї теми, перегляньте статтю Вікторії: "Розміщення вашого статичного сайту за допомогою AWS S3, Route 53 та CloudFront".

Ілюстрації люб’язно надано //undraw.co