Создайте новое приложение с Laravel и EmberJS в Vagrant
Декабрь 17, 2018
В наше время все превращается в веб-приложение. Даже на простых сайтах есть мобильное приложение, использующее REST Api. Веб-приложения доступны везде — на ноутбуке, настольном компьютере, планшете, мобильном телефоне, а в последнее время и на носимых устройствах, таких как умные часы. Все становится меньше и быстрее — внешние интерфейсы отделены от внутренних и взаимодействуют только с сервером через API.
Что мы будем строить?
В этой серии мы собираемся создать приложение для загрузки фотографий. Для внешнего интерфейса мы будем использовать EmberJs и Foundation 5 . EmberJs — это интерфейсная среда с хорошей интеграцией с REST Apis. Foundation 5 поможет нам сделать быстрый прототип нашего интерфейса. Для хостинга мы будем использовать бесплатный уровень Heroku (дополнительную информацию о PHP на Heroku см. Здесь ). Для серверной части мы будем использовать Laravel . Исходный код будет доступен по частям и в окончательной форме в заключительной части этой серии. Вы можете скачать код для части 1 здесь .
Давайте начнем
Хороший способ начать новый проект в PHP — использовать Vagrant . Vagrant дает нам возможность много экспериментировать от проекта к проекту. Я могу иметь разные версии PHP, если я хочу с Apache для одного проекта, Nginx для другого. Если что-то идет не так, я возвращаю всю свою работу и просто vagrant up после этого — и я никогда не загрязняю операционную систему своего хоста различными другими установками.
Самый простой способ начать работу — следовать этому быстрому совету , который проведет вас через быстрый процесс установки и покажет вам работающее приложение Laravel за считанные минуты, чтобы вы могли приступить к взлому. Если вы все еще не уверены, почему вы должны использовать Homestead и Vagrant, смотрите здесь .
Мой Homestead.yaml выглядит так.
Теперь, когда коробка запущена, мы должны установить Laravel. Во-первых, давайте используем ssh для соединения с коробкой.
vagrant ssh
Затем перейдите в папку, в которой будет размещено наше приложение.
cd Code
Здесь нам нужно скачать Laravel, а затем установить зависимости с помощью Composer.
git clone https://github.com/laravel/laravel Laravel cd Laravel composer install
После того, как Composer завершит установку всех пакетов, протестируйте в браузере поиск по localhost: 8000 . Если вы все сделали правильно, вы увидите это:
Файлы примера приложения теперь доступны как в виртуальной машине Vagrant, так и в операционной системе вашего хоста для редактирования в вашей любимой IDE.
Heroku
Все перечисленные ниже действия выполняются внутри виртуальной машины, когда они входят в систему с помощью vagrant ssh если не указано иное. Более подробный обзор Heroku по Vagrant и установке дополнений смотрите в этом посте , в противном случае см. Ниже.
Если у вас еще нет учетной записи на Heroku, создайте ее, перейдя по этой ссылке, и загрузите Heroku Toolbelt . Это клиентская система, которая упрощает нашу работу с Heroku. Мы можем устанавливать дополнения из этого клика, создавать новые проекты и с помощью git мы также можем продвигать каждое изменение. После создания учетной записи в Heroku и установки Heroku Toolbelt вы должны войти в систему, чтобы начать ее использовать.
heroku login
После выполнения этой команды у нас есть связь с Heroku. Теперь мы можем начать создавать новый проект там.
Чтобы начать использовать Laravel на Heroku, нам нужно сделать небольшие изменения. Сначала создайте файл и назовите его Procfile . Добавьте эту строку внутри этого файла.
web: vendor/bin/heroku-php-apache2 public
Это файл конфигурации. Героку нужно, чтобы он знал, с чем имеет дело. При этом мы указали PHP и Apache. Мы также можем использовать Python, Java, Ruby, Scala и многое другое. При установке Heroku Toolbelt также устанавливается Foreman. Он используется для локального выполнения Procfiles , помогая поддерживать паритет dev / prod . Если вас интересует, что еще может делать Procfile, перейдите по этой ссылке из официальной документации Heroku .
Если вы хотите использовать вместо этого Nginx, посмотрите этот пост .
Выполните эти команды одну за другой в папке Laravel
git init git add . git commit -m "initing"
Второй шаг — удалить Composer.lock из .gitignore . После того, как мы закончили с Git, давайте вернемся к Heroku.
heroku create
Это создает новый проект на Heroku.
git push heroku master
Это подтолкнет все к Heroku. Давайте проверим это. Если все пойдет хорошо, мы увидим логотип Laravel, который мы также увидели, когда тестировали его на Homestead Improved .
Если у вас есть проблемы с ключами RSA, прочитайте эту статью . Если вы хотите узнать больше о PHP на Heroku, смотрите здесь и здесь .
Установка интерфейсных пакетов
Мы будем использовать Bower для установки внешнего интерфейса. Вы можете использовать все, что захотите, даже загружая в формате zip с Github или с официальных страниц. Перейдите в общую папку в папке Laravel.
cd public
Нет необходимости устанавливать Bower, потому что Homestead поставляется с предварительно установленными nodeJs , npm и Bower .
bower init
Затем установите пакеты: Foundation 5, EmberJs и Ember Data. Ember data — это библиотека, используемая Ember, которая является автономной. Это поможет нам с REST Api в качестве адаптера отдыха.
Бауэр установил для нас все, включая все зависимости.
Передний скелет
Давайте начнем строить основы нашего проекта. Bower установил зависимости и поместил их в bower_components . Нам также нужна папка для размещения наших статических файлов. Создайте папку с именем static в публичном каталоге. Затем создайте три папки внутри: js , css и img . В папке js создайте файл app.js а в папке css — файл style.css .
Первое, что я всегда делаю, когда начинаю новый проект с Laravel, это генерирую ключ для безопасного хеширования пароля.
php artisan key:generate
Создайте новый вид в app/views . Назовите это index.php . Это будет целевая страница. Нам нужно импортировать все библиотеки javascript и стили внутри этого файла.
<!doctype html><htmlclass="no-js"lang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Webapp with EmberJs and Laravel4</title><linkrel="stylesheet"href="/bower_components/foundation/css/foundation.css"/><linkrel="stylesheet"href="/static/css/style.css"/></head><body><h1>A blank app</h1><scriptsrc="/bower_components/jquery/dist/jquery.js"></script><scriptsrc="/bower_components/foundation/js/foundation.min.js"></script><scriptsrc="/bower_components/handlebars/handlebars.js"></script><scriptsrc="/bower_components/ember/ember.js"></script><scriptsrc="/static/js/app.js"></script><script>$(document).foundation();</script></body></html>
Это скелет зрения — мы можем строить из этого. Это одностраничное приложение, которое делает этот файл единственным представлением во всем приложении. Все, что мы собираемся построить с Ember, будет только в этом файле.
Чтобы использовать представление index.php мы также должны изменить файл routes.php расположенный в папке app . Измените файл на этот:
Проверьте это в своем браузере. Открытый localhost:8000 . Появится пустая страница с заголовком. Если мы посмотрим на инспектора (Ctrl + Shift + I), там нет ошибок. Каждый файл загружается без проблем. Загрузите все изменения в Heroku и посмотрите, работает ли он там.
Конфигурирование базы данных с помощью Laravel легко при работе с различными средами. Мы должны настроить его так, чтобы он работал как в Homestead, так и в Heroku. На Heroku Postgresql не устанавливается при создании приложения, поэтому мы должны установить его, используя набор инструментов. Этот аддон не требует наличия кредитной карты:
heroku addons:add heroku-postgresql
В /app/config/database.php измените ключ по умолчанию, чтобы он указывал на postgres.
'default' => 'pgsql',
Различные значения конфигурации используются для Postgres на Heroku и Homestead. Так как же использовать эти значения в каждом случае? Из первоначального краткого совета мы знаем, что порт Postgres по умолчанию — 54320, а комбинация пользователь / пароль для нашей среды разработки — homestead / secret .
Мы должны изменить значения для производственной среды (в данном случае Heroku).
Создайте новую папку с именем production внутри /app/config . Скопируйте файл database.php находящийся в каталоге /app/config/local и поместите его в папку производственной конфигурации. Также поместите копию в папку testing . Если вы хотите протестировать свое приложение, вам также необходимо настроить базу данных для этой среды. Laravel по умолчанию сохраняет настройки для Homestead в папке local/database.php .
Heroku сохраняет конфигурацию postgres как переменную окружения. В конце концов файл должен выглядеть примерно так.
Artisan — хороший инструмент для сокращения времени разработки. Миграции и сеялки — это всего лишь ремесленная магия.
php artisan migrate
Это выполнит метод up для каждого файла миграции и создаст схему, определенную внутри этого метода. С другой стороны, php artisan migrate:reset выполнит метод down и в большинстве случаев вернет все изменения, up методом up . Если вы создаете схему с помощью метода up , верните все обратно в метод down .
В базе данных теперь есть таблица users с простой структурой. При использовании сеялок база данных будет заполнена данными. В конце концов, лучше иметь данные в базе данных, выполнив одну команду, чем делать это вручную каждый раз, когда база данных изменяется.
Создайте UserTableSeeder.php в UserTableSeeder.php/app/database/seeds/UserTableSeeder.php/app/database/seeds/ .
Класс seeder должен расширять класс Seeder . Также добавьте этот код в /app/database/seed/DatabaseSeeder.php потому что artisan не включает пользовательские файлы при запуске php artisan db:seed . Вместо этого вы должны использовать php artisan db:seed --class=UserTableSeeder чтобы использовать этот конкретный класс. Я предпочитаю запускать php artisan db:seed и позволить DatabaseSeeder делать всю работу.
Это только добавляет одного пользователя в таблице users . Для тестирования приложения требуется больше пользователей. Мы разберемся с этим во второй части.
После вставки этого фрагмента в DatabaseSeeder.php расположенный в /app/database/seeds , выполните следующую команду:
php artisan db:seed
Новая строка с нашими значениями была создана внутри таблицы users .
Героку снова
У нас есть база данных с простой таблицей Homestead. Но можно ли сделать эти изменения на Heroku? Используйте git, чтобы отправить код онлайн и узнать.
heroku run php artisan migrate heroku run php artisan db:seed
Поставьте heroku run перед любой командой php / artisan, и она заработает. Поскольку эта среда находится в рабочем режиме, на экране появится вопрос. Нажмите ввод, и таблица пользователей будет создана и заполнена. Если у вас есть больше сидов и файлов миграции, вопрос будет появляться чаще.
Завершение
В этой статье мы создали каркас для нашего приложения. Сейчас он работает в нашей местной среде и на Heroku. В ситуации, когда вы имеете дело с локальной разработкой и облачной разработкой, вы можете потратить значительное количество времени на работу с конфигурациями и нахождение на одной странице с двумя разными средами. Далее мы закончим создание базы данных. Мы создадим несколько сеялок с генератором поддельных данных, и мы будем использовать библиотеку файловой системы для работы с локальными файлами. Будьте на связи!