Недавно я создал одностраничное приложение в рамках портфолио-проекта #4 Flatiron School. Приложение использует бэкэнд Rails API и интерфейс Javascript, CSS и HTML. Код хранится в одном репозитории с двумя подкаталогами:

Итак, вот шаги, которые я выполнил, чтобы успешно развернуть серверную часть Rails API на Heroku и интерфейс JS на Github Pages из одного репозитория.

Бэкэнд

  1. Создайте учетную запись Heroku.
  2. Установите интерфейс командной строки Heroku в терминал (показана команда установки Mac):
    brew tap heroku/brew && brew install heroku
  3. Войти в героку:
    heroku login
  4. CD в ​​основной каталог вашего кода и создайте новое приложение heroku:
    heroku create gastropoda-api
  5. Установите пульт:
    heroku git:remote -a gastropoda-api
  6. Затем нажмите на подкаталог, который вы хотите развернуть:
    git subtree push --prefix gastropoda-backend heroku master
  7. CD в ​​серверную часть и перенесите базу данных:
    heroku run rake db:migrate
  8. Заполните данные:
    heroku run rake db:seed
  9. Теперь ваш сервер должен работать! Бегите:
    heroku open, что приведет вас к:
    https://gastropoda-api.herokuapp.com/
  10. Если у вас нет корневой настройки, он скажет, что страница не может быть найдена. Поскольку мы используем его только как API, вы сможете перейти к своему API:
    https://gastropoda-api.herokuapp.com/api/v1/entries

ВНЕШНИЙ ИНТЕРФЕЙС

  1. Сделайте копию файлов внешнего интерфейса (HTML, CSS, JS) и поместите их в новую папку с именем docs в вашем основном каталоге.
  2. В этой новой папке измените любые URL-адреса для выборки, которые у вас есть, и укажите их на ваш внутренний URL-адрес.
    Пример: измените localhost:3000 на https://yourappname.herokuapp.com
    Затем отправьте эти изменения на Github.
  3. Перейдите в свой репозиторий и нажмите «Настройки». Прокрутите вниз до раздела Github Pages. В разделе «Источник» выберите «Основной», затем выберите «Документы». Щелкните Сохранить.
  4. Github ищет index.html в папке docs. Итак, если он у вас есть, теперь вы сможете просматривать внешний интерфейс:
    https://yourgithub.github.io/repo-name/
    Пока ваши URL-адреса для выборки правильно указывают на ваш внутренний URL-адрес Heroku, все должно работать.
  5. Если вы получаете сообщение об ошибке favicon.ico в консоли браузера, это значит, что вы не настроили любимое изображение значка. Вы можете легко устранить эту ошибку, добавив следующую строку в заголовок файла index.html:
    <link rel ="icon" href="images/gastropoda_logo_icon.ico">
    Найдите файл .ico через Google или используйте свой собственный логотип/изображение и преобразуйте его в файл .ico. В Интернете есть бесплатные конвертеры файлов jpg to ico или png to ico.

Наслаждаться!

Вот мое успешное развертывание:
https://dougschallmoser.github.io/gastropoda-js-app/

Найдите меня на Github:
https://github.com/dougschallmoser