У меня официально есть сайт онлайн !!

Просмотр сайта: Живой сайт | GitHub | Демонстрация сайта

В рамках моего Bootcamp Coding я уже создал несколько приложений и сайтов, но я решил, что пришло время научиться сделать этот последний шаг и фактически развернуть свой собственный сайт в Интернете. Оказывается, это не так просто, как кажется (я знаю, шокирует), и для достижения конечного результата потребовалось много исследований и объединить части существующих статей и документации. Итак, я подумал, что документирую, как я это сделал на случай, если кто-либо ( хм… я ), испытывает проблемы в будущем, и я желаю, чтобы желать пошагового руководства.

Как отказ от ответственности, специфика этого процесса сильно зависит от множества факторов. Я использую компьютер Windows, управляющий подсистемой Windows для Linux с ОС Ubuntu, задняя часть этого сайта построена с Ruby-On-Rails V5, работающим на сервере PUMA V3, а передняя часть строится с использованием HTML, CSS и ванили JavaScript. Если у вас есть другая комбинация технических технологий, это, вероятно, только вас доставит. Кроме того, поскольку это мое первое развертывание, я уверен, что есть лучшие способы сделать это, и я бы хотел услышать их-не стесняйтесь бросить любые наилучшие практики, которые вы узнали в комментариях.

Шаг 1: Разделите свой код Шаг 2: Выберите свою платформу (ы) Шаг 3: Загрузите CLI Heroku Шаг 4: Используйте Heroku CLI, чтобы создать приложение Шаг 5: Создайте Procfile. Добавьте переменные среды Шаг 9: MORBATE DATABASE MIGRATION в Heroku Шаг 10: Передний код ссылки с Live API URL Шаг 11: Развернуть свой интерфейс Шаг 12: Включите CORS Шаг 13: Один последний готча

Шаг 1 — Разделите свой код

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

Естественно, есть много способов сделать это, но то, как я справился с этим, было иметь 3 дорожки GIT: Back-End (API), фронт-конец и комбинированный. Мне нравится этот подход, потому что, с одной стороны, он хранит все, что содержатся в одном хранилище для справки (в совокупности), но в то же время я могу сохранить отдельные репозитории передней и задней части для фактического развертывания.

Во -первых, убедитесь, что комбинированное репо полностью обновлено и подтолкнуло к GitHub (или любую удаленную управление версией, которую вы используете). При передаче кого -то на ваш GitHub это будет ссылка, которую вы отправите, так как у него будет все, спереди и сзади, все они содержатся в одном месте.

Затем создайте новый репозиторий GitHub для ваших вещей. Я добавил свой с «-api», чтобы я мог проще отслеживать. После того, как это создано, вы можете «CD» в свой локальный каталог Back-End и создать совершенно новый файл GIT с тем же именем, используя «git init». Затем вставьте его в свой недавно созданный удаленный репозиторий. Теперь у вас есть ваш бэк-файл GIT, готовый к развертыванию и сохранен в GitHub.

Затем, наконец, повторите предыдущий шаг для вашего интерфейса. Я добавил свой с «-Frontend», чтобы он не отделялся от комбинированного репозитория.

Вернуться к вершине

Шаг 2 — Выберите свою платформу (ы)

Есть много способов пойти с этим. Heroku-это самая распространенная платформа, которую мои сверстники использовали для своего бэк-энда, и стартовый план бесплатный, поэтому я решил зарегистрироваться и использовать его для своего первого сайта. Для фронта, GitHub может фактически размещать ваш сайт непосредственно из репозитория GitHub с страницами GitHub (поэтому вам нужно разделить два репозиторию). Это казалось, что это будет самый простой вариант, так что это маршрут, который я выбрал.

