@astrojs/ node

このアダプターを使用すると、Astroでオンデマンドでレンダリングされたルートと機能をNodeターゲットにデプロイできます。これには、サーバーアイランド、アクション、セッションが含まれます。

Astroを静的サイトビルダーとして使用している場合、アダプターは必要ありません。

Astro Node.jsを選ぶ理由

Node.jsは、サーバーサイドコード用のJavaScriptランタイムです。@astrojs/nodeは、スタンドアロンモードまたはExpressなどの他のhttpサーバーのミドルウェアとして使用できます。

インストール

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

astro addコマンドでNodeアダプターを追加して、Astroプロジェクトでオンデマンドレンダリングを有効にします。 これにより、@astrojs/nodeがインストールされ、astro.config.*ファイルに適切な変更が一度に行われます。

npm

npx astro add node

pnpm

pnpm astro add node

Yarn

yarn astro add node

これで、ページごとにオンデマンドレンダリングを有効にするか、ビルド出力設定をoutput: 'server'に設定してデフォルトですべてのページをサーバーレンダリングすることができます。

手動インストール

まず、お好みのパッケージマネージャーを使用して、Nodeアダプターをプロジェクトの依存関係に追加します。

npm

npm install @astrojs/node

pnpm

pnpm add @astrojs/node

Yarn

yarn add @astrojs/node

次に、アダプターをastro.config.*ファイルに追加します。

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  adapter: node({
    mode: 'standalone',
  }),
});

設定

@astrojs/nodeは、アダプター関数にオプションを渡すことで設定できます。次のオプションが利用可能です。

mode

Type: 'middleware' | 'standalone'

アダプターがmiddlewareモードとstandaloneモードのどちらでビルドするかを制御します。

• middlewareモードでは、ビルドされた出力をExpress.jsやFastifyなどの別のNode.jsサーバーのミドルウェアとして使用できます。
• standaloneモードでは、エントリモジュールが実行されると自動的に起動するサーバーがビルドされます。これにより、追加のコードを必要とせずに、ビルドをホストに簡単にデプロイできます。

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  adapter: node({
    mode: 'middleware',
  }),
});

experimentalDisableStreaming

Type: boolean
Default: false

追加： @astrojs/node@9.3.0

オンデマンドでレンダリングされるページの、AstroのデフォルトのHTMLストリーミングを無効にします。

HTMLストリーミングはパフォーマンスに役立ち、一般的にユーザーにより良い体験を提供します。ほとんどの場合、ストリーミングを無効にすることはお勧めできません。

ただし、HTMLストリーミングを無効にする必要がある場合（たとえば、ホストがCDNレベルでストリーミングされていないHTMLキャッシュのみをサポートしている場合）、デフォルトの動作をオプトアウトできます。

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  adapter: node({
    mode: 'standalone',
    experimentalDisableStreaming: true,
  }),
});

experimentalStaticHeaders

Type: boolean
Default: false

追加： @astrojs/node@9.3.0

有効にすると、アダプターは、コンテンツセキュリティポリシーなどのAstroの機能によって提供された場合、Responseオブジェクトを使用して事前レンダリングされたページのヘッダーを提供します。

たとえば、実験的なコンテンツセキュリティポリシー (EN)が有効になっている場合、experimentalStaticHeadersを使用して、<meta>要素を作成する代わりにCSPヘッダーをResponseオブジェクトに追加できます。

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  experimental: {
    csp: true
  },
  adapter: node({
    mode: 'standalone',
    experimentalStaticHeaders: true,
  })
});

experimentalErrorPageHost

Type: string | URL
Default: undefined

追加： @astrojs/node@9.4.0

事前レンダリングされたカスタムエラーページを読み込むための代替ホストを指定します。

Astroがレスポンスで404ページを返すためには、ページを読み込める必要があります。デフォルトでは、Astroはリクエストが送信されたホストと同じホストから事前レンダリングされたカスタムエラーページを読み込みます。たとえば、https://example.com/nonexistent-pageにリクエストが送信された場合、Astroはhttps://example.com/404.htmlから事前レンダリングされたエラーページを読み込もうとします。

experimentalErrorPageHostは、カスタムエラーページを別のホストから読み込む必要がある場合に使用します。たとえば、サーバーがリバースプロキシの背後で実行されている場合や、外部ホストURLにアクセスできないコンテナ内で実行されている場合です。また、パブリックインターネットを経由するよりもlocalhostから事前レンダリングされたエラーページを読み込む方が効率的な場合にも使用できます。

値は文字列またはURLオブジェクトです。プロトコルを含む完全修飾URLである必要があります（例：http://localhost:4321）。Astroは常にルートパスから事前レンダリングされたエラーページを読み込み、パスやクエリパラメーターは無視されます。

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  adapter: node({
    // パブリックURLではなくlocalhostからページを読み込みます。
    experimentalErrorPageHost: 'http://localhost:4321',
  })
});

使い方

