Развертывание приложения React с AWS S3

Для развертывания приложения React требуется несколько пакетов для объединения файлов и преобразования кода в JavaScript.

В этом руководстве по React мы сначала объединим нашего React Chatbot с webpack и Babel. Затем в следующем разделе мы развернем его в корзине AWS S3.

Что нужно для сборки приложения React?

Приложение React
Установить и настроить webpack и webpack-cli
Установить и настроить Babel
Установите и настройте плагин HTML webpack
Установить и настроить сервер разработки webpack

Все эти пакеты подробно обсуждаются ниже.

Создание приложения React

В этом руководстве предполагается, что вы уже создали и настроили свое приложение React с помощью Facebook’s create-response-app. Однако с помощью этого метода можно развернуть любое приложение React.

Интерфейс командной строки для веб-пакетов и веб-пакетов

Что такое веб-пакет?

Webpack - это сборщик модулей JavaScript. Выпущенный в 2012 году, он имеет открытый исходный код и предназначен для современных приложений JavaScript.

Webpack связывает HTML, CSS, JS и изображения, создавая статические ресурсы, представляющие эти исходные модули.

Зачем использовать webpack с React?

Webpack объединит все компоненты React в сжатые ресурсы, которые легко читаются веб-браузерами.

Установите webpack и webpack-cli

Установите webpack и webpack-cli - командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm install webpack webpack-cli --save-dev

Установите webpack и webpack-cli - терминал macOS

User-Macbook:react-chatbot user$ npm i webpack webpack-cli --save-dev

Установите webpack и webpack-cli в каталог вашего приложения. Установка займет несколько минут.

Обновите файл packages.json

react-chatbot ›package.json

