Размещение статического приложения React на AWS S3 дешево, надежно и просто.

Создание статического содержимого

Размещение статического приложения React на AWS S3 дешево, надежно и просто.

Цель этой статьи - помочь вам понять, как можно легко воспользоваться преимуществами дешевого и высокодоступного хранилища, предоставляемого сервисом AWS S3, для совместного использования набора статических ресурсов в форме веб-приложения. Это обычная вещь, которую делают разработчики внешнего программного обеспечения, и если никогда раньше не делать этого, это может показаться пугающим. К концу этой статьи вы сможете настроить учетную запись AWS с предупреждениями о выставлении счетов (это очень важно) и разместить статическое веб-приложение, которое в этом случае будет загружаться в React.

Начало работы с Amazon Web Services

В этой статье мы рассмотрим это самым простым способом, воспользовавшись преимуществом пакета create-react-app npm для быстрой загрузки нашего приложения. Нет причин думать, что создание статического контента каким-либо образом связано с React, мы также могли бы выполнить загрузку с Angular, Vue или любой другой библиотекой / фреймворком, которая строится на статических активах. Перво-наперво нам нужно создать приложение для реагирования и встроить его в статические ресурсы.

npx create-react-app my-test-app

Как только это будет завершено, нам просто нужно убедиться, что мы находимся в папке my-test-app на корневом уровне, и запустить:

npm run build

Это создаст приложение для реагирования в папке сборки. При разработке приложения React мы тратим свое время на компоненты и состав, но конечный продукт - это просто HTML, CSS и Javascript. Это статические активы, о которых я уже говорил. После успешного выполнения этой команды вы можете запустить ls, чтобы просмотреть папки / файлы, доступные в каталоге. Теперь вы увидите новую папку build.

Настройка оповещений о выставлении счетов для вашего спокойствия

Если у вас уже есть учетная запись AWS, этот раздел не для вас. Amazon Web Services был моим облачным сервисом с тех пор, как я начал изучать разработку программного обеспечения. Я также придерживаюсь этого, потому что я получил сертификаты и обладаю лучшими знаниями об этой услуге. Нельзя сказать, что он лучший, это тот, который я выбрал, чтобы погрузиться в него глубже. Перво-наперво нам нужна учетная запись. Перейдите на https://aws.amazon.com/, найдите Sign in to the Console в правом верхнем углу и щелкните его. Начните, нажав Create a new AWS account. Имейте в виду, что при регистрации новой учетной записи AWS вы получаете доступ к бесплатному уровню на 12 месяцев. Есть некоторые службы, которые всегда предоставляют некоторый бесплатный доступ независимо от того, находится ли ваша учетная запись в первые 12 месяцев или нет, а другие службы бесплатны только в первые 12 месяцев. Я рекомендую просмотреть ссылку выше, чтобы понять, что бесплатно, а что нет. Для S3 мы получаем 5 гигабайт бесплатно в течение первых 12 месяцев, а после этого это очень дешево. Существует много уровней хранения, и цены будут зависеть от того, какой уровень вы выберете, но это выходит за рамки данной статьи. Ваши первые 50 ТБ хранилища для стандартного уровня, если бы вы не были на уровне бесплатного пользования, составили бы 0,023 доллара США за ГБ. Я надеюсь, что это поможет вам понять, насколько это очень дешевое решение для публикации веб-приложений всему миру. Возвращаясь к созданию нашей учетной записи, вам нужно будет ввести действующий адрес электронной почты, пароль и имя для своей учетной записи. Я буду создавать личный кабинет; заполните все соответствующие поля и продолжайте. И последнее, но не менее важное: вам нужно будет ввести данные своей кредитной карты. С вас могут взиматься деньги, если вы пользуетесь определенными услугами. Одна из основных причин, по которой я боялся AWS, когда начинал, я всегда боялся, что сделаю что-нибудь, и это будет стоить кучу денег. Это возможно, и почти все, кого я знаю, кто работал с AWS, рассказывают об этом (включая меня). Последний шаг к настройке в AWS - это проверка личности, которую я выбрал и выполнил с помощью SMS-сообщения. Для своего плана поддержки я выбрал Базовый, потому что он бесплатный. Если вас интересует дополнительная информация о планах поддержки, см. Дополнительную информацию здесь. Теперь ваша учетная запись настроена и готова к работе.

