Запуск и отладка Angular + PHP

Рассмотрим как правильно настраивать Angular для работы с PHP сервером. При получении запроса от Angular, PHP сервер будет формировать запросы к базе данных MySQL и на основе их формировать ответы для Angular.

Установка средств запуска

Linux

Для того, чтобы работать с php в linux надо установить apache2, mysql. Также следует установить phpmyadmin для того, чтобы можно было удобно редактировать базу данных. При установке phpmyadmin автоматически установится и php.

Windows и MacOS

В других операционных средах всё проще немного, можно установить готовые комплекты, например бесплатную версию MAMP.

Настройка htaccess

Если на Angular сайте используется маршрутизация, то в случае, когда пользователь зайдёт на главную страницу сайта, и потом будет переходить на другие страницы – всё будет работать. Но в том случае, когда он зайдёт на сайт по какой-либо странице, отличной от главной, то, чтобы всё корректно работало, следует в PHP настроить .htaccess.

Теперь о .htaccess. При базовой настройке в linux они не поддерживаются обычно. Проверить можно следующим образом: в папку apache, где находится index.html добавляем файл .htaccess со случайным текстом. Так как его не возможно разобрать, то должна быть выведена ошибка «500 Internal Server Error» при попытке открытия в браузере localhost. Если этого не происходит, то следует выполнить следующие правки: добавить разрешение обрабатывать .htaccess. Это можно сделать, подкорректировав /etc/apache2/apache2.conf, изменив «AllowOverride None» на «AllowOverride All» для нужной директории. Вот пример:

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Чтобы применить изменения, следует выполнить его перезагрузку с помощью команды:

sudo systemctl restart apache2

После этого /var/www/html/.htaccess должен обрабатываться.

Но не факт что будут обрабатываться записанные в нём редиректы.

Вот содержимое .htaccess, которое следует записать для Angular:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ /index.html
</IfModule>

Если редиректы не выполняются, то следует выполнить команду:

sudo a2enmod rewrite

Тогда мы включим модуль mod_rewrite и отработает условный оператор в файле.

Добавление пользователя MySQL

Если вы устанавливали MAMP, то логин у пользователя будет root и пароль тоже root.

При необходимости, для PhpMyAdmin можно создать нового суперпользователя.

Для этого следует запустить MySQL со следующими ключами:

sudo mysql –u root –p

Будет предложено ввести пароль, вводим root, попадаем в консоль в которой:

Создаём нового пользователя с паролем:

CREATE USER 'пользователь'@'localhost' IDENTIFIED BY 'пароль';

Добавляем ему все права:

GRANT ALL PRIVILEGES ON *.* TO 'пользователь'@'localhost' WITH GRANT OPTION;

Обновляем права:

FLUSH PRIVILEGES;

Изменения в Angular

В папку src следует поместить файл .htaccess, в котором записан текст, приведённый ранее.

Также добавить папку src/php, в которую мы будем складывать скрипты на PHP, которые будут делать запросы к базе данных и возвращать необходимые выборки программе на Angular.

Откорректируем angular.json, находящийся в корне проекта. Добавим доступ к созданному нами ранее каталогу php и к файлу .htaccess в assets:

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/php",
    "src/.htaccess"
],

Изменим каталог вывода собранных файлов, на директорию, из которой берёт скрипты apache:

"outputPath": "/var/www/html",

Если вы используете MAMP на Windows, то путь к папке по умолчанию будет следующим:

"outputPath": "C:\\MAMP\\htdocs",

Запуск сайта

Теперь выполним отладочный запуск сайта. Для этого воспользуемся не командой ng serve, а следующей:

ng build -–watch true

Теперь, если всё было сделано правильно, то должно работать!

Публикация

Конечно, это только отладочный запуск. Для публикации следует почистить код от ненужных отладочных команд, а потом его собрать с помощью ng build –prod. Также можно задать директорию куда будет собираться всё прямо из командной строки, используя ключ –outputPath=путь. Таким образом можно задать путь куда следует собирать проект не из angular.json (через который мы этот путь изменяли выше).