Как развернуть живой веб-сайт ReactJS / Redux менее чем за 10 минут

У вас когда-нибудь была идея веб-приложения, которую вы хотели бы быстро прототипировать и разослать людям? Побывав на 8+ хакатонах и выиграв более $ 105 000 призовых, я нашел довольно хороший способ запустить и запустить полнофункциональный веб-сайт за

Превью развернутого сайта (демо)

TL; DR шаги:

Запустите ReactJS локально, используя шаблон (время: ~ 2 минуты)
Настройка сегмента S3 AWS (Amazon Web Services) (время: ~ 5 минут)
Создайте учетные данные пользователя AWS для загрузки файлов в S3 (время ~ 2 минуты)
Развернуть шаблон в AWS (время: ~ 1 минута)
Убедитесь, что это работает, и начните создавать свое приложение!

Предварительные требования:

Node.j (версия ›v6.0)

Пряжа

Аккаунт AWS (все здесь распространяется на бесплатный уровень)

1. Запустите ReactJS локально, используя шаблон (время: ~ 2 минуты)

а) Клонируйте шаблон (выполните следующие команды в своем терминале)

$ git clone -o onederful-quickstart -b master --single-branch \
       https://github.com/alxyee/onederful-quickstart.git NameOfApp
$ cd NameOfApp

б) Установите все библиотеки

$ yarn install

c) Запустите React локально (http: // localhost: 3000 /)

$ yarn start

2. Настройте корзину AWS S3 (время: ~ 5 минут).

а) Войдите в консоль AWS и нажмите S3.

б) Нажмите "Создать сегмент" и введите имя сегмента (пример: onederful-quickstart). Нажмите "Далее" на всех оставшихся этапах и создайте сегмент.

c) В представлении списка щелкните только что созданный сегмент.

г) Появится всплывающее окно, нажмите "Свойства"

д) Нажмите Статический хостинг веб-сайтов и введите index.html в оба поля Индексный документ и Документ об ошибке.

е) Щелкните вкладку разрешений, скопируйте и вставьте политику (заменив [ИМЯ ВАШЕГО ВЕДРА] на имя своего сегмента)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[YOUR BUCKET NAME]/*"
        }
    ]
}

3. Создайте учетные данные пользователя AWS для загрузки файлов в S3 (время ~ 2 минуты).

а) В консоли AWS щелкните IAM (Identity Access Manager).

б) Щелкните вкладку Пользователи на боковой панели. Добавьте пользователя с именем s3-admin

в) Прикрепите политику AmazonS3FullAccess

г) После создания пользователя отслеживайте свои ID ключа доступа и Секретный ключ доступа (учетные данные будут использоваться на последнем этапе)

4. Разверните шаблон в AWS (время: ~ 1 минута).

а) Измените учетные данные в файле (tools / s3-upload.js) и замените: 'YOUR_BUCKET_NAME' именем вашего сегмента (шаг 2b) 'YOUR_AWS_ACCESS_KEY' с вашим идентификатором ключа доступа (шаг 3d) YOUR_AWS_SECRET_KEY ' с вашим секретным ключом доступа (шаг 3d)

б) Создайте и разверните приложение быстрого запуска (запускайте эту команду всякий раз, когда вы хотите развернуть изменение в своем веб-приложении)

$ yarn publish:webapp

5. Убедитесь, что это работает, и начните создавать свое приложение!

Протестируйте конечную точку (из 2e) в своем браузере и убедитесь, что она работает. Если да, то вы готовы к настоящей работе по созданию своего приложения!

Подводя итог: использовал шаблон, чтобы быстро получить работающее веб-приложение с использованием ReactJS / Redux, работающего на локальном хосте. Настройте AWS S3 для размещения веб-сайта с общедоступной конечной точкой. Настройте учетные данные AWS, чтобы мы могли развернуть шаблон на S3 из командной строки.

Настройку AWS нужно выполнить только один раз, поэтому теперь, если вы внесете какие-либо изменения в свое веб-приложение, вы можете запустить команду развертывания (4b), и через несколько секунд изменения будут активны.

Следующие шаги

Еще пара пошаговых руководств в разработке:

Как быстро создать клон yelp, используя конечную точку GraphQL www.onederful.co (ReactJS + GraphQL + дизайн, управляемый желаниями!)
Как запрашивать API-интерфейсы нескольких компаний с помощью конечной точки GraphQL www.onederful.co
Настройка бессерверной конечной точки GraphQL (бессерверная платформа - AWS Lambda)
Настройка полностью бессерверного веб-приложения с использованием AWS Cognito (для управления пользователями) + AWS Lambda
Использование AWS Cloudfront + Route 53 для размещения CDN перед этим веб-приложением (включение кеширования + https для пользовательских доменов / поддоменов)

Ресурсы

Onederful Quickstart Repo

React Static Boilerplate

Документы по статическому хостингу AWS S3

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!

Как развернуть живой веб-сайт ReactJS / Redux менее чем за 10 минут