Начало работы с S3

Как я уже упоминал, легко ошибиться и случайно что-то запустить или что-то не остановить, играя с сервисами AWS. Настройка предупреждений о выставлении счетов даст вам уверенность в том, что вы будете предупреждены, если в вашей учетной записи есть приблизительные начисленные платежи. Теперь, настройка этого не помешает AWS взимать с вас плату, она просто предупредит вас. Вы обязаны перейти на AWS, войти в систему и остановить любые сервисы, за которые взимаются эти платежи. Другими словами, чем ниже порог, тем лучше, и иногда я устанавливаю низкий и высокий порог, чтобы просто лучше понять, к чему стремится мой счет, не тратя время на ежедневную проверку консоли биллинга. Для этого сначала мы войдем в свою учетную запись AWS и перейдем к раскрывающемуся списку услуг в заголовке. Найдите Cloudwatch и щелкните по нему. После перехода к Cloudwatch нам нужно будет убедиться, что мы находимся в регионе us-east-1 или в Северной Вирджинии. На момент написания этой статьи это единственный регион, который поддерживает биллинг сигналов тревоги Cloudwatch. Оказавшись в нужном регионе, не забудьте выбрать вариант оплаты в левой навигационной панели, а затем нажмите Create Alarm. Единственное, что мы сделаем в этом представлении, - это добавим сумму, о которой мы хотим получать уведомления. Например, если вы готовы потратить 5 долларов, то, возможно, вы захотите получить уведомление, когда расчетная стоимость превысит эту сумму. Для этой учетной записи я не хотел бы тратить деньги, поэтому я поставлю 0. Нажав «Далее», мы можем настроить, какое действие должно выполняться при превышении порогового значения. Используйте функцию создания новой темы, чтобы создать новую тему с указанием вашего адреса электронной почты. Нажмите «Далее» и дайте своему будильнику имя, а нажатие «Далее» приведет вас к окончательному экрану просмотра. Наконец, нажмите Create Alarm, и теперь вы получите уведомление, если ваши расчетные расходы превысят 0.

Делимся нашим приложением со всем миром

S3 (Simple Storage Service) - это сервис хранилища объектов с высокой доступностью (99,99%) и высокой надежностью (99,9999999%), предлагаемый Amazon Web Services. Это незаменимый сервис при использовании AWS для дешевого и надежного хранения изображений и файлов. В этой статье мы будем использовать S3 для хранения статических ресурсов, созданных нашим загружаемым приложением React, и воспользуемся преимуществами специальной функции S3, чтобы использовать нашу корзину для размещения нашего приложения. Во-первых, нам нужно понять, что при создании корзины S3 мы должны выбрать регион Amazon, в котором будет располагаться наша корзина. Несмотря на то, что мы выбираем конкретный регион для нашей корзины, имя корзины S3 должно быть глобально уникальным. Как зарегистрированный пользователь AWS нажмите кнопку сервисов и найдите S3 в разделе «Хранилище» (или просто воспользуйтесь строкой поиска). После перехода к службе S3 нажмите кнопку Create Bucket. Я решил назвать свое medium-article-test-bucket, но вам нужно будет выбрать собственное имя, поскольку сегменты должны быть глобально уникальными. Оставьте все настройки по умолчанию и нажмите Create Bucket. Как только ваша корзина будет создана, вы готовы загружать свой контент. Щелкните имя только что созданного сегмента. Нажав кнопку загрузки, вы перейдете в режим загрузки. Здесь вы можете нажать «Добавить файлы», чтобы открыть программу просмотра файлов для вашей операционной системы и перейти к приложению React, которое мы загрузили ранее. Вам нужно будет добавить все файлы из папки сборки с помощью команды add files. Поскольку он содержит папку, вам нужно будет использовать кнопку «Добавить папку», чтобы добавить папку. Наконец, нажмите upload и дождитесь загрузки файлов.

Заключение

