Хостинг статического сайта в облаке Amazon Web Services (AWS)

Введение

Часть персональных сайтов и веб-представительств компаний созданы по принципу «визиток» и содержат только статические страницы — документы, изображения, видео и прочую информацию, которая время от времени обновляется владельцем или администратором. Для подобных проектов нет необходимости арендовать дорогостоящий многофункциональный хостинг. Разместить его можно собственными силами за несколько часов в облачном сервисе Amazon Web Services (AWS), воспользовавшись пошаговой инструкцией ниже.

Размещение проекта в облаке AWS позволит вам не заботиться о его доступности для ваших контрагентов — серверы одной из крупнейших в мире компаний работают всегда 24 часа 7 дней в неделю. Вам не придётся каждый раз подбирать наиболее подходящие под текущие условия тарифные планы либо заботиться об их смене при необходимости увеличить или уменьшить требуемые ресурсы: вы будете платить ровно за то, что используете.

Вы можете начать с простейшего веб-представительства с длинным доменным именем, предоставляемым сервисом, либо сразу закрепить за проектом собственное доменное имя, или даже настроить распределённую сеть доставки контента, позволяющую получать доступ к вашей информации из любой точки мира практически мгновенно.

Вы получите полноценный хостинг статического сайта полностью соответствующий вашим требованиям.

Плата за размещение подобного сайта обойдётся вам от нескольких центов до нескольких долларов в месяц, в зависимости от ваших потребностей.

Технические детали

Статический сайт-визитка представляет собой обычную папку с вложенными в неё субпапками и файлами, к которой организован технический доступ в интернет. То есть создать свой сайт вы можете на локальном компьютере, а сторонний хостинг необходим вам лишь для хранения этой папки на диске провайдера и организации доступа к её документам из интернета.

Для хранения документов и организации доступа из Сети достаточно воспользоваться сервисом Amazon S3.

Для того, чтобы эти документы были доступны не только по предоставляемому Amazon длинному доменному имени, но и по принадлежащему вам «красивому», необходимо его связать с вашей папкой на Amazon S3, воспользовавшись сервисом Route 53.

Инструкция

Обычная последовательность действий при создании сайта состоит всего из нескольких простейших шагов:

  1. Подготовка документов вашего сайта на локальном компьютере. Сделать это можно в любом текстовом редакторе, создавая html-файлы. Фотографии, видео и другие подобные документы можно выкладывать в существующем виде. Тестирование производится с помощью вашего любимого браузера также локально.
  2. Регистрация в любом проекте Amazon, если у вас ещё нет аккаунта в этом проекте. Сделать это можно, например, непосредственно в разделе Amazon Web Services (AWS).

  3. Создание «букета» — папки в сервисе Amazon S3, в которой вы разместите свой сайт — индексные страниц и файлы, которые хотите сделать публичными.
  4. Загрузка вашего сайта в «букет».
  5. Прикрепление вашего доменного имени к сайту с помощью сервиса Route 53.

Отметим, что AWS предоставляет собственное доменное имя для каждого «букета». Поэтому, если вы создаёте не бизнес-проект или у вас нет критической необходимости в запоминающемся имени, вы можете ограничиться лишь первыми шагами. Ваш сайт и в этом случае будет общедоступен с любого устройства в интернет.

Подробное описание каждого шага приведено ниже.

Подробности

Создание и минимальная конфигурация «букета»

Прежде чем создать «букет» нужно придумать для него имя.

  • Если вы не планируете прикреплять к хостингу доменное имя вы можете назвать ваше хранилище удобным для вас произвольным образом. Имя «букета» должно быть уникальным для всего хранилища. Например, для моих фотографий подойдёт имя krassotkinphoto.
  • Если вы знаете под каким доменным именем будет размещён ваш сайт, задайте для «букета» имя, ему соответствующее. В этом случае, скорее всего вам понадобится два «букета», для того чтобы ваш сайт был доступен по запросу из корневого домена (второго уровня) и под классическим именем третьего уровня — с поддомена www.
    Например, для размещения своего сайта на домене krassotkin.com я создал «букет» для хранения файлов сайта с именем www.krassotkin.com и «букет» для редиректа krassotkin.com.