...
"scripts": {
    "start": "react-scripts start",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

Затем перейдите в файл package.json и замените "build":"react-scripts build" на "build":"webpack --mode production", как показано выше.

Вавилон

Пришло время установить Вавилон.

Что такое Babel?

Babel - это компилятор JavaScript, который преобразует код JavaScript нового поколения в совместимый с браузером JavaScript.

Зачем использовать Babel с React?

Babel преобразует компоненты класса React, переменные ES6 и код JSX в обычный JavaScript, чтобы старые браузеры могли правильно отображать компонент.

Установить Babel

Установите Babel и его зависимости - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Установите Babel и его зависимости - терминал macOS

User-Macbook:react-chatbot user$ npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Мы установим babel-loader, загрузчик веб-пакетов для Babel, babel/preset-env, который соответствует JavaScript для ES5, и babel/preset-react для компиляции JSX в JS.

Создайте новый файл с именем .babelrc.

response-chatbot ›(новый файл) .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

После установки создайте файл с именем. babelrc в каталоге вашего приложения. Это тот же каталог, что и package.json.

Создайте новый файл с именем webpack.config.js.

response-chatbot ›(новый файл) webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

Кроме того, создайте еще один файл с именем webpack.config.js. Снова создайте этот файл в каталоге приложения, в той же папке, что и package.json.

В приведенном выше коде указано, что если файл заканчивается на .js или .jsx, пусть веб-пакет отправит код через babel-loader.

Создайте пакет

Теперь мы можем создать бандл.

Запустите команду сборки

npm run build — Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm run build

npm run build — Терминал macOS

User-Macbook:react-chatbot user$ npm run build

Запустите команду npm run build, и сценарий "webpack --mode production" в файле package.json будет запущен.

В командной строке будет указано, что актив main.js был создан и webpack успешно скомпилирован.

Просмотреть dist ›main.js

react-chatbot ›dist› main.js

/*! For license information please see main.js.LICENSE.txt */
(()=>{var e={669:(e,t,n)=>{e.exports=n(609)},592:(e,t,n)=>{"use strict";var r=n(867),o=n(26),i=n(372),a=n(327),l=n(97),u=n(109),s=n(985),c=n(61);e.exports=function(e){return new Promise((function(t,n){var f=e.data,p=e.headers;r.isFormData(f)&&delete ...(e.Component);t.render(e.createElement(j,null),document.getElementById("root"))})()})();

Если вы посмотрите на файловую структуру приложения, вы заметите новый каталог с именем dist с файлом с именем main.js. Файл main.js - это связанная версия всего приложения React.

Добавление пакета на HTML-страницу

Создав пакет, давайте загрузим его в файл HTML.

Установите еще два пакета для веб-пакета

Установите html-webpack и html-loader - командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm install html-webpack-plugin html-loader --save-dev

Установите html-webpack и html-loader - терминал macOS

User-Macbook:react-chatbot user$ npm install html-webpack-plugin html-loader --save-dev

Выполните команду npm install html-webpack-plugin html-loader --save-dev, чтобы установить html-webpack-plugin и html-loader.

Обновите файл webpack.config.js

react-chatbot ›webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
};

Затем обновите файл webpack.config.js, добавив новую const переменную с именем HtmlWebPackPlugin, которая вызывается в plugins.

Также добавьте еще одно правило, которое гласит, что если файл заканчивается на .html, пусть веб-пакет отправляет код через html-loader.

Если вы использовали create-response-app для создания своего приложения React, index.html находится в общедоступной папке. Ссылка на файл со строчкой template:"./public/index.html", как показано в примере выше.

В противном случае, если ваш index.html находится в каталоге src, используйте template:"./src/index.html".

Снова запустите команду сборки

npm run build - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm run build

npm run build - терминал macOS

User-Macbook:react-chatbot user$ npm run build

Выполните команду npm run build еще раз, чтобы связать файл index.html и создать связанный ресурс в dist ›index.html.

Просмотрите файл dist ›index.html

react-chatbot ›dist› index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="%PUBLIC_URL%/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/><link rel="manifest" href="%PUBLIC_URL%/manifest.json"/><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="main.js"></script></body></html>

Если вы посмотрите на новый файл с именем index.html в папке dist, вы увидите, что это скомпилированная версия HTML-кода из общедоступного ›индекса. html.

Настройка сервера разработки с помощью webpack

Теперь наш проект объединен, поэтому, чтобы не приходилось run npm build каждый раз вносить изменения, установите webpack-dev-server.

Установите webpack-dev-server

Установите webpack-dev-server - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm install webpack-dev-server --save-dev

Установите webpack-dev-server - терминал macOS

User-Macbook:react-chatbot user$ npm install webpack-dev-server --save-dev

Запускаем npm install webpack-dev-server.

Обновите файл packages.json

react-chatbot ›package.json

...
"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

Затем обновите файл package.json новым скриптом для npm start.

Запустите сервер разработки

Установите webpack-dev-server - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm start

Установите webpack-dev-server - терминал macOS

User-Macbook:react-chatbot user$ npm start

Теперь, когда вы run start, сервер разработки webpack запустит связанную версию приложения в браузере.

Развертывание приложения React в корзине AWS S3

Если вы хотите прочитать больше материалов, связанных с AWS, обязательно ознакомьтесь с AWS in Plain English.

Теперь, когда наше приложение связано, мы можем развернуть сжатые файлы в корзине AWS S3.

Что требуется для развертывания приложения React в корзине S3?

Создайте бесплатную учетную запись AWS
Создайте корзину S3
Установить и настроить AWS CLI

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

Создайте бесплатную учетную запись AWS на странице https://aws.amazon.com/free/.

Предоставьте своему имени пользователя разрешения AWS S3 с помощью IAM

Перед созданием корзины S3 необходимо предоставить пользователю разрешение на использование AWS S3.

Чтобы предоставить пользователю разрешения S3:

Войти в AWS
На странице Консоль управления AWS найдите службу IAM (a) в разделе Безопасность, идентификация и соответствие раздела Все службы или (b) набрав IAM в строке поиска.
Щелкните ссылку IAM.
Перейдите на вкладку Пользователи в разделе Управление доступом в левом боковом меню.
Щелкните имя пользователя, которому вы хотите предоставить доступ
Нажмите кнопку «Добавить разрешения».
Выберите «Присоединить существующие политики напрямую» и введите AmazonS3FullAccess.
Нажмите кнопку «Далее: обзор».
Убедитесь, что разрешение было добавлено правильному пользователю на странице сводки разрешений.
Нажмите «Добавить разрешение», чтобы сохранить изменения.

Создайте корзину S3 для своего приложения React

Теперь, когда добавлены необходимые разрешения, вы можете создать свою корзину S3.

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

Чтобы создать корзину S3:

На странице Консоли управления AWS найдите сервис S3 (а) в разделе «Хранилище» в разделе «Все сервисы» или (б), введя S3 в строке поиска.
Щелкните ссылку S3
Нажмите кнопку «Создать корзину» в правой части экрана.

На странице "Создать сегмент":

В разделе Общая конфигурация:

назовите свое ведро и разделите свой регион

В настройках сегмента для блокировки общего доступа:

снимите флажок "Блокировать весь публичный доступ"
выберите окно с предупреждением, в котором говорится: «Блокировка Тьюринга, весь открытый доступ может привести к тому, что этот сегмент и объекты в нем станут общедоступными»

Оставьте остальные конфигурации по умолчанию такими же
Нажмите кнопку «Создать корзину» внизу страницы.

Обновить разрешения сегмента S3

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

Чтобы добавить разрешения:

Нажмите на свою корзину S3
Выберите вкладку «Разрешения».
Нажмите кнопку «Политика корзины».
В редакторе политик сегмента добавьте следующий код, заменив "Resource" именем вашего сегмента.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowPublicReadAccess", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::name-of-your-bucket/*" } ] }

По завершении нажмите кнопку «Сохранить».

Добавить конфигурации CORS

Мы также добавим конфигурации CORS в корзину S3, чтобы разрешить запросы из разных источников.

Чтобы добавить конфигурации CORS:

Нажмите на свою корзину S3
Выберите вкладку «Разрешения».
Нажмите кнопку «Конфигурация CORS».
В редакторе конфигурации CORS добавьте следующий код

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <ExposeHeader>x-amz-meta-custom-header</ExposeHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

По завершении нажмите кнопку «Сохранить».

Установить AWS CLI

Корзина создана и настроена, поэтому теперь мы можем загрузить наш пакет приложения React в корзину S3.

Мы будем загружать через интерфейс командной строки AWS.

Пожалуйста, следуйте инструкциям по установке AWS CLI для вашей конкретной ОС, прежде чем продолжить.

Убедитесь, что интерфейс командной строки AWS установлен

Установите webpack-dev-server - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> aws --v
aws-cli/2.0.47 Python/3.7.4 Windows/10 botocore/2.0.0

Установите webpack-dev-server - терминал macOS

User-Macbook:react-chatbot user$ aws --v
aws-cli/2.0.47 Python/3.7.4 Darwin/18.7.0 botocore/2.0.0

После завершения процесса установки запустите команду aws --v, чтобы убедиться, что установка прошла успешно.

Создайте набор ключей доступа к AWS

При использовании интерфейса командной строки AWS необходимо предоставить набор ключей доступа к AWS, чтобы интерфейс командной строки мог правильно подключиться к вашей учетной записи AWS.

Чтобы создать набор ключей:

Нажмите на свое имя пользователя в правом верхнем углу.
В раскрывающемся меню выберите Мои учетные данные безопасности.
Нажмите кнопку «Создать ключ доступа» в разделе Ключи доступа для доступа к интерфейсу командной строки, SDK и API.
Во всплывающем меню появятся две клавиши доступа.
Нажмите кнопку «Загрузить файл .csv» и сохраните ключи.

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

Если вы все же потеряете ключи доступа, просто создайте еще один набор.

Настройте интерфейс командной строки AWS

Настройка интерфейса командной строки AWS - командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> aws configure
AWS Access Key ID:****************
AWS Secret Access Key:****************
Default region name [us-west-1]:
Default output format [None]:

Настройка интерфейса командной строки AWS - терминал macOS

User-Macbook:react-chatbot user$ aws configure
AWS Access Key ID:****************
AWS Secret Access Key:****************
Default region name [us-west-1]:
Default output format [None]:

В командной строке вашего проекта запустите команду aws configure. Затем введите свой ключ доступа к AWS и секретный ключ AWS, созданный на предыдущем шаге.

Затем вы можете пропустить оставшийся раздел конфигурации, нажимая Enter для каждого из них.

Обновите файл package.json

react-chatbot ›package.json

...
"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "aws s3 sync dist/ s3://name-of-your-bucket"
  },
