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

Дата обновления перевода 2024-07-25

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

Вы развёртываете приложение в CDN? Это отлично :)
Как только вы убедитесь в том, что ваши созданные файлы загружены в CDN, сконфигурируйте его в Encore:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// webpack.config.js
// ...

Encore
    .setOutputPath('public/build/')
    // в режиме разработки не используйте CDN
    .setPublicPath('/build');
    // ...
;

+ if (Encore.isProduction()) {
+     Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net');
+
+     // гарантируйте, что ключи в manifest.json *всё ещё*
+     // имеют префикс build/
+     // (например, "build/dashboard.js": "https://my-cool-app.com.global.prod.fastly.net/dashboard.js")
+     Encore.setManifestKeyPrefix('build/');
+ }

Вот и всё! Внутренне, Webpack теперь будет знать, что надо загружать ресурсы из вашего CDN - например, https://my-cool-app.com.global.prod.fastly.net/dashboard.js.

Note

Помещение ресурсов в CDN - это всё ещё ваша ответственность. Например, загружая их или используя "извлечение источника", где ваш CDN извлекает ресурсы напрямую из вашего веб-сервера.

Вам нужно убедиться в том, что теги script и link, которые вы включаете в ваши страницы, также используют CDN. К счастью, пути manifest.json обновлены так, чтобы указывать на CDN. В Symfony, если вы сконфигурировали Версионирование ресурсов, то вы закончили! Файл manifest.json включает полный URL CDN.

При развертывании в подкаталоге вашей CDN необходимо добавить путь в конец URL-адреса -
например, Encore.setPublicPath('https://my-cool-app.com.global.prod.fastly.net/awesome-website') сгенерирует URL ресурсов типа https://my-cool-app.com.global.prod.fastly.net/awesome-website/dashboard.js.

Если вы используете Encore.enableIntegrityHashes() и ваша CDN и ваш домен не являются same-origin, вам может потребоваться установить опцию crossorigin в вашей конфигурации webpack_encore.yaml в значение anonymous или use-credentials. для преодоления ошибок CORS.