Недавно я создал одностраничное приложение в рамках портфолио-проекта #4 Flatiron School. Приложение использует бэкэнд Rails API и интерфейс Javascript, CSS и HTML. Код хранится в одном репозитории с двумя подкаталогами:
Итак, вот шаги, которые я выполнил, чтобы успешно развернуть серверную часть Rails API на Heroku и интерфейс JS на Github Pages из одного репозитория.
Бэкэнд
- Создайте учетную запись Heroku.
- Установите интерфейс командной строки Heroku в терминал (показана команда установки Mac):
brew tap heroku/brew && brew install heroku
- Войти в героку:
heroku login
- CD в основной каталог вашего кода и создайте новое приложение heroku:
heroku create gastropoda-api
- Установите пульт:
heroku git:remote -a gastropoda-api
- Затем нажмите на подкаталог, который вы хотите развернуть:
git subtree push --prefix gastropoda-backend heroku master
- CD в серверную часть и перенесите базу данных:
heroku run rake db:migrate
- Заполните данные:
heroku run rake db:seed
- Теперь ваш сервер должен работать! Бегите:
heroku open
, что приведет вас к:https://gastropoda-api.herokuapp.com/
- Если у вас нет корневой настройки, он скажет, что страница не может быть найдена. Поскольку мы используем его только как API, вы сможете перейти к своему API:
https://gastropoda-api.herokuapp.com/api/v1/entries
ВНЕШНИЙ ИНТЕРФЕЙС
- Сделайте копию файлов внешнего интерфейса (HTML, CSS, JS) и поместите их в новую папку с именем
docs
в вашем основном каталоге. - В этой новой папке измените любые URL-адреса для выборки, которые у вас есть, и укажите их на ваш внутренний URL-адрес.
Пример: изменитеlocalhost:3000
наhttps://yourappname.herokuapp.com
Затем отправьте эти изменения на Github.
- Перейдите в свой репозиторий и нажмите «Настройки». Прокрутите вниз до раздела Github Pages. В разделе «Источник» выберите «Основной», затем выберите «Документы». Щелкните Сохранить.
- Github ищет
index.html
в папкеdocs
. Итак, если он у вас есть, теперь вы сможете просматривать внешний интерфейс:https://yourgithub.github.io/repo-name/
Пока ваши URL-адреса для выборки правильно указывают на ваш внутренний URL-адрес Heroku, все должно работать.
- Если вы получаете сообщение об ошибке
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