Что касается документации, документация GitHub Pages не может быть проще. Вы просто переключаете несколько вариантов, и это выведет ваши инструкции для вас. Хероку был другой историей. Существует так много факторов, которые влияют на то, как вы будете развертываться, что я обнаружил, что их документация немного ошеломляющей. Тем не менее, это кажется очень полным, и они предпринимают наилучшую попытку сохранить его как можно более простым и пошаговым. Это будет отличный ресурс, если вы застряли в какой -либо момент, если вы используете WSL, как я, просто помните, что вы обычно следуете инструкциям Linux, а не Windows.

Вернуться к вершине

Шаг 3 — Загрузите Heroku CLI

Если вы начнете с погружения в инструкции Heroku «Показать следующие шаги», как я, теперь вам будет указано создать новое приложение и добавить его в конвейер, а затем выберите кучу конфигураций. Я уверен, что, как только я почувствуюсь к развертыванию, все это будет очень полезно, но в первый раз я чувствовал себя потерянным. К счастью, есть много сообщений в блоге и помогать статьям о том, как развернуть, и я заметил, что многие из них упоминались только с использованием Heroku CLI во время всего этого процесса.

Поэтому я удалил все, что сделал на Хероку до этого момента, и пошел вперед и скачал CLI. К сожалению, это было менее просто, чем я ожидал. Инструкции по Heroku не работали, потому что я использую WSL, который не поддерживает SNAP… К счастью для меня, у Томаса Райта была такая же проблема, и он написал Статья О том, как скачать CLI с WSL, в противном случае это было бы реальным испытанием. Но все, что вам нужно сделать, это запустить curl https://cli-assets.heroku.com/install.sh | sh на вашем терминале Ubuntu И вам будет хорошо пойти с CLI.

Вернуться к вершине

Шаг 4 — Используйте Heroku CLI для создания приложения

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

• Создайте пустое приложение Heroku с именем вашего приложения (я сохранил «-api» для ясности): Heroku Create -a -api * * Эта команда также создаст удаленный репозиторий, связанный с тем, из чего вы называли команду-вот почему вы называете его из корня вашего бэк-энда
• Запустить git remote -v Чтобы проверить, что действительно есть отдаленное Heroku. Это должно выглядеть так, если все прошло хорошо:

Вернуться к вершине

Шаг 5 — Создайте Procfile

Heroku использует прокляцию в корне направленного на справочный каталог для выполнения команд запуска, таких как запуск вашего сервера. Генератор «Rails New» устанавливает PUMA таким образом, чтобы работать прямо из коробки, вы можете просмотреть детали в вашем ./config/puma.rb. Единственное, что нам нужно с проведением,-это создать его и добавить веб-процесс, который запускает PUMA в соответствии со спецификациями в файле конфигурации. Это делает свое дело: Web: Bundle Exec Puma -c config/puma.rb Анкет

Вернуться к вершине

Шаг 6 — преобразовать Ваша база данных SQLITE3

Rails настроен на использование SQLite3 для базы данных по умолчанию. Это не будет работать на Heroku, поэтому мы должны его изменить. Я изменил его на Postgres, как рекомендовано в документации Heroku. Я думал, что мне придется восстановить миграцию в базе данных и сделать много дополнительной работы, но это было на самом деле очень просто. Просто зайдите в свой Gemfile и замените «Gem» sqlite3 ‘»на« Gem’ pg »и запустите установку пакета. Надеюсь, вы получите новый ./config/Файл Database.yml, который адаптирован к Postgres, но я этого не сделал. К счастью, все, что мне нужно было сделать, это изменить адаптер на «PostgreSQL» и добавить линию кодирования в Unicode, и мне было хорошо идти.

default: &default
  adapter: postgresql
  encoding: unicode

Единственная Gotcha, с которой я столкнулся, было то, что Postgres кажется немного более строгим с его порядком миграции. Очевидно, я создал таблицу, которая ссылается на другую таблицу до ее создания. Мне просто пришлось переключить заказ миграций, и все работало нормально. Однако с этого момента я, вероятно, просто построю свои API Rails, используя Postgres, чтобы пропустить всю эту проблему.