После того, как определились с именем, создаём и производим минимальную настройку «букета» в котором будут размещаться документы (например, с именем www.krassotkin.com):

aws.s3.png
  1. В веб-консоли управления AWS перейдите на вкладку хранилища Amazon S3.
  2. Нажмите кнопку Create Button.
  3. Выберите регион, в котом будет размещаться ваш сайт, например, US Standart.
  4. Подтвердите выбор нажатием кнопки Create.

Настроим свойства созданного вами букета. Для этого нажмите кнопку Properties (вверху справа). Перед вами откроется несколько разделов-секций. Все дальнейшие шаги в этой части выполняются во вкладке Properties.

  1. Укажите системе, что в этом «букете» будет размещаться веб-хостинг нашего сайта.
    1. Перейдите в раздел Static Website Hosting.
    2. Отметьте строку Enable website hosting.
    3. Укажите, как будут называться ваши индексный документ и документ для ошибок в строке Index Document и Error Document. Я указываю в этих двух полях index.html, однако можно создать отдельный документ для ошибок, например, с уведомлением об ошибке и «картой» сайта.
    4. Нажмите кнопку Save.
  2. Сделайте содержимое вашего сайта публичным — доступным из интернета.
    1. Откройте секцию Permissions.
    2. Нажмите кнопку Add bucket policy.
    3. В открывшейся форме добавьте текст:
      {
        "Version": "2012-10-17",
        "Statement": [
          {
            "Sid": "Allow Public Access to All Objects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.krassotkin.com/*"
          }
        ]
      }
    4. Замените название букета на ваше (вместо www.krassotkin.com) в поле "Resource". Дату менять не следует: она указывает на версию формата, в котором составляются правила для установки доступа.
    5. Сохраните изменения нажатием кнопки Add bucketn policies
  3. Сервис Amazon S3 предоставляет возможность сохранять все версии файлов, загруженные в хранилище. Например, если вы случайно загрузили файл с существовавшим именем, вы всегда сможете оперативно «откатить» ошибочные изменения к нужной версии. Так же вы сможете восстановить случайно удалённый файл или посмотреть историю изменений с восстановлением утерянной со временем информации. Единственным недостатком этого подхода является необходимость оплачивать хранение всех версий, однако сервис предоставляет возможность чистки истории с удалением ненужных версий.
    1. Для включения этой функции перейдите в секцию Versioning «букета», в котором будут храниться документы сайта и нажмите кнопку Enable Versioning.
    2. Посмотреть/скрыть версии вы сможете нажатием кнопки Versions: Hide Show, находясь в «букете».

В случае необходимости, создаём и производим минимальную настройку «букета»-редиректа (например, для корневого домена с именем krassotkin.com):

  1. Выполним пункты выше по созданию нового букета с именем, соответствующем корневому домену. Отличие состоит только в его настройке, описанной ниже.
  2. Укажем, что этот «букет» будет редиректом на основное имя сайта.
    1. Для этого нажмите Properties.
    2. Перейдите в раздел Static Website Hosting.
    3. Отметьте строку Redirect all requests to another host name.
    4. В поле Redirect all requests to: укажите имя букета, куда будут отправляться все запросы. В моём случает это www.krassotkin.com. Если на предыдущих шагах вы не ошиблись, система автоматически предложит вам имя нужного букета
    5. Нажмите кнопку Save.
    6. Никаких других настроек в этом букете в большинстве случаев производить не следует.

Загрузка файлов

AWS предоставляет несколько способов загрузки файлов в ваше хранилище S3.

Самым простейшим является непосредственная загрузка на сайте, самая удобная — синхронизация локальной директории с букетом посредством консольной программы.

Кроме того, Amazon и сторонние разработчики предоставляют плагины и отдельные программы для работы с AWS S3.

Загрузка с помощью сайта (веб-консоли)

  • В веб-консоли управления AWS перейдите на вкладку хранилища Amazon S3. Затем в нужный «букет» и папку, в которую будут загружены файлы.
  • В верхнем меню выберите Actions >> Upload.
  • Выберите Add files и добавляйте файлы через привычный интерфейс своей операционной систем.
  • Если вы хотите загрузить папки с вложенными в них файлами целиком, активируйте Enable Enhanced Uploader. В этом случае после нажатие Add files загрузка будет осуществляться с помощью Java-апплета.
  • После выбора файла нажмите кнопку Start Upload, так как в нашем случае дополнительные настройки не требуются.

