Руководство по развертыванию Vanilla JS / ReactJS + Rails

Развертывание веб-сайта может быть довольно утомительным, особенно если вы новичок. Вот руководство, которое проведет вас через этот процесс.

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

Таблица содержания

Подготовка перед развертыванием на Heroku
Разверните приложение Ruby on Rails в Heroku
Разверните Vanilla JS на страницах Github
Разверните ReactJS в Heroku

Подготовка перед развертыванием на Heroku

Прежде чем мы начнем:

Пожалуйста, убедитесь, что ваши внешние и внутренние папки находятся в разных репозиториях (по крайней мере, для целей этого руководства). Я совершил ошибку новичка, когда создал свой первый полнофункциональный веб-сайт. Вот руководство от Github о том, как отделить подпапку от репозитория. Кроме того, назовите свое внешнее и внутреннее репо по-разному. Например, имя внешнего репозитория будет hello-world, а имя внутреннего репо - hello-world-backend или hello-world-api.
Перенесите вашу базу данных с SQLite на PostgreSQL, если у вас есть Rails API, настроенный с чем-то другим.
Установите интерфейс командной строки Heroku (CLI), чтобы создавать приложения Heroku и управлять ими прямо с вашего терминала. Вот путеводитель от Heroku.

Подготовка: перенос базы данных с SQLite на PostgreSQL

Если ваша база данных Ruby on Rails настроена как PostgreSQL при первом создании, вы можете перейти на страницу содержимого и выбрать нужный раздел.

Для справки в будущем, если вы собираетесь развернуть приложение на Heroku, создайте приложение Rails со следующим:

rails new your-app-name --api -T --database=postgresql

Хорошо, пошли!

Перейдите в свой Gemfile и поместите gem 'pg' . Затем закомментируйте gem 'sqlite3' . После этого запустите bundle install .

2. Перейдите config/database.yml и замените имена баз данных SQLite3 на PostgreSQL.

Из

3. Создать + Перенести + Сид

запустить rake db:create
запустить rake db:migrate
запустите rake db:seed (только если у вас есть исходный файл)

Тада! Вы сделали! ("Верхний")

Шаг 1а: настройка серверной части Rails API 🎈

Поскольку Rails 6 больше не имеет статической индексной страницы по умолчанию, нам нужно вручную создать страницу приветствия в качестве корневой страницы, когда мы создаем новое приложение. Вот руководство по Heroku для справки.

Мы создадим welcome страницу контроллера

$ rails generate controller welcome

2. Мы добавим страницу индекса в файл app/views/welcome/index.html и напишем:

$ <h2>Welcome! </h2>

Честно говоря, все будет работать, если у вас что-то есть.

3. Теперь нам нужно проложить маршрут Rails к этому действию. Мы отредактируем config/routes.rb , чтобы настроить страницу индекса. В файле в строке 2 добавить:

$ root 'welcome#index'

Согласно руководству Heroku, вы можете запустить rails s для проверки страницы. Но я предполагаю, что, поскольку у вас есть (почти) готовое веб-приложение, в этом нет необходимости. По крайней мере, не.

("Верхний")

Шаг 1b: Развертывание серверной части Rails API 🔚

Убедитесь, что вы находитесь в каталоге серверной части Rails, запустив cd whatever-you-name-your-rails-backend
Если у вас есть ключ API для вашего приложения, вы можете перейти к настройкам своего приложения на сайте heroku.com и прокрутить вниз до раздела Config Vars.

Вы также можете установить в Heroku CLI

$ heroku config:set API_KEY=put-your-api-key-here

Подтвердите установку переменной, запустив:

heroku config
GITHUB_USERNAME: joesmith
API_KEY:   your-api-key-here

OR

heroku config:get API_KEY
your-api-key-here

Мне лично нравится настраивать его на heroku.com, так как он более простой.

(Если вы пришли из установки ReactJS, нажмите здесь.)

3. Давайте создадим приложение Heroku!

$ heroku create your-backend-app-name

4. Инициализировать Heroku git remote.

Хорошо, обычно вы делаете git init. Но у меня всегда было что-то вроде «репозиторий git уже существует». Поэтому я обычно сразу перехожу к:

$ heroku git:remote -a your-backend-app-name

Кроме того, я бы посоветовал перейти на страницу развертывания вашего приложения Heroku. Во-первых, вы можете проверить, успешно ли вы создали приложение Heroku или нет. Во-вторых, он покажет вам, как инициализировать пульт Heroku git.

5. Добавьте, зафиксируйте и отправьте свое приложение на Heroku git remote (я также скопировал следующее со страницы развертывания приложения Heroku)

$ git add .
$ git commit -am "whatever you want to write here"
$ git push heroku master (or main, see Note1)

6. Перенесите свою базу данных (запускать heroku run rake db:create не нужно) и заполните базу данных (только если она у вас есть)

$ heroku run rake db:migrate
$ heroku run rake db:seed

Примечание 1: если вы используете код VS, вы можете посмотреть в нижнем левом углу, чтобы узнать, называется ли ваша ветка по умолчанию как master или main.

7. Вы можете проверить успешность развертывания, введя heroku open. Это покажет вам page can't be found.

Не паникуйте! Просто введите одну из конечных точек (имя созданных вами моделей) после обратной косой черты.