Вернуться к вершине

Шаг 7 — Толк к Хероку

Теперь вы наконец -то закончили подготовить свой код, и вы можете подтолкнуть к Хероку. Просто используйте CLI, чтобы добавить git add. , Commit git commit -m "_commit message_" и подтолкнуть свой код в Heroku git push heroku Master и вы сделали! Вы должны перейти только к мастер-филиалу Heroku, не развернутые филиалы, не являющиеся мастерными.

Вернуться к вершине

Шаг 8 — Добавьте переменные среды

У меня были некоторые функции на моем сайте, которые зависели от секретных переменных — Web Token Secret JSON для аутентификации и третьей стороной API -ключа. Если вы используете драгоценный камень Dotenv, это будет в вашем файле .env. Они должны быть добавлены в Heroku, перейдя в настройки приложения и прокручивая в разделе Config Vars и добавив ключи и значения. У меня был немного тяжелой отладки, чтобы выяснить это.

Вернуться к вершине

Шаг 9 — Протолкнуть миграцию базы данных в Heroku

После того, как приложение будет настроено и полностью подтолкнуто к Heroku, вы можете подтолкнуть миграции базы данных, чтобы настроить свою производственную базу данных, используя Heroku CLI: «Heroku Run Range Rake DB: Migrate». А теперь ваш API должен быть полностью вживую и работать!

Вернуться к вершине

Теперь вы закончили с тяжелой частью — Фу!

Шаг 10 — Front -Code Link с Live API URL

Ваш интерфейс, вероятно, подключается к вашему API, используя вызовы. URL во всех этих вызовах должен быть изменен с вашего адреса Localhost на Live URL для вашего API. Как только вы это сделаете, сайт будет вытащить из вашей производственной базы данных.

Вернуться к вершине

Шаг 11 — разверните свой фронт

Развертывание вашего фронтального кода очень проста со страницами GitHub. Просто зайдите в свой передний репозиторий (помните, а не комбинированный), перейдите к настройкам и прокрутите вниз до секции страниц GitHub. Здесь вы просто выбираете филиал, которую хотите развернуть, и нажимаете сохранение, и все готово.

Вернуться к вершине

Шаг 12 — включить CORS

Теперь, когда у вас есть живой интерфейс (Woohoo!) Вам просто нужен ваш задний API, чтобы он позволил ему получить доступ. Вы, вероятно, настроили COR во время разработки, но вы указали на URL Localhost. Это должно будет измениться на новый, живой фронт-URL-адрес в вашем файле ./config/initializers/cors.rb. Если вы знаете этот адрес заранее, вы можете настроить CORS как часть подготовки кода (шаг 5 и 6).

Вернуться к вершине

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

Шаг 13? — Последний готча

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

1. Это много труднее отладить живое приложение. Журналы гораздо менее детализированы, и вы не можете добавить Binding.pry Чтобы остановить код. Так что используйте пользовательские журналы щедро ставит '…' Чтобы помочь вам увидеть, где все сломается. Вы можете запустить Heroku logs -t Из вашего терминала, чтобы просмотреть свои журналы на терминале, или вы можете перейти к приложению на веб -сайте Heroku и просмотреть журналы с кнопки «Больше».
2. Руби неявно возвращает последнюю линию, обработанную методом, но это не может быть безопасным предположением. Каким -то образом метод в моем коде ничего не возвращал, потому что у меня не хватало возврата. Это работало на месте, но не с Хероку. Если ваш сайт кажется нарушенным без причины — проверьте свои возвраты.

П.с. — Я знаю, что на данный момент это не самый красивый сайт в мире. Это был ранний проект, и он будет улучшен, так как я найду время для работы над ним.

Вернуться к вершине

Оригинал: «https://dev.to/dhintz89/i-officially-have-a-site-online-5ep4»