Вы устали от того, что ваше приложение React живет только на вашем локальном хосте? Готовы раскрыть его миру и показать своим друзьям, семье и, возможно, даже незнакомцам в Интернете? Что ж, тебе повезло! Существует несколько способов развертывания приложения React, и в этой статье мы рассмотрим все возможности и дадим вам пошаговое руководство, как это сделать.
Прежде всего, давайте поговорим о вариантах развертывания. К наиболее популярным вариантам относятся:
- Развертывание на страницах GitHub
- Развертывание в Netlify
- Развертывание в Heroku
- Развертывание в Firebase
- Развертывание в AWS Amplify
У каждого варианта есть свои плюсы и минусы, поэтому важно подумать, какой из них лучше всего подойдет для вашего конкретного случая использования.
- Страницы Github
Развертывание на GitHub Pages — отличный вариант, если вы уже используете GitHub для контроля версий. Это бесплатно и легко настроить, но у него есть некоторые ограничения, например, невозможность использования личного домена.
Вот как вы можете это сделать:
- Убедитесь, что у вас есть учетная запись GitHub и репозиторий для вашего приложения React.
- Установите пакет gh-pages: npm install gh-pages
- Добавьте сценарии домашняя страница и предварительное развертывание и развертывание в ваш package.json: домашняя страница: https://{username}.«github.io/{repo-name}', predeploy: npm run build, deploy: gh-pages -d build
- Запустите скрипт развертывания: npm run deploy
Теперь ваше приложение должно быть запущено по адресу https://{username}.github.io/{repo-name}.
2. Нетлифить
Развертывание в Netlify — еще один популярный вариант, который имеет множество функций, таких как бесплатный HTTPS, настраиваемые домены и непрерывное развертывание. Его также легко настроить, и это можно сделать всего за несколько кликов.
- Убедитесь, что у вас есть учетная запись Netlify и репозиторий для вашего приложения React.
- Подключите свой репозиторий к Netlify
- Установите для «Команды сборки» значение «npm run build», а для параметра «Публикация каталога» — «сборка».
- Нажмите «Развернуть»
Теперь ваше приложение должно работать на случайно сгенерированном URL-адресе, но вы также можете подключить собственный домен.
3. Героку
Развертывание на Heroku немного сложнее, но это отличный вариант, если вы хотите больше контролировать свой сервер. Это также здорово, если вы планируете интегрировать серверную часть в свое приложение React.
Давайте рассмотрим мельчайшие детали того, как на самом деле развернуть ваше приложение React с помощью Heroku.
- Убедитесь, что у вас есть учетная запись Heroku и установлен интерфейс командной строки Heroku.
- Запустите «heroku create», чтобы создать новое приложение.
- Запустите «git push heroku master», чтобы развернуть свой код.
Теперь ваше приложение должно работать по случайно сгенерированному URL-адресу.
4. Firebase
Развертывание в Firebase — хороший вариант, если вы используете Firebase в качестве серверной части. Его легко настроить и он имеет множество функций, таких как база данных в реальном времени и аутентификация.
- Убедитесь, что у вас есть учетная запись Firebase и проект, настроенный для вашего приложения React.
- Установите Firebase CLI: npm install -g firebase-tools
- Запустите «firebase login», чтобы войти в свою учетную запись Firebase.
- Запустите «firebase init» и выберите «Хостинг» при появлении запроса.
- Выберите проект, который вы создали для своего приложения React.
- Установите для «общественного» каталога значение «сборка».
- Запустите «развертывание firebase»
Теперь ваше приложение должно работать на случайно сгенерированном URL-адресе, но вы также можете подключить собственный домен.
5. AWS Amplify
Развертывание в AWS Amplify — еще один хороший вариант, если вы используете AWS в качестве серверной части. Его также легко настроить и он имеет множество функций, таких как аутентификация, хостинг и аналитика.
- Убедитесь, что у вас есть учетная запись AWS и приложение Amplify, настроенное для вашего приложения React.
- Установите интерфейс командной строки AWS Amplify: npm install -g @aws-amplify/cli
- Запустите «amplify init» и следуйте инструкциям
- Запустите «amplify add hosting» и выберите «Ручное развертывание» при появлении запроса.
- Запустите «усилить публикацию»
Теперь ваше приложение должно работать на случайно сгенерированном URL-адресе, но вы также можете подключить собственный домен.
Развертывание приложения React поначалу может показаться сложной задачей, но с правильными инструментами и небольшим количеством знаний это не так сложно, как кажется. Варианты, обсуждаемые в этой статье, — это лишь некоторые из многих способов развертывания приложения, поэтому обязательно выберите тот, который лучше всего соответствует вашим потребностям. Удачного развертывания!
