Статьи

Создайте новое приложение с Laravel и EmberJS в Vagrant

В наше время все превращается в веб-приложение. Даже на простых сайтах есть мобильное приложение, использующее 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 installation on debian

Мой Homestead.yaml выглядит так.

Homestead configuration on debian

Теперь, когда коробка запущена, мы должны установить Laravel. Во-первых, давайте используем ssh для соединения с коробкой.

 vagrant ssh 

Затем перейдите в папку, в которой будет размещено наше приложение.

 cd Code 

Здесь нам нужно скачать Laravel, а затем установить зависимости с помощью Composer.

 git clone https://github.com/laravel/laravel Laravel cd Laravel composer install 

После того, как Composer завершит установку всех пакетов, протестируйте в браузере поиск по localhost: 8000 . Если вы все сделали правильно, вы увидите это:

Laravel installation successful on homestead

Файлы примера приложения теперь доступны как в виртуальной машине 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 install --save zurb/bower-foundation components/ember components/ember-data 

Бауэр установил для нас все, включая все зависимости.

Передний скелет

Давайте начнем строить основы нашего проекта. 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> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Webapp with EmberJs and Laravel4</title> <link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" /> <link rel="stylesheet" href="/static/css/style.css" /> </head> <body> <h1>A blank app</h1> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/foundation/js/foundation.min.js"></script> <script src="/bower_components/handlebars/handlebars.js"></script> <script src="/bower_components/ember/ember.js"></script> <script src="/static/js/app.js"></script> <script> $(document).foundation(); </script> </body> </html> 

Это скелет зрения — мы можем строить из этого. Это одностраничное приложение, которое делает этот файл единственным представлением во всем приложении. Все, что мы собираемся построить с Ember, будет только в этом файле.

Чтобы использовать представление index.php мы также должны изменить файл routes.php расположенный в папке app . Измените файл на этот:

 Route::get('/', function() { return View::make('index'); }); 

Проверьте это в своем браузере. Открытый localhost:8000 . Появится пустая страница с заголовком. Если мы посмотрим на инспектора (Ctrl + Shift + I), там нет ошибок. Каждый файл загружается без проблем. Загрузите все изменения в Heroku и посмотрите, работает ли он там.

 git add . git commit -m "testing" git push heroku master 

Конфигурация базы данных

Конфигурирование базы данных с помощью 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 как переменную окружения. В конце концов файл должен выглядеть примерно так.

 <?php $url = parse_url(getenv("DATABASE_URL")); // Get the environment variable // and return it as an array return array( 'connections' => array( 'mysql' => array( 'driver' => 'mysql', 'host' => 'localhost', 'database' => 'homestead', 'username' => 'homestead', 'password' => 'secret', 'charset' => 'utf8', 'collation' => 'utf8_unicode_ci', 'prefix' => '', ), 'pgsql' => array( 'driver' => 'pgsql', 'host' => $url["host"], 'database' => substr($url["path"], 1), 'username' => $url["user"], 'password' => $url["pass"], 'charset' => 'utf8', 'prefix' => '', 'schema' => 'public', ), ), ); 

Теперь psql готов к заполнению данными с помощью миграции и сеялок. Легче поддерживать код и вносить некоторые изменения с помощью миграции.

 php artisan migrate:make create_users_table 

Файл будет создан внутри /app/database/migrations . Добавьте эту схему в метод up :

 public function up() { Schema::create('users', function($table) { $table->increments('id'); $table->string('username'); $table->string('password'); $table->timestamps(); }); } 

Также добавьте эту строку внутри метода down:

 public function down() { Schema::dropIfExists('users'); } 

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/ .

 /* /app/database/seeds/UserTableSeeder.php */ class UserTableSeeder extends Seeder { public function run() { Eloquent::unguard(); DB::table('users')->delete(); User::create(array( 'username' => 'foo', 'password' => Hash::make('password') )); } } 

Класс seeder должен расширять класс Seeder . Также добавьте этот код в /app/database/seed/DatabaseSeeder.php потому что artisan не включает пользовательские файлы при запуске php artisan db:seed . Вместо этого вы должны использовать php artisan db:seed --class=UserTableSeeder чтобы использовать этот конкретный класс. Я предпочитаю запускать php artisan db:seed и позволить DatabaseSeeder делать всю работу.

 /* /app/database/seeds/DatabaseSeeder.php */ class DatabaseSeeder extends Seeder { public function run() { $this->call('UserTableSeeder'); } } 

Это только добавляет одного пользователя в таблице users . Для тестирования приложения требуется больше пользователей. Мы разберемся с этим во второй части.

После вставки этого фрагмента в DatabaseSeeder.php расположенный в /app/database/seeds , выполните следующую команду:

 php artisan db:seed 

Новая строка с нашими значениями была создана внутри таблицы users .

Героку снова

У нас есть база данных с простой таблицей Homestead. Но можно ли сделать эти изменения на Heroku? Используйте git, чтобы отправить код онлайн и узнать.

 git add . git commit -m "adding database" git push heroku master 

После этого казните ремесленника на Героку.

 heroku run php artisan migrate heroku run php artisan db:seed 

Поставьте heroku run перед любой командой php / artisan, и она заработает. Поскольку эта среда находится в рабочем режиме, на экране появится вопрос. Нажмите ввод, и таблица пользователей будет создана и заполнена. Если у вас есть больше сидов и файлов миграции, вопрос будет появляться чаще.

artisan running on Heroku

Завершение

В этой статье мы создали каркас для нашего приложения. Сейчас он работает в нашей местной среде и на Heroku. В ситуации, когда вы имеете дело с локальной разработкой и облачной разработкой, вы можете потратить значительное количество времени на работу с конфигурациями и нахождение на одной странице с двумя разными средами. Далее мы закончим создание базы данных. Мы создадим несколько сеялок с генератором поддельных данных, и мы будем использовать библиотеку файловой системы для работы с локальными файлами. Будьте на связи!