まず、ビルドを実行します (EN)。選択したmode（上記参照）に応じて、以下の適切な手順に従ってください。

ミドルウェア

サーバーのエントリポイントは、デフォルトで./dist/server/entry.mjsにビルドされます。このモジュールは、Nodeのrequestおよびresponseオブジェクトをサポートする任意のフレームワークで使用できるhandler関数をエクスポートします。

たとえば、Expressでは次のようになります。

run-server.mjs

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
// これをastro.config.mjsの`base`オプションに基づいて変更します。
// それらは一致する必要があります。デフォルト値は「/」です。
const base = '/';
app.use(base, express.static('dist/client/'));
app.use(ssrHandler);

app.listen(8080);

または、Fastify（>4）では次のようになります。

run-server.mjs

import Fastify from 'fastify';
import fastifyMiddie from '@fastify/middie';
import fastifyStatic from '@fastify/static';
import { fileURLToPath } from 'node:url';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = Fastify({ logger: true });

await app
  .register(fastifyStatic, {
    root: fileURLToPath(new URL('./dist/client', import.meta.url)),
  })
  .register(fastifyMiddie);
app.use(ssrHandler);

app.listen({ port: 8080 });

さらに、Astro.localsまたはAstroミドルウェアでアクセスするオブジェクトを渡すこともできます。

run-server.mjs

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
app.use(express.static('dist/client/'));
app.use((req, res, next) => {
  const locals = {
    title: 'New title',
  };

  ssrHandler(req, res, next, locals);
});

app.listen(8080);

ミドルウェアモードではファイルを提供しないことに注意してください。HTTPフレームワークを設定して、ファイルを提供するようにする必要があります。デフォルトでは、クライアントアセットは./dist/client/に書き込まれます。

スタンドアロン

スタンドアロンモードでは、サーバーのエントリポイントが実行されるとサーバーが起動します。デフォルトでは、./dist/server/entry.mjsにビルドされます。次のように実行できます。

node ./dist/server/entry.mjs

スタンドアロンモードの場合、サーバーはページとAPIルートに加えてファイルの提供を処理します。

カスタムホストとポート

実行時に環境変数として渡すことで、スタンドアロンサーバーが実行されるホストとポートを上書きできます。

HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs

HTTPS

デフォルトでは、スタンドアロンサーバーはHTTPを使用します。これは、HTTPSを実行するプロキシサーバーがその前にある場合にうまく機能します。スタンドアロンサーバー自体でHTTPSを実行する必要がある場合は、SSLキーと証明書を提供する必要があります。

環境変数SERVER_CERT_PATHおよびSERVER_KEY_PATHを介してキーと証明書へのパスを渡すことができます。bashでそれらを渡す方法は次のとおりです。

SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dist/server/entry.mjs

アセット

スタンドアロンモードでは、dist/client/フォルダー内のアセットはスタンドアロンサーバーを介して提供されます。これらのアセットをCDNにデプロイしている場合があり、その場合、サーバーは実際にはそれらを提供しません。しかし、イントラネットサイトなどの場合によっては、アプリケーションサーバーから直接静的アセットを提供しても問題ありません。

dist/client/_astro/フォルダー内のアセットは、Astroがビルドしたものです。これらのアセットはすべてハッシュで名前が付けられているため、長いキャッシュヘッダーを付けることができます。内部的に、アダプターはこれらのアセットにこのヘッダーを追加します。

Cache-Control: public, max-age=31536000, immutable

セッション

Astro Sessions APIを使用すると、リクエスト間でユーザーデータを簡単に保存できます。これは、ユーザーデータや設定、ショッピングカート、認証情報などに使用できます。Cookieストレージとは異なり、データにサイズ制限はなく、別のデバイスで復元できます。

Astroは、Nodeアダプターを使用する場合、セッションストレージにローカルファイルシステムを使用します。別のセッションストレージドライバーを使用したい場合は、Astro設定で指定できます。詳細については、 session設定リファレンス (EN)を参照してください。

環境変数

ランタイムでastro:env (EN)のシークレットやprocess.envを使用する場合、Astroもアダプターも環境変数を自動的に読み込みません。

一部のホストでは、ダッシュボードで設定した環境変数がビルド時およびランタイムに公開される場合があります。各プラットフォームでの環境変数の設定と使用方法については、ホストのドキュメントを確認してください。

セルフホスティングの場合は、CLIコマンドや設定ファイルを使用して環境変数を読み込めます。

Inline

DB_HOST=... DB_PASSWORD=... node ./dist/server/entry.mjs

dotenvx

npx @dotenvx/dotenvx run -- node ./dist/server/entry.mjs

Docker

Dockerfile

FROM node:lts AS runtime
WORKDIR /app

COPY . .

RUN npm install
RUN npm run build

ENV DB_HOST=...
ENV DB_PASSWORD=...
CMD node ./dist/server/entry.mjs

他のインテグレーション

UIフレームワーク

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSRアダプター

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

その他

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap