Оптимизация PUBLIC_URL в Create-React-App: Как настроить и использовать переменную окружения

Создание веб-приложений на React является одним из наиболее популярных способов разработки современных веб-сайтов и приложений. И одним из самых важных аспектов при создании React-приложений является управление путями и URL-адресами. В этой статье мы рассмотрим, как настроить и использовать переменную окружения PUBLIC_URL в Create-React-App, чтобы эффективно управлять URL-адресами в вашем приложении.

Введение в PUBLIC_URL

Переменная окружения PUBLIC_URL является важной частью процесса разработки в Create-React-App (CRA). Она определяет базовый URL-адрес, на котором будет развернуто ваше приложение. Важно понимать, что PUBLIC_URL не является обычной переменной JavaScript. Вместо этого она задается во время сборки приложения и используется для правильной генерации URL-адресов для ресурсов, таких как статические файлы, изображения и CSS.

Установка PUBLIC_URL

Установить PUBLIC_URL можно несколькими способами, но наиболее распространенный метод – это установка его в файле .env в корне вашего проекта. Если у вас его еще нет, создайте файл .env и добавьте следующую строку:

PUBLIC_URL=/my-app

В этом примере мы устанавливаем PUBLIC_URL на /my-app, что означает, что наше приложение будет доступно по адресу https://example.com/my-app, если вы развернете его на сервере.

Использование PUBLIC_URL

Теперь, когда PUBLIC_URL установлен, вы можете использовать его в вашем коде для создания правильных URL-адресов. Вот несколько примеров, как это можно сделать:

Ссылки и маршруты

import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <Link to={`${process.env.PUBLIC_URL}/about`}>О нас</Link>
      {/* ... */}
    </div>
  );
}

В этом примере мы используем process.env.PUBLIC_URL для создания правильного URL-адреса для маршрута /about.

Загрузка статических файлов

<img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="Логотип" />

Здесь мы использовали PUBLIC_URL для указания правильного пути к изображению логотипа.

Преимущества использования PUBLIC_URL

Использование PUBLIC_URL предоставляет несколько преимуществ:

1. Портативность кода: Вы можете легко перемещать ваше приложение на другой хост или поддомен, изменив только значение PUBLIC_URL.

2. Безопасность: PUBLIC_URL помогает избежать проблем с безопасностью, такими как атаки на путаницу маршрутов.