Skip to content

Commit 11f9b9e

Browse files
jeremy-stepdg
authored andcommitted
assets: document Docker development and the Vite plugin host option (#1079)
Incorporates the docs from #1079, verified against the plugin's "added host option and normalized dev server URL" change: host option, 0.0.0.0/true normalization to localhost, CORS/allowedHosts handling.
1 parent 14f83e9 commit 11f9b9e

2 files changed

Lines changed: 92 additions & 0 deletions

File tree

‎assets/cs/vite.texy‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,52 @@ export default defineConfig({
326326
Všimněte si, že pokud používáte konfiguraci CORS (možnost 1 výše), musíte aktualizovat URL původu tak, aby používala `https://` namísto `http://`.
327327

328328

329+
Vývoj s Dockerem
330+
----------------
331+
332+
Když spouštíte Vite uvnitř Docker kontejneru, je potřeba ohlídat dvě věci: prohlížeč na vašem počítači musí být schopen dosáhnout na vývojový server a Vite musí rozpoznat změny souborů přes hranici kontejneru.
333+
334+
Nejprve z kontejneru [zpřístupněte |https://docs.docker.com/get-started/docker-concepts/running-containers/publishing-ports/] port Vite a navažte vývojový server na všechna rozhraní, aby byl dostupný zvenčí kontejneru:
335+
336+
```js
337+
export default defineConfig({
338+
// ... další konfigurace ...
339+
340+
plugins: [
341+
nette(),
342+
],
343+
server: {
344+
host: '0.0.0.0', // naslouchá na všech rozhraních (v kontejneru nutné)
345+
port: 5173, // musí odpovídat zpřístupněnému portu
346+
strictPort: true, // raději selže, než by zvolil jiný port
347+
watch: {
348+
usePolling: true, // zapněte, pokud se změny souborů na připojených svazcích nedetekují
349+
},
350+
},
351+
});
352+
```
353+
354+
Plugin zapíše URL vývojového serveru do `nette.json` pro PHP stranu. Protože `host: '0.0.0.0'` není použitelný v prohlížeči (u každého assetu přesměruje na `localhost`), plugin ho v této URL automaticky přepíše na `localhost`, takže se assety načtou správně.
355+
356+
Pokud aplikaci otevíráte na vlastní doméně místo `localhost`, nastavte `host` option pluginu na tuto doménu:
357+
358+
```js
359+
plugins: [
360+
nette({ host: 'myapp.local' }), // stejná doména jako vaše PHP aplikace
361+
],
362+
```
363+
364+
Plugin pak tento host použije pro URL vývojového serveru, přidá ho mezi CORS origins a povolí ho ve Vite `allowedHosts` - takže to funguje bez ruční konfigurace CORS.
365+
366+
U složitějších nasazení - například když Vite běží za reverzní proxy, kde se veřejný host, port i protokol liší od interní adresy - nastavte ve Vite `server.origin` na úplnou veřejnou URL. Plugin ji respektuje a zapíše do `nette.json` tak, jak je, místo aby URL odvozoval z lokálního socketu:
367+
368+
```js
369+
server: {
370+
origin: 'https://myapp.local:8443', // veřejná URL, na které prohlížeč dosáhne na Vite
371+
},
372+
```
373+
374+
329375
Produkční buildy
330376
================
331377

‎assets/en/vite.texy‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,52 @@ export default defineConfig({
326326
Note that if you're using the CORS configuration (Option 1 from above), you need to update the origin URL to use `https://` instead of `http://`.
327327

328328

329+
Docker Development
330+
------------------
331+
332+
When you run Vite inside a Docker container, two things need attention: the browser on your machine must be able to reach the dev server, and Vite must detect file changes across the container boundary.
333+
334+
First, [publish |https://docs.docker.com/get-started/docker-concepts/running-containers/publishing-ports/] the Vite port from the container and bind the dev server to all interfaces, so it is reachable from outside the container:
335+
336+
```js
337+
export default defineConfig({
338+
// ... other config ...
339+
340+
plugins: [
341+
nette(),
342+
],
343+
server: {
344+
host: '0.0.0.0', // listen on all interfaces (required in a container)
345+
port: 5173, // must match the published port
346+
strictPort: true, // fail rather than pick another port
347+
watch: {
348+
usePolling: true, // enable if file changes aren't detected on mounted volumes
349+
},
350+
},
351+
});
352+
```
353+
354+
The plugin writes the dev server URL into `nette.json` for the PHP side. Because `host: '0.0.0.0'` is not usable by a browser (it redirects to `localhost` for every asset), the plugin automatically rewrites it to `localhost` in that URL, so assets load correctly.
355+
356+
If you open the application on a custom domain instead of `localhost`, set the plugin's `host` option to that domain:
357+
358+
```js
359+
plugins: [
360+
nette({ host: 'myapp.local' }), // the same domain as your PHP app
361+
],
362+
```
363+
364+
The plugin then uses this host for the dev server URL, adds it to the CORS origins, and whitelists it in Vite's `allowedHosts` - so it works without any manual CORS setup.
365+
366+
For more complex setups - for example when Vite runs behind a reverse proxy where the public host, port, and protocol all differ from the internal address - set Vite's `server.origin` to the full public URL. The plugin respects it and writes it into `nette.json` as-is, instead of deriving the URL from the local socket:
367+
368+
```js
369+
server: {
370+
origin: 'https://myapp.local:8443', // the public URL where the browser reaches Vite
371+
},
372+
```
373+
374+
329375
Production Builds
330376
=================
331377

0 commit comments

Comments
 (0)