Использование Heroku и Netlify.

Ты сделал! Вы успешно создали пару веб-приложений, которые отлично смотрятся в локальном веб-браузере! Теперь, если вы, как и я, ищете работу, вы можете рассмотреть возможность развертывания своего веб-приложения, чтобы вы могли показать своему будущему работодателю свой потенциал. Развертывание моих проектов всегда казалось сложной задачей, и я скажу, что откладывал это довольно долго, однако я чувствовал, что наконец-то пришло время. Я также хотел понять процесс развертывания и возможные проблемы, так как знал, что это то, чем я хотел бы заниматься/буду заниматься в будущем. Итак, давайте приступим!

Подготовка к развертыванию

  1. Frontend и backend — это отдельные репозитории.
  2. Изменить базу данных для использования PostgreSQL вместо sqlite3.

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

Изменить базу данных на PostgreSQL

Скорее всего, если вы использовали настройку по умолчанию для своего приложения Rails, то вы используете базу данных sqlite3. Нам нужно изменить нашу базу данных на PostgreSQL, чтобы мы могли использовать хост Heroku.

  1. Загрузите Postgres.app и следуйте инструкциям по установке для вашей операционной системы.
  2. После установки удалите Gemfile.lock и внесите следующие изменения в Gemfile: замените gem 'sqlite3' на gem 'pg'.
  3. Беги bundle install
  4. Найдите файл database.yaml в папке config. Закомментируйте существующий код и замените его следующим:
default: &default
adapter: postgresql
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
timeout: 5000
development:
<<: *default
database: your-app-name_development
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
<<: *default
database: your-app-name_test 

production:
<<: *default
database: your-app-name_production

5. Затем запустите в своем терминале rails db:setup, rails db:migrate, rails db:seed и rails s следующее.

6. Затем перейдите на localhost:3000 в локальном браузере, чтобы убедиться, что конфигурация postgresql верна.

Схема развертывания

  1. Настройте серверную часть для размещения на Heroku.
  2. Настройте интерфейс для размещения на Netlify.

Настройка Heroku для серверной части (Rails)

Heroku — известная платформа для разработки приложений Rails. Эта хостинговая платформа удобна для начинающих и удобна для пользователя, экономична, а ее развертывание обычно происходит быстро.

  1. Если у вас его еще нет, создайте учетную запись в Heroku.
  2. Установите CLI Heroku либо через прямую установку на их сайте, либо через командную строку: brew tap heroku/brew && brew install heroku.
  3. cd в свое приложение и войдите в свою учетную запись Heroku через терминал с помощью команды: heroku login .
  4. Затем, чтобы создать проект на Heroku, используйте команду heroku create you-app-name.
  5. Чтобы добавить существующий репозиторий в созданный вами проект Heroku, инициализируйте Heroku git remote: git remote add heroku [email protected]:you-app-name.git.
  6. Затем вам нужно добавить, зафиксировать и отправить этот репозиторий в ваш проект Heorku с помощью git add ., git commit -m"first heroku commit", git push heroku main (Обратите внимание, что если ваша основная ветка называется master, используйте вместо нееgit push heroku master).
  7. Перенесите базу данных с помощью rails db:migrate и rails db:seed .
  8. Перенесите свою базу данных в Heroku с помощью heroku run rake db:migrate heroku run rake db:seed .
  9. Чтобы открыть ваше приложение, размещенное на Heroku, в вашем терминале, используйте heroku open .

Убедитесь, что вы всегда отправляете изменения на GitHub и используете git push heroku main, чтобы эти изменения отражались для пользователя.

Настройка Netlify для внешнего интерфейса (React)

Netlify — еще одна известная платформа для разработки программного обеспечения, ориентированная на фронтенд-приложения. Netlify также удобен для пользователя, недорог и отлично подходит для разработчиков интерфейсов благодаря своей скорости и функции непрерывного развертывания. Каждый раз, когда вы отправляете изменения на GitHub, развертывание будет перезапускаться, чтобы у пользователя всегда была самая последняя версия приложения.

  1. Если у вас его еще нет, создайте учетную запись в Netlify.
  2. Далее выберите опцию «Новый сайт из Git».
  3. Выберите своего поставщика Git (в этом случае мы выберем GitHub).
  4. Разрешите Netlify доступ к репозиторию, в котором находится ваше приложение.
  5. Затем вам будет предложено выбрать репозиторий и сделать соответствующий выбор.
  6. После выбора будут заполнены настройки по умолчанию, и вы нажмете «Развернуть сайт» внизу страницы.
  7. Затем вы будете перенаправлены на панель инструментов, где в разделе «Производственные развертывания» вы сможете увидеть, правильно ли развернуто ваше приложение.
  8. Если развернуто правильно, вы увидите «Опубликовано», если нет, вы увидите «Ошибка», и если оно все еще создает ваше приложение, оно скажет «Сборка».
  9. В зависимости от результата сборки вам нужно будет принять соответствующие меры. Так что просто следите за журналами, чтобы указать вам правильное направление!
  10. Затем вы захотите обновить свои URL-адреса для получения, чтобы они соответствовали URL-адресу, поступающему из вашего бэкэнда. В этом случае мы используем https://имя-вашего-приложения.herokuapp.com/users.
  11. Затем убедитесь, что ваши пакеты установлены и обновлены соответствующим образом. Обязательно запустите npm run build, чтобы инициировать развертывание в Netlify, и вы увидите еще одно «строительство».
  12. Протестируйте свое приложение, отправив запросы к серверной части!

Заключение

Говоря об этом, я действительно не ожидал, что развертывание одного из моих приложений займет так много времени, но я определенно ошибался. Мне потребовалось около дня, чтобы правильно развернуть как мой серверный, так и внешний интерфейс из-за некоторых проблем с зависимостями и версиями, но как только все было обновлено, остальная часть процесса развертывания стала легкой! Убедитесь, что вы изучили каждую платформу хостинга, прежде чем принять решение, и потратьте много времени на развертывание, чтобы не тратить время и деньги! Как всегда, не стесняйтесь обращаться ко мне с любыми вопросами и всем удачного кодирования!