From 0eb6d23f75bb7f163121759a924a48ec8b6d5809 Mon Sep 17 00:00:00 2001 From: Jun Shindo <46585162+jay-es@users.noreply.github.com> Date: Sat, 31 May 2025 18:09:04 +0900 Subject: [PATCH] docs: fix some mistakes in Environment API guides --- guide/api-environment-frameworks.md | 12 +++++++----- guide/api-environment-instances.md | 4 ++-- guide/api-environment.md | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/guide/api-environment-frameworks.md b/guide/api-environment-frameworks.md index 15138e41..ceb46199 100644 --- a/guide/api-environment-frameworks.md +++ b/guide/api-environment-frameworks.md @@ -84,7 +84,7 @@ Vite は、`dispatchFetch` メソッドの入力と出力を検証します。 ## Default `RunnableDevEnvironment` -[SSR セットアップガイド](/guide/ssr#setting-up-the-dev-server)で説明されているように、ミドルウェアモードに設定された Vite サーバーがあるとして、Environment API を使って SSR ミドルウェアを実装してみましょう。エラー処理は省略します。 +[SSR セットアップガイド](/guide/ssr#setting-up-the-dev-server)で説明されているように、ミドルウェアモードに設定された Vite サーバーがあるとして、Environment API を使って SSR ミドルウェアを実装してみましょう。これは `ssr` と呼ばれる必要はないので、この例では `server` と名付けます。エラー処理は省略します。 ```js import fs from 'node:fs' @@ -94,7 +94,7 @@ import { createServer } from 'vite' const __dirname = path.dirname(fileURLToPath(import.meta.url)) -const server = await createServer({ +const viteServer = await createServer({ server: { middlewareMode: true }, appType: 'custom', environments: { @@ -106,7 +106,7 @@ const server = await createServer({ // TypeScript でこれを RunnableDevEnvironment にキャストするか、ランナーへのアクセスを // 保護するために isRunnableDevEnvironment を使用する必要があるかもしれません -const environment = server.environments.node +const serverEnvironment = viteServer.environments.server app.use('*', async (req, res, next) => { const url = req.originalUrl @@ -118,12 +118,14 @@ app.use('*', async (req, res, next) => { // 2. Vite HTML 変換を適用します。これにより、Vite HMR クライアントが挿入され、 // Vite プラグインからの HTML 変換も適用されます。 // 例: global preambles from @vitejs/plugin-react - template = await server.transformIndexHtml(url, template) + template = await viteServer.transformIndexHtml(url, template) // 3. サーバーエントリをロードします。import(url) は、 // ESM ソースコードを Node.js で使用できるように自動的に変換します。 // バンドルは不要で、完全な HMR サポートを提供します。 - const { render } = await environment.runner.import('/src/entry-server.js') + const { render } = await serverEnvironment.runner.import( + '/src/entry-server.js', + ) // 4. アプリの HTML をレンダリングします。これは、entry-server.js のエクスポートされた // `render` 関数が適切なフレームワーク SSR API を呼び出すことを前提としています。 diff --git a/guide/api-environment-instances.md b/guide/api-environment-instances.md index 9652ff04..eb41bd3a 100644 --- a/guide/api-environment-instances.md +++ b/guide/api-environment-instances.md @@ -19,8 +19,8 @@ Environment API は実験的なものです。Vite 6 では API を安定させ // サーバーを作成するか、configureServer フックから取得する const server = await createServer(/* オプション */) -const environment = server.environments.client -environment.transformRequest(url) +const clientEnvironment = server.environments.client +clientEnvironment.transformRequest(url) console.log(server.environments.ssr.moduleGraph) ``` diff --git a/guide/api-environment.md b/guide/api-environment.md index 3ce142f3..e85339de 100644 --- a/guide/api-environment.md +++ b/guide/api-environment.md @@ -22,7 +22,7 @@ Vite 6 では、環境の概念が正式化されました。Vite 5 までは、 典型的なサーバーサイドレンダリング（SSR）アプリに移行すると、2 つの環境が存在することになります: - `client`: ブラウザー内でアプリを実行します。 -- `server`: Node（または他のサーバーランタイム）内でアプリを実行し、ブラウザーに送信する前にページをレンダリングします。 +- `ssr`: Node（または他のサーバーランタイム）内でアプリを実行し、ブラウザーに送信する前にページをレンダリングします。 開発環境では、Vite は Vite 開発サーバーと同じ Node プロセスでサーバーコードを実行し、プロダクション環境に近い環境を実現します。しかし、サーバーを他の JS ランタイムで実行することも可能であり、例えば [Cloudflare の workerd](https://github.com/cloudflare/workerd) など、制約が異なるものもあります。最近のアプリケーションは、ブラウザー、Node サーバー、Edge サーバーなど、2 つ以上の環境で実行されることもあります。 Vite 5 では、これらの環境を適切に表現できませんでした。