Модуль 39

Деплой React-застосунку

Ось готовий урок, створений спеціально для тебе у стилі David Malan — енергійно, з живими прикладами та фокусом на розумінні суті процесу.

🎓 УРОК: ДЕПЛОЙ REACT-ЗАСТОСУНКУ

(Як показати свій код світові)

1. 🔥 Вступ: «localhost» працює тільки для вас

Уявіть ситуацію. Ви витратили тижні, створюючи свій ідеальний React-застосунок. Це, скажімо, ваш особистий трекер звичок. Він виглядає чудово, кнопки натискаються, анімації плавні.

Ви такі горді, що копіюєте посилання з браузера: http://localhost:3000/my-app і надсилаєте його другу в Telegram: "Заціни, що я зробив!".

Через хвилину друг пише: "Емм... тут помилка. Сайт не відкривається".

Чому так сталося?

Тому що localhost — це ваша квартира. Коли ви даєте другу це посилання, ви, по суті, кажете йому: "Зайди у свою квартиру і подивись на стіл". Але на його столі вашого проєкту немає! Він є тільки у вас.

Щоб ваш застосунок побачили всі — друг, рекрутер, ваша бабуся — вам потрібно винести його з "квартири" на "міську площу". Цей процес і називається Деплой (Deployment).

Без деплою ваш код — це як геніальна рукописна книга, яка лежить у замкненій шухляді. Сьогодні ми відкриємо цю шухляду і надрукуємо тираж.

2. 🧠 Теоретична база: Що відбувається під капотом?

Перш ніж натискати кнопки, давайте розберемося, що таке React-застосунок насправді.

Коли ви пишете код, у вас є купу файлів: .jsx, .css, папки components, hooks тощо. Але браузер (Chrome, Safari) не розуміє JSX і складну структуру папок React "з коробки" так, як це робить Node.js середовище розробки.

Концепція "Білду" (Build)

Щоб браузер зрозумів ваш код, його треба "перекласти" і "спресувати". Цей процес називається Build.

Як це працює? Уявіть, що ви збираєтеся у подорож (це деплой). 1. Ваш код (Development): Це ваша шафа. Одяг розкиданий, шкарпетки в різних кутках, все зручно для вас, щоб швидко щось знайти й поміряти. 2. Build-процес: Це пакування валізи. Ви складаєте речі акуратно, випускаєте зайве повітря (мінімізація коду), викидаєте те, що не будете носити (tree shaking). 3. Результат (Production Build): Компактна валіза.

У світі React, коли ми робимо "Build", інструмент (Vite або Webpack) бере ваші 100 файлів і перетворює їх на: * Один (або декілька) .js файлів (Bundle). * Один .css файл. * Один index.html, який це все підтягує.

⚠️ Головне, що треба запам'ятати: Після білду ваш React-застосунок стає просто набором статичних файлів (як звичайна картинка чи текстовий документ). Йому більше не потрібен складний сервер з логікою (як для Python чи PHP), йому просто потрібно місце, звідки ці файли можна завантажити.

3. 🧪 Приклади: Від магії до реальності

Приклад 1: Що ми очікуємо побачити?

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

Але для деплою нам потрібна статика.

Давайте спробуємо команду:

npm run build

Що сталося? У вашій папці проєкту з'явилася нова папка: dist (якщо Vite) або build (якщо CRA). Загляньте всередину. Там немає компонентів. Там є файл типу index-x8s7f.js — це і є ваш "спакований" код. Цю папку можна закинути на будь-який хостинг, і сайт запрацює.

Приклад 2: Реальний деплой (Vercel / Netlify)

Найсучасніший спосіб — це автоматизація. Ми не будемо копіювати файли руками через FTP, як це робили в 2005 році.

Сценарій: 1. Ви заливаєте свій код на GitHub. 2. Ви реєструєтесь на Vercel (або Netlify). 3. Ви даєте Vercel доступ до вашого репозиторію.

Магія: Vercel сам побачить, що це React. Він сам запустить npm run build на своїх потужних серверах. І видасть вам посилання типу my-app.vercel.app.

Приклад 3: Проблема "Оновлення сторінки" (SPA Routing)

Трохи складніше, але критично важливо.

Уявіть, ви задеплоїли сайт. Заходите на головну: mysite.com. Все працює. Клікаєте в меню на "Про нас", URL змінюється на mysite.com/about. Все працює. Тепер натисніть F5 (Оновити сторінку).

