Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions guide/api-environment-frameworks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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: {
Expand All @@ -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
Expand All @@ -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 を呼び出すことを前提としています。
Expand Down
4 changes: 2 additions & 2 deletions guide/api-environment-instances.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
```

Expand Down
2 changes: 1 addition & 1 deletion guide/api-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 では、これらの環境を適切に表現できませんでした。

Expand Down