Запуск режима разработки Vite в приложении Symfony 7 с веб-сервером DDEV ⇐ Php

[Anonymous]

Я хотел запустить Vite в режиме разработки (просматривать файлы JS и CSS) для своего приложения Symfony 7, которое обслуживается веб-сервером DDEV.

Код: Выделить всё

// package.json
{
// ...
"scripts": {
"dev": "vite",
"build": "vite build"
},
}

Теперь https://my.ddev.site работает нормально, и мои ресурсы отлично загружаются при использовании $ npm run build. Но использование $ npm run dev у меня не работает. Кажется, мои ресурсы загружены не с того хоста в режиме разработки. Они загружаются из:

Код: Выделить всё

Где бы я хотел, чтобы это было:

Код: Выделить всё

В идеале я хочу, чтобы мои ресурсы отслеживались в режиме разработки, а браузер автоматически обновлялся.
Я пробовал загрузить другой хост, прокси-сервер или другие настройки в vite.config.js:

Код: Выделить всё

// vite.config.js
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import autoprefixer from "autoprefixer";

/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
autoprefixer
],
server: {
// host: "https://my.ddev.site", // Error: getaddrinfo ENOTFOUND https://my.ddev.site
// origin: 'https://my.ddev.site', // Does update the asset path but ends up in a loop
proxy: {
// Using the proxy instance
'^/': {
target: 'https://my.ddev.site',
changeOrigin: true,
configure: (proxy, options) => {
// proxy will be an instance of 'http-proxy'
},
},
},
},
build: {
rollupOptions: {
input: {
app: "./assets/app.js"
},
}
},
});

но пока безуспешно. Кто-нибудь может мне помочь? Не знаю, поможет ли это, но я работаю над MacOS
Спасибо!

После прочтения https ://ddev.com//blog/working-with-vite-in-ddev/ (спасибо @rfay) Я добавил это в свою конфигурацию DDEV:

Код: Выделить всё

// .ddev/config.yaml
web_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173

Перезапустил DDEV
Добавил это в vite.config.js:

Код: Выделить всё

const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({

// Adjust Vites dev server to work with DDEV
// https://vitejs.dev/config/server-options.html
server: {
// respond to all network requests:
host: '0.0.0.0',
port: port,
strictPort: true,
// Defines the origin of the generated asset URLs during development
origin: origin
}

});

Теперь путь правильный, но я получаю ошибку CORS:

Код: Выделить всё

Access to script at 'http://my.ddev.site:5173/build/@vite/client' from origin 'http://my.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Подходим ближе, все еще не работает

Подробнее здесь: https://stackoverflow.com/questions/787 ... -webserver