Это руководство поможет вам запустить простой личный или профессиональный веб-сайт, размещенный на AWS S3 и созданный с использованием React. React - это библиотека Javascript для построения пользовательских интерфейсов. Допустим, вы все еще изучаете React и другие технологии, связанные с веб-дизайном, и вам нужен рентабельный способ создания и экспериментов с вашим собственным действующим веб-сайтом. Лучший способ добиться этого - разместить веб-сайт в AWS S3, поскольку он предлагает бесплатный уровень использования в течение 12 месяцев: 5 ГБ стандартного хранилища Amazon S3, 20 000 запросов Get и 2 000 запросов Put. Это означает, что вы будете платить меньше доллара в месяц, пока ваш сайт не начнет получать серьезный трафик.

Шаг 1. Создайте приложение для реагирования локально

Чтобы создать приложение для реагирования, вы должны сначала установить node и npm. Чтобы установить оба:

Если вы используете Mac и установлен Homebrew, запустите brew install node
Другие варианты для Mac OS: https://nodejs.org/en/download/package-manager/#macos < br /> Windows: https://nodejs.org/en/download/package-manager/#windows
Загрузки: https: // nodejs.org

После завершения установки вы можете создать новое приложение, запустив:

npx create-react-app my-app
cd my-app
npm start

Как только это будет завершено, откроется ваш браузер с адресом localhost:3000. Любые изменения, внесенные вами в код реагирующего приложения, будут немедленно отражены в браузере.

Шаг 2. Создайте локальный веб-сайт для развертывания

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

npm run build

Это позволит экспортировать все ресурсы и создать единый миниатюрный файл Javascript путем правильного объединения React и оптимизации приложения для достижения максимальной производительности. После завершения этой команды все ресурсы вашего веб-сайта будут в папке сборки. Теперь ваш веб-сайт готов к развертыванию в AWS.

Шаг 3. Создайте учетную запись AWS

Если у вас уже есть учетная запись Amazon, вы можете пропустить этот шаг. Зайдите на aws.amazon.com и создайте новую учетную запись. Обратите внимание, что для создания учетной записи AWS требуется информация о кредитной карте для выставления счетов, платежей и во избежание мошенничества.

Шаг 4. Создайте корзину S3

Войдите в свою учетную запись AWS. Откройте S3 из консоли AWS. Нажмите «Создать сегмент».

Если вы планируете использовать доменное имя для своего веб-сайта, создайте сегмент с тем же именем. Если имя домена вашего веб-сайта - «abc.com», тогда имя сегмента S3 также должно быть «abc.com».

Введите имя сегмента и нажмите «Создать».

Шаг 5. Настройте статический хостинг веб-сайтов в S3

Перейдите в свойства корзины S3 и включите «Статический хостинг веб-сайтов». Выберите «Использовать этот сегмент для размещения веб-сайта». Предоставьте index.html как индексный документ и документ об ошибке.

Запишите свою конечную точку. Это URL-адрес, по которому вы можете получить доступ к своему веб-сайту. Когда вы закончите, нажмите «Сохранить».

Шаг 6. Сделайте общедоступными разрешения на чтение корзины S3

Поскольку к вашему веб-сайту должен иметь доступ любой пользователь в Интернете, доступ для чтения корзины S3 должен быть общедоступным. Для этого откройте сегмент «Разрешения» и вставьте приведенную ниже политику, заменив ее именем сегмента.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/*"
        }
    ]
}

Шаг 7. Загрузите содержимое веб-сайта на S3.

Теперь вам нужно загрузить содержимое папки сборки в корзину S3.

Откройте корзину S3 и нажмите «Загрузить». Перетащите содержимое папки сборки в окно загрузки. Проверьте, присутствует ли все содержимое вашей папки сборки, включая подпапки и файлы. Убедившись в этом, нажмите «Загрузить».

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

Шаг 8: (Необязательно) Настройте быстрое развертывание на S3

Каждый раз, когда вы вносите изменения в свой веб-сайт локально, вам необходимо вручную загрузить содержимое каталога сборки в S3, чтобы внести изменения в действующий веб-сайт. Чтобы этого избежать, вы можете установить AWS CLI и настроить его со своими учетными данными AWS. После этого вы можете загрузить содержимое каталога сборки, используя следующую команду.

aws s3 cp build/ s3://<your_bucket_name> --recursive

Чтобы еще больше упростить это, вы также можете добавить эту команду в раздел скриптов файла package.json, который вы можете найти в папке вашего приложения реакции.

"scripts": {     
  "start": "react-scripts start",     
  "build": "react-scripts build",     
  "predeploy": "react-scripts build",     
  "deploy": "aws cp build s3://<your_bucket_name> --recursive",
  "test": "react-scripts test --env=jsdom",     
  "eject": "react-scripts eject"   
}

Теперь вы можете сделать npm run deploy, чтобы развернуть содержимое папки сборки на S3.

Исходя из моего опыта, использование AWS для простого веб-сайта намного дешевле, чем использование любого другого размещенного решения. Кроме того, вы можете расширить свое приложение для использования AWS Lambda и других предложений AWS. Удачного взлома!