Я бы посоветовал не закрывать вкладку сразу, если она работает. Позже вам понадобится ссылка для интерфейса.

Примечание. Если вы обновили что-то в своем бэкэнде в будущем и захотите обновить свое приложение heroku, вам нужно git add ., git commit -m "whatever message" и убедиться, что вы отправляете не только в свой репозиторий git, но и в свой удаленный репозиторий heroku с git push heroku master (or main).

Если вы развертываете Vanilla JS, нажмите здесь.

Если вы развертываете ReactJS, нажмите здесь.

Примечание 2. Если вы создали это приложение, вероятно, по крайней мере несколько месяцев назад (по состоянию на февраль 2021 г.), вы можете увидеть следующее:

Я удалил исходное приложение Heroku с Heroku.com (Настройки - ›прокрутите вниз -› Удалить приложение). Затем я воссоздал приложение Heroku с помощью:

$ heroku create your-backend-app-name --stack heroku-18

Тогда вы можете начать заново отсюда.

("Верхний")

Шаг 2–1. Разверните Vanilla JS на страницах Github 🐈

(Разверните ReactJS здесь)

1. Помните, я упоминал ранее, что нельзя закрывать вкладки после проверки успешности развернутой серверной части? Поскольку вы уже развернули серверную часть на Heroku, не забудьте заменить все http://localhost:3000 на URL развернутой серверной части.

Если вы закрыли вкладку (потому что слишком взволнованы? Я понимаю), ничего страшного. Вы можете ввести heroku open в своем внутреннем терминале или перейти на heroku.com, щелкнуть open app на главной странице приложения и скопировать ссылку. Должно получиться так:

https://your-app-name-here-api.herokuapp.com/...

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

2. Настройте страницы Github.io

Вы можете следовать инструкциям на страницах Github и перейти с Пользователь или сайт организации на Сайт проекта.

Я буду вести вас в любом случае.

3. Перейдите в репозиторий Github для интерфейса и перейдите в Настройки.

4. Прокрутите вниз до раздела Github Pages и переключите Branch с «none» на «main» (или «master»). Затем нажмите «Сохранить».

Как видно на скриншоте, ссылка становится доступной после нажатия кнопки «Сохранить». Вы можете перейти на веб-сайт и проверить свой недавно развернутый веб-сайт! Также небольшое примечание: если вам трудно увидеть свой бэкэнд, это связано с тем, что Heroku требует времени для загрузки данных (один из недостатков развертывания на Heroku). Дай немного терпения.

Если вы обновили свое веб-приложение в будущем, вы можете просто добавить, нажать и зафиксировать. Это автоматически обновит ваш сайт.

("Верхний")

Шаг 2–2: Разверните ReactJS в Heroku 🌴

(Разверните Vanilla JS здесь)

Если вы используете React Router, создайте файл в корневом каталоге с именем static.json и напишите:

$ { "root": "build/", "routes": { "/**": "index.html" } }

Если вам интересно, почему это так, вы можете прочитать этот Сообщение о переполнении стека.

2. Если у вас есть ключ API, перейдите здесь.

3. Помните, я упоминал ранее, что нельзя закрывать вкладки после проверки успешности развернутой серверной части? Поскольку вы уже развернули серверную часть на Heroku, не забудьте заменить все http://localhost:3000 на URL развернутой серверной части.

https://your-app-name-here-api.herokuapp.com/...

4. Поскольку это приложение React, вам необходимо создать приложение Heroku с помощью пакета сборки. В противном случае Heroku развернет сборку развертывания вместо оптимизированной производственной сборки.

$ heroku create your-app-name-here --buildpack https://github.com/mars/create-react-app-buildpack.git

5. Теперь, когда вы создали приложение, давайте инициализируем удаленный доступ Heroku. Как и в случае с вашим серверным приложением, я бы посоветовал перейти на страницу развертывания вашего приложения и проследить, как инициализировать git.

$ heroku git:remote -a your-frontend-app-name

6. И последнее, но не менее важное: вы можете добавить, зафиксировать и отправить свое приложение в Heroku. ✨ВЫБЫВАЮЩИЙ✨

$ git add .
$ git commit -am "whatever you want to name here"
$ git push heroku master (or main, already explained above)

Примечание. Как и ваш бэкэнд, если вы обновили что-то в своем интерфейсе в будущем и хотите обновить свое приложение heroku, вам нужно git add ., git commit -m "whatever message" и убедиться, что вы не только отправляете в свой репозиторий git. , но также и в удаленный репозиторий heroku с git push heroku master (or main).

Поздравляем !!! 🎉

Ура, поздравляю! Вы успешно развернули свой веб-сайт (как интерфейс, так и серверную часть) в Heroku! Похлопайте себя по плечу или станьте счастливым танцем со Снупи.

Если вы столкнулись с какими-либо ошибками, обязательно внимательно прочтите их. Это поможет вам понять, что пошло не так. Я вспомнил, что у меня было несколько ошибок, например, я забыл создать приложение с правильным пакетом сборки 🎒 и т. Д.

Если вам сложно понять ошибки, вы знаете, к кому обратиться… да, к нашему лучшему другу, Google. Ты получил это :)

("Верхний")