/* обеспечит доступ ко всем файлам в корзине. Как только это будет установлено и сохранено, вы сделали это! Вернитесь на предыдущую страницу и. после обновления обратите внимание, что наш 403 исчез, и теперь мы можем видеть, что наше загруженное приложение React работает!

"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",

Выполнив шаги, описанные в этой статье, вы немного познакомились с AWS, приступили к работе с новой учетной записью и настроили очень важный платежный сигнал. Если вы решите продвигаться вперед и продолжать использовать другие сервисы в AWS, эти сигналы тревоги имеют решающее значение для удержания ваших затрат под контролем. Мы загрузили некоторые статические ресурсы с помощью приложения Create React, которое затем загрузили в корзину S3. Наконец, мы установили свойства корзины, чтобы она была настроена для статического веб-хостинга, и сделали файлы общедоступными, чтобы любой мог сделать запрос GET для их извлечения. Теперь выходите и настройте приложение, которое вы создавали на S3, и поделитесь им со всем миром!

Какой следующий шаг?

Как насчет добавления персонального домена в эту смесь?

Несмотря на то, что мы загрузили наши файлы, по умолчанию все сегменты S3 блокируют любой общий доступ. Поскольку мы не вносили никаких изменений в настройки по умолчанию, в настоящее время все файлы являются личными. Давайте начнем с первого шага по настройке нашего сегмента для статического хостинга. Мы хотим начать с представления на уровне корзины. Если вы до сих пор следовали руководству, вы просто увидите все файлы, как если бы мы просматривали верхний уровень папки сборки. Сначала нажмите Properties, чтобы изменить свойства сегмента. Прокрутите вниз до statice web hosting и нажмите кнопку edit. Это позволит вам включить статический хостинг, что откроет множество других возможностей. Единственный вариант, который нас сейчас волнует, - это заполнить индексный документ нашим именем файла index.html. Поскольку требуется опция файла с ошибкой и она не создается по умолчанию загруженным приложением React, я также помещу для нее index.html. Не забудьте нажать Save Changes. После сохранения обратите внимание на появившийся URL: http://YOUR_BUCKET_NAME.s3-website-us-west-1.amazonaws.com/. Вот как ваши пользователи будут получать доступ к контенту. Идите и щелкните по нему! Уф. 403 Запрещено. Почему? Причина в том, что даже несмотря на то, что мы включили статический хостинг, все наши файлы по-прежнему являются частными. Это тип крошечных вещей, которые могут свести вас с ума, когда вы пытаетесь заставить что-то работать на AWS. Итак, давайте настроим разрешения, чтобы любой мог получить эти файлы. Мы начнем с корневого уровня корзины, и на этот раз мы должны щелкнуть вкладку «Разрешения». Это позволит нам сначала настроить Block public acess (bucket settings) параметры, нажав кнопку «Изменить» и сняв флажок «Блокировать весь общедоступный доступ». Это позволит нам вносить изменения в корзину, чтобы сделать файлы общедоступными. По ряду шагов, которые нам пришлось предпринять, вы можете видеть, что Amazon очень серьезно относится к тому, чтобы сделать ваши файлы общедоступными для других. Это становится очевидным во-первых, потому что для этого нужно сделать огромное количество шагов, а во-вторых, за ними следуют подтверждения, чтобы убедиться, что мы точно знаем, что делаем. Теперь, когда у нас есть возможность вносить изменения в общедоступные настройки, давайте сделаем это, создав политику сегмента. Сначала на вкладке "Разрешения" щелкните Edit на вкладке Bucket Policy, а затем щелкните Policy Generator. Генератор политик - это простой способ быстро создавать политики, практически не зная, как они написаны в JSON. Тип политики будет S3 Bucket Policy. Мы хотим, чтобы принципал * (означает кто угодно) мог выполнять действие GetObject. Нам понадобится этот флажок, установленный в разделе «Действия». Наконец, нам нужен сегмент ARN, который ждет вас на странице, на которой вы только что нажали генератор политики. После нажатия Add Statement кнопка «Создать политику» становится активной, и нажатие на нее дает нам нашу политику в формате JSON. Скопируйте JSON и вернитесь на страницу, с которой мы изначально начали. Вставьте сгенерированную политику и измените одну строку:

«Использование собственного домена со статически размещенным приложением S3
Размещение статического веб-приложения в сервисе хранения Amazon S3, который дешев и надежен, не составляет труда. Когда вы… completedev.medium.com »