...

Перейдите в package.json и добавьте новый скрипт для развертывания: "deploy": "aws s3 sync webpack/dist/ s3://name-of-your-bucket".

Обязательно замените name-of-your-bucket на правильное имя сегмента и сохраните файл.

Развернуть в сегменте AWS S3

Развертывание в сегменте S3 - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm run build

C:\Users\Owner\desktop\react\react-chatbot> npm run deploy

Развертывание в сегменте S3 - терминал macOS

User-Macbook:react-chatbot user$ npm run build

User-Macbook:react-chatbot user$ npm run deploy

Вернитесь в свой интерфейс командной строки и запустите npm run build, чтобы объединить любые изменения, затем npm run deploy, чтобы загрузить пакет в корзину S3.

Все файлы в каталоге dist будут загружены в корзину S3.

Превратите корзину S3 в домен

Чтобы сделать ваш S3 доменом:

Нажмите на свое ведро
Вы должны увидеть файлы index.html, main.js, и main.js.LICENSE.txt.
Выберите вкладки «Свойства».
Щелкните карточку «Статический хостинг веб-сайтов».
Нажмите кнопку «использовать этот сегмент для размещения веб-сайта».
Введите index.html в качестве «Индексирующего документа» и «документа с ошибкой».
Нажмите кнопку «Сохранить», чтобы закончить