Синхронизация с помощью AWS CLI

Наиболее удобным способом следить за актуальным содержимым своего сайта является его синхронизация с локальным хранилищем.

Для этого установите утилиту aws.

Создайте локальную версию своего сайта.

Для обновления сайта воспользуйтесь командой вида:

aws s3 sync . s3://www.krassotkin.com --exclude ".*" --exclude "*~"

Замените название моего букета, выделенное цветом, на своё имя.

Или создайте в локальной корневой директории вашего сайта командный файл, содержащий эту команду (для Linux, например, файл с названием .syncaws.sh)

#!/bin/bash
aws s3 sync . s3://www.krassotkin.com --exclude ".*" --exclude "*~"

В этом случае, после изменения файлов локально вам необходимо будет только выполнить команду ./.syncaws.sh в консоли. Все изменения автоматически отразятся в букете.

 

Если вы используете систему контроля версий, например, git, целесообразно также осуществлять фиксацию изменений перед синхронизацией. В этом случае файт ./.syncaws.sh будет выглядеть следующим образом:

#!/bin/bash
git commit -a -m "autocommit before aws sync"
aws s3 sync . s3://www.krassotkin.com --exclude ".*" --exclude "*~"

Посмотреть результат

После создания «букета» по описанной выше процедуре ваш сайт — все загруженные файлы доступны с полным функционалом по предоставляемому AWS длинному доменному имени.

Перейдите во вкладку Properties >> Static Website Hosting. В поле Endpoint: указан адрес корневого документа, который вы можете вводить в браузер, ставить на него ссылки и передавать для доступа к своему сайту другим. Например, в моём случае это: www.krassotkin.com.s3-website-us-east-1.amazonaws.com. У вас будет аналогичный адрес, отличающийся лишь именем вашего букета и географической зоной, в которой он размещён.

Прикрепление доменного имени

Хотя ваш сайт доступен и виден из любого места сети, тем не менее, большинство предпочитает короткие доменные имена, специфические для каждого сайта. Для этих случаев подходит предоставляемый AWS сервис Route 53.

Для настройки доменного имени часть операций необходимо будет выполнить на стороне AWS Route 53, а часть на стороне вашего регистратора доменного имени.

Route 53

Для настройки доменных зон созданного вами по инструкции выше статического сайта перейдите в консоль управления AWS Route 53.

  1. Перейдите во вкладку Hosted Zones.
  2. Нажмите на кнопку Create Hosted Zones и введите принадлежащее вам доменное имя (второго уровня в нашем примере — без www). Например, krassotkin.com. Нажмите кнопку Create.
  3. В появившемся окне нажмите Create Record Set, отметьте флажок Alias и в поле Alias Target выберите предложенный сервисом букет, соответствующий имени вашего сайта. Сохраните изменения нажатием кнопки Create.
  4. Повторно нажмите на Create Record Set, в поле Name введите алиас www, отметьте флажок Alias и в поле Alias Target выберите предложенный сервисом букет, соответствующий имени вашего сайта. Сохраните изменения нажатием кнопки Create.
  5. В таблице перейдите к строке, в которой в поле Type указано NS. Во вкладке справа в поле Value будет указан список имён серверов DNS, которые будут поддерживать ваш домен, скопируйте их.
Регистратор доменного имени

Перейдите на сайт своего регистратора доменного имени.

Перейдите на вкладку, с которой можно управлять DNS-серверами доменного имени.

Внесите через интерфейс список DNS-серверов, которые вы скопировали на предыдущем шаге.

Через несколько часов (максимум пару дней) DNS-серверы обновятся и вы сможете увидеть свой сайт, расположенный в букете Amazon.

Ссылки

AWS Documentation

Amazon S3

AWS Command Line Interface (AWS CLI)

Заключение

Вы можете выразить поддержку автору и пожелания продолжить разработку, перечислив средства в биткоинах на кошелёк: 174JHvYQihnqpN9xf3AC5e3owqhg3DESfr.