Ваш перший додаток React на AWS: Смілива інструкція до хмарної величі

NightCafe

Отже, ви хочете створити свій перший додаток на React і розгорнути його на AWS? Ви потрапили в правильне місце. Давайте створимо простий додаток "Hello, World!" за допомогою AWS Lambda, S3 та CloudFront, при цьому зробимо його доступним навіть для початківців (і трохи розважальним).

Крок 1: Необхідні умови (Не пропустіть це)

Перш ніж почати, вам знадобиться:

• Обліковий запис AWS. Якщо у вас його ще немає, перейдіть на AWS і зареєструйтесь.
• Встановлений Node.js на вашому комп'ютері. Завантажити можна тут.
• Базові знання React і команд терміналу (або бажання навчатися через спроби та помилки).
• Кава. За бажанням, але настійно рекомендується.

Крок 2: Створення додатка на React

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

npm create vite@latest hello-world --template react-ts

Це створить новий додаток React у папці під назвою hello-world. Перейдіть до цієї папки:

cd hello-world

Не соромтесь редагувати файл src/App.tsx, щоб замінити стандартний код на просте "Hello, World!":

function App() {  
 return (  
   <div>Hello, World!</div>
 );   
}   
export default App;

Запустіть npm run dev, щоб попередньо переглянути вашу майстерну роботу в браузері. Якщо все працює, чудово — ви на півшляху до слави.

Крок 3: Підготовка додатка до виробництва

Тепер потрібно побудувати ваш додаток, щоб він був готовий до виробництва:

npm run build

Це створить папку build, яка міститиме статичні файли вашого додатка.

Крок 4: Налаштування S3-бакету

1. Увійдіть у вашу консоль керування AWS та перейдіть до S3.
2. Створіть бакет. Дайте йому унікальне ім'я, наприклад my-react-app-bucket. (Порада: уникайте пробілів у іменах бакетів, якщо не хочете займатися дебагом.)
3. Увімкніть публічний доступ до бакету через вкладку Permissions. Вимкніть налаштування 'Block Public Access' і налаштуйте політику бакету. Перейдіть на вкладку Permissions вашого бакету, натисніть 'Bucket policy' і вставте таку політику JSON:

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

Замість your-bucket-name використайте фактичну назву вашого бакету. Це надає публічний доступ до об'єктів усередині, зберігаючи сам бакет в безпеці.

1. Завантажте вміст вашої папки dist у бакет.

Крок 5: Налаштування S3 для статичного хостингу вебсайтів

1. У налаштуваннях вашого бакету перейдіть на вкладку Properties.
2. Увімкніть "Static website hosting".
3. Встановіть індексний документ на index.html.

Тепер ваш додаток технічно вийшов в ефір! Ви можете отримати веб-адресу бакету та переглянути ваш додаток.

Крок 6: Додайте CloudFront для розподілу

Щоб зробити ваш додаток швидким і безпечним:

1. Перейдіть до сервісу CloudFront в консолі AWS.
2. Створіть новий розподіл і вкажіть ваш S3 бакет як джерело.
3. Після розгортання CloudFront надасть вам URL для доступу до вашого додатка.

Voilà! Ваш додаток тепер працює на AWS — і виглядає чудово!

Крок 7: Бонусні бали з Lambda (Опційно)

Хочете додати трохи магії з бекенду? AWS Lambda ваш друг:

1. Перейдіть до сервісу Lambda в AWS.
2. Створіть функцію (з Node.js середовищем).
3. Напишіть просту обробку, що говорить "Hello":

exports.handler = async (event) => {
  return {
    statusCode: 200,
    body: "Hello from Lambda!",
  };
};

1. Розгорніть вашу функцію та підключіть її до API Gateway. Для цього перейдіть до сервісу API Gateway в консоль AWS, створіть нове HTTP API та зв'яжіть його з вашою функцією Lambda. Щоб зробити це, перейдіть до сервісу API Gateway в консолі AWS, виберіть 'Create API' і виберіть HTTP API. Під час процесу створення виберіть розділ ‘Integrations’, додайте інтеграцію Lambda-функції та виберіть вашу розгорнуту функцію. Далі в розділі ‘Routes’ додайте маршрут (наприклад, /hello) і зв’яжіть його з інтеграцією Lambda.
   Deploy the API to a stage (e.g., 'default') to get a public URL for testing. Under 'Routes,' define a route for your endpoint (e.g., /hello) and map it to the Lambda integration. Deploy your API and note the endpoint URL provided. Test the URL in your browser or a tool like Postman to ensure your Lambda function responds as expected.

Now your React app can call the Lambda function via the API Gateway. Fancy!

Крок 8: Насолоджуйтесь своєю славою

Вітаємо! Ви щойно розгорнули свій перший додаток React на AWS. Винагородьте себе чимось смачним, наприклад, перекусом або добре заслуженим сном.

Deep Dream Generator

Художній запит

Створіть цифрову картину в імпресіоністському стилі спокійного озерного села на світанку, з м'яко розмитими краями, теплими пастельними відтінками та відображеннями в спокійній воді. Додайте маленькі човни, пришвартовані до дерев'яних причалів, та тонкі натяки на ранкову активність, такі як жителі села, що йдуть по брукованій доріжці.

Чи був цей посібник корисним для вас? Заплутаним? Смішним? Дайте мені знати в коментарях! Не забувайте підписатися, щоб отримувати більше хаосу в хмарі та порад з програмування.

Перекладено з: Your First React App on AWS: Sassy Guide to Cloud Greatness