Що ви очікуєте? Сторінку "Про нас". Що ви отримаєте? Помилку 404 Not Found.

Чому? 🤯 Тому що mysite.com/about — це не справжня папка на сервері. Це віртуальний шлях, який React малює в браузері. Коли ви оновлюєте сторінку, браузер йде на сервер і питає: "Дай мені файл about". А сервер каже: "У мене є тільки index.html, файлу about не існує!".

Рішення: Налаштувати сервер так, щоб на будь-який запит він віддавав index.html. Тоді React завантажиться і сам зрозуміє: "Ага, в адресному рядку /about, значить, треба показати компонент About".

4. 🛠 Практична частина

Час "забруднити руки". Виконайте ці кроки:

  1. 🔹 Локальний білд. Відкрийте свій проєкт. Запустіть npm run build. Переконайтеся, що папка dist (або build) з'явилася. Відкрийте згенерований index.html у браузері. (Спойлер: Скоріш за все, нічого не запрацює або картинки не підтягнуться, бо шляхи локальні. Це нормально!)

  2. 🔹 Симуляція сервера. Встановіть маленький інструмент: npm install -g serve. Запустіть у терміналі: serve -s dist. Тепер відкрийте посилання, яке він дав. Це імітація того, як сайт працюватиме в інтернеті.

  3. 🔹 GitHub. Створіть репозиторій на GitHub і залийте туди свій код (не забудьте файл .gitignore, щоб не залити node_modules!).

  4. 🔹 Деплой на Vercel (Найпростіший шлях).

    • Зайдіть на vercel.com.
    • Натисніть "Add New Project".
    • Виберіть свій репозиторій з GitHub.
    • Натисніть "Deploy".
    • Зачекайте феєрверків (конфетті на екрані).

  5. 🔹 Міні-кейс: Зміна на льоту.

    • Змініть заголовок у своєму коді локально (наприклад, "Привіт, світ!" на "Привіт, Інтернет!").
    • Зробіть git commit та git push.
    • Зайдіть на панель Vercel і подивіться, як він автоматично почав новий білд.
    • Через хвилину оновіть свій живий сайт. Магія CI/CD (Continuous Deployment) в дії!

  6. 🔹 Питання "А що, якщо...": Що буде, якщо я видалю репозиторій на GitHub? (Відповідь: Vercel більше не зможе отримувати оновлення, але остання версія сайту, ймовірно, продовжить працювати, доки ви не спробуєте зробити новий деплой).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі при деплої?

1. node_modules в Git. Новачок часто намагається завантажити папку node_modules на GitHub. Це 200+ мегабайт сміття. Як думає профі: "Мій код — це рецепт. node_modules — це інгредієнти. Сервер (Vercel) сам купить інгредієнти за моїм списком (package.json), мені не треба тягнути мішок картоплі з собою".

2. Змінні середовища (Environment Variables). У вас є API-ключ? Ніколи, чуєте, НІКОЛИ не пишіть його прямо в коді перед деплоєм, якщо код публічний. Як думає профі: "Я створю файл .env для локальної розробки, а на сервері (Vercel) в налаштуваннях пропишу ці ключі окремо. Так хакери не вкрадуть мої доступи".

3. "У мене працює, значить, скрізь працює". Це класична помилка. Як думає профі: "Я завжди перевіряю білд локально (npm run build), перш ніж пушити. Якщо білд падає через помилку лінтера, краще я дізнаюся про це зараз, ніж отримаю лист про провалений деплой".

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми перетворили ваш затишний домашній проєкт (localhost) на публічний веб-застосунок, доступний будь-кому з Токіо чи Нью-Йорка.

Тепер ви вмієте: * Розуміти різницю між dev (розробка) і build (продакшн). * Перетворювати React-код на статичні файли. * Використовувати Vercel для автоматичного деплою з GitHub.

Що далі? Ваш сайт в інтернеті, вітаю! Але... він вантажиться 3 секунди. Це занадто довго для сучасного світу. Як змусити React "літати"? На наступному уроці ми поговоримо про Оптимізацію та useMemo — як зробити так, щоб ваш код не робив зайвої роботи.

А поки — надішліть посилання на свій проєкт другу. Тепер воно точно відкриється! 🚀

← До списку уроків Наступний урок →