Если вы снова посмотрите на карточку, вы должны заметить конечную точку URL.

Щелкните этот URL-адрес, и ваше приложение появится в новой вкладке браузера.

Устранение распространенных ошибок, которые могут возникнуть

ERROR: 'MODULE_NOT_FOUND" webpack-dev-server

code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Owner\\Desktop\\react\\react-chatbot\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --open --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Если вы получаете сообщение об ошибке при запуске npm start после установки webpack-dev-server, вам необходимо понизить версию webpack-cli.

1. Обновите package.json.

react-chatbot ›package.json

...
 },
  "devDependencies": {
    ...
    "webpack-cli": "^3.3.12",
    ...
  }
}

Измените версию "webpack-cli" на "^3.3.12", версию webpack-cli без ошибки, в package.json.

Обязательно сохраните файл.

2. Переустановите webpack-cli.

Установите webpack-dev-server - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm install

Установите webpack-dev-server - терминал macOS

User-Macbook:react-chatbot user$ npm install

Затем запустите npm install, чтобы установить версию, указанную в package.json.

3. Снова запустите сервер разработки.

Запустите сервер разработки веб-пакетов - Командная строка Windows

C:\Users\Owner\desktop\react\react-chatbot> npm start

Установите сервер разработки веб-пакетов - терминал macOS

User-Macbook:react-chatbot user$ npm start

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

ERROR: Failed to parse json; Unexpected token } in JSON

npm ERR! code EJSONPARSE
npm ERR! file C:\Users\Owner\Desktop\code\react\react-chatbot\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 662 while parsing near '...y-react-example",
npm ERR! JSON.parse   },

Если вы получаете эту ошибку при попытке запустить npm run build, убедитесь, что в конце последнего добавленного скрипта нет запятой.

ERROR: fatal error: An error occurred (NoSuchBucket) when calling the ListObjectsV2 operation: The specified bucket does not exist

fatal error: An error occurred (NoSuchBucket) when calling the ListObjectsV2 operation: The specified bucket does not exist
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `aws s3 sync dist/ s3://deploy-react-example`
npm ERR! Exit status 1

Если эта ошибка возникает при попытке развертывания в сегменте S3, вероятно, вы неправильно написали имя сегмента в package.json.

Первоначально опубликовано на https://ordinarycoders.com.

Развертывание приложения React с AWS S3

Что нужно для сборки приложения React?

Интерфейс командной строки для веб-пакетов и веб-пакетов

Что такое веб-пакет?

Зачем использовать webpack с React?

Установите webpack и webpack-cli

Обновите файл packages.json

Вавилон

Что такое Babel?

Зачем использовать Babel с React?

Установить Babel

Создайте новый файл с именем .babelrc.

Создайте новый файл с именем webpack.config.js.

Создайте пакет

Запустите команду сборки

Просмотреть dist ›main.js

Добавление пакета на HTML-страницу

Установите еще два пакета для веб-пакета

Обновите файл webpack.config.js

Снова запустите команду сборки

Просмотрите файл dist ›index.html

Настройка сервера разработки с помощью webpack

Установите webpack-dev-server

Обновите файл packages.json

Запустите сервер разработки

Развертывание приложения React в корзине AWS S3

Что требуется для развертывания приложения React в корзине S3?

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

Предоставьте своему имени пользователя разрешения AWS S3 с помощью IAM

Создайте корзину S3 для своего приложения React

Обновить разрешения сегмента S3

Добавить конфигурации CORS

Установить AWS CLI

Убедитесь, что интерфейс командной строки AWS установлен

Создайте набор ключей доступа к AWS

Настройте интерфейс командной строки AWS

Обновите файл package.json

Развернуть в сегменте AWS S3

Превратите корзину S3 в домен

Устранение распространенных ошибок, которые могут возникнуть

Вопросы по теме