Интеграция Yii2 с современными фронтенд фреймворками

Yii2 — это мощный PHP-фреймворк для бэкенда. А React, Vue или Angular — это современные инструменты для фронтенда. Как их подружить? В этой статье разберём, как настроить Yii2 в качестве REST API и подключить к нему популярный фронтенд-фреймворк. Без лишней теории, только практика и примеры кода.

Digital-студия WNDER

Почему стоит разделить бэкенд и фронтенд

Раньше мы делали всё в одном проекте: Yii2 генерировал HTML, а JavaScript добавлял интерактивность. Сейчас тренд другой — разделение на бэкенд (API) и фронтенд (SPA). Это даёт гибкость: можно менять фронтенд, не трогая бэкенд, и наоборот. Плюс легче масштабировать и тестировать.

Yii2 отлично подходит для роли API-сервера. У него есть встроенная поддержка REST, аутентификация, кэширование и многое другое. А современные фронтенд-фреймворки (React, Vue, Angular) умеют общаться с API через HTTP-запросы.

Настройка Yii2 для работы в режиме API

Для начала нужно создать Yii2-приложение с шаблоном basic или advanced. Затем настроить модуль REST. Проще всего использовать готовый шаблон yii2-app-api или сконфигурировать компоненты вручную.

Вот пример конфигурации в config/web.php:

return [
    'id' => 'app-api',
    'basePath' => dirname(__DIR__),
    'components' => [
        'request' => [
            'parsers' => [
                'application/json' => 'yii\web\JsonParser',
            ],
            'enableCsrfValidation' => false, // для API отключаем CSRF
        ],
        'response' => [
            'format' => yii\web\Response::FORMAT_JSON,
        ],
        'user' => [
            'identityClass' => 'app\models\User',
            'enableSession' => false, // для stateless API
            'enableAutoLogin' => false,
        ],
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                ['class' => 'yii\rest\UrlRule', 'controller' => 'user'],
                // другие правила
            ],
        ],
    ],
];

Теперь создадим контроллер, наследующий yii\rest\ActiveController. Например, для работы с пользователями:

namespace app\controllers;

use yii\rest\ActiveController;

class UserController extends ActiveController
{
    public $modelClass = 'app\models\User';
}

Всё, у нас есть готовый REST API для модели User. Yii2 автоматически создаст экшены для CRUD-операций.

Аутентификация и CORS для фронтенда

Фронтенд будет обращаться к API с другого домена (например, localhost:3000 для React, а бэкенд на localhost:8080). Поэтому нужно настроить CORS (Cross-Origin Resource Sharing). В Yii2 это делается через фильтр Cors.

Добавим в контроллер:

use yii\filters\Cors;

public function behaviors()
{
    $behaviors = parent::behaviors();
    $behaviors['corsFilter'] = [
        'class' => Cors::class,
        'cors' => [
            'Origin' => ['http://localhost:3000'], // адрес фронтенда
            'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
            'Access-Control-Request-Headers' => ['*'],
            'Access-Control-Allow-Credentials' => true,
        ],
    ];
    return $behaviors;
}

Для аутентификации можно использовать токены (JWT или обычные Bearer-токены). Yii2 поддерживает несколько методов. Самый простой — HttpBearerAuth. Настроим его в контроллере:

use yii\filters\auth\HttpBearerAuth;

public function behaviors()
{
    $behaviors = parent::behaviors();
    $behaviors['authenticator'] = [
        'class' => HttpBearerAuth::class,
        'except' => ['login'], // логин без токена
    ];
    return $behaviors;
}

Теперь при запросе к защищённым экшенам нужно передавать заголовок Authorization: Bearer <token>.

Примеры интеграции с React и Vue

Фронтенд-часть будет делать HTTP-запросы к нашему API. Рассмотрим на примере React (с использованием fetch) и Vue (с axios).

React: создадим компонент, который загружает список пользователей.

import React, { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8080/users', {
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token'),
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.username}</li>
      ))}
    </ul>
  );
}

export default UserList;

Vue: аналогичный пример с использованием Composition API и axios.

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.username }}</li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);

onMounted(async () => {
  const response = await axios.get('http://localhost:8080/users', {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token'),
    },
  });
  users.value = response.data;
});
</script>

Как видите, ничего сложного. Главное — правильно настроить CORS и аутентификацию.

Сборка и деплой: советы и лайфхаки

Когда бэкенд и фронтенд разделены, нужно продумать процесс сборки и деплоя. Вот несколько рекомендаций:

• Используйте переменные окружения для URL API. Например, в React можно задать REACT_APP_API_URL в .env.
• Для продакшена настройте Nginx или Apache так, чтобы запросы к /api проксировались на Yii2, а остальные — на фронтенд.
• Кэшируйте ответы API на стороне Yii2 с помощью yii\filters\HttpCache — это ускорит загрузку.
• Не забывайте про версионирование API. Добавьте префикс /v1 в URL, чтобы в будущем можно было менять контракты без боли.

Сравним популярные фронтенд-фреймворки по ключевым параметрам для интеграции с Yii2:

Для Angular есть готовые модули, например angular-jwt, которые упрощают работу с токенами. В целом, интеграция Yii2 с любым современным фреймворком сводится к настройке API и правильной обработке запросов на клиенте.

Заключение

Интеграция Yii2 с современными фронтенд-фреймворками — это не rocket science. Достаточно настроить REST API, CORS и аутентификацию. Yii2 предоставляет все необходимые инструменты из коробки. Главное — следовать лучшим практикам и не забывать о безопасности.

Надеюсь, статья была полезной. Если остались вопросы — задавайте в комментариях.