設定方法

次のリファレンスは Astro でサポートされているすべての設定項目をカバーしています。Astro の設定についてもっと知りたい場合は、Astro の設定の解説をご覧ください。

import { defineConfig } from 'astro/config'

export default defineConfig({
  // 設定項目をこちらに記載
})

データ型: string
CLI: --root
デフォルト値: "." (現在の作業ディレクトリ)

このオプションはプロジェクトルートのディレクトリ以外のディレクトリで astro の CLI コマンドを実行するときのみに指定する必要があります。Astro は設定ファイルを見つける前にプロジェクトルートを知る必要があるため、通常このオプションは Astro の設定ファイルのかわりに CLI 経由で指定されます。

もし相対パスを渡した場合 (例: --root: './my-project') 、Astro は現在の作業ディレクトリに対して相対パスを解決します。

{
  root: './my-project-directory'
}

$ astro build --root ./my-project-directory

データ型: string
デフォルト値: "./src"

Astro がサイトを読み込むディレクトリを設定します。

この値はファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかで設定されます。

{
  srcDir: './www'
}

データ型: string
デフォルト値: "./public"

静的アセットを置くディレクトリを設定します。このディレクトリのファイルは開発環境では / で配信され、ビルド時にはビルド用のディレクトリにコピーされます。これらのファイルは変換、バンドルされることはなく、常にそのままの状態で配信、コピーされます。

この値はファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかで設定されます。

{
  publicDir: './my-custom-publicDir-directory'
}

データ型: string
デフォルト値: "./dist"

astro build コマンドが最終的にビルドした成果物を出力するディレクトリを設定します。

この値はファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかで設定されます。

{
  outDir: './my-custom-build-directory'
}

データ型: string

最終的にデプロイされた URL です。Astro は最後のビルドでサイトマップと canonical タグの URL を生成するためにこの完全な URL を使用します。Astro を最大限活用するためにこちらを設定することを強く推奨します。

{
  site: 'https://www.my-site.dev'
}

データ型: string

デプロイするベースのパスです。開発体験をビルド環境とできるだけ近づけるために Astro はこのパス名を一致させます。以下の例では、astro dev コマンドは /docs でサーバーを起動します。

{
  base: '/docs'
}

データ型: 'always' | 'never' | 'ignore'
デフォルト値: 'ignore'

開発サーバーのルーティングを合わせる動作の設定をします。次のオプションから選択してください。

• 'always' - 末尾にスラッシュを含むURLにのみマッチする (例: “/foo/“)
• 'never' - 末尾にスラッシュを含むURLにはマッチしない (ex: “/foo”)
• 'ignore' - URL の末尾に ”/” があるかどうかに関係なく一致する

本番用ホストが末尾のスラッシュどのように機能するか、機能しないかについて厳格な取り扱いをしている場合、この設定項目を使用してください。

末尾のスラッシュを含む、または含まない URL が開発時に動作させないようにより厳格にしたい場合はこのオプションを設定することもできます。

{
  // 例: 開発時に末尾のスラッシュを必須にするdevelopment
  trailingSlash: 'always'
}

こちらもご覧ください:

• buildOptions.pageUrlFormat

データ型: ('file' | 'directory')
デフォルト値: 'directory'

それぞれのページの出力ファイルの形式を取り扱います。

• ‘file’ が指定された場合、Astro はそれぞれのページで HTML ファイルを生成します。 (例: “/foo.html”)
• ‘directory’ が指定された場合、Astro はそれぞれのページでネストされた index.html ファイル (例: “/foo/index.html”) があるディレクトリを生成します。

{
  build: {
    // 例: ビルドの間に `page/index.html` のかわりに `page.html` を生成します。
    format: 'file'
  }
}

astro dev と astro preview の両方で使用される、Astro の開発サーバーをカスタマイズします。

{
  server: { port: 1234, host: true }
}

実行するコマンド (“dev”, “preview”) に応じて異なる設定をするために、この設定項目に関数も渡すことができます。

{
  // 例: コマンドに応じてカスタマイズするためには関数の構文を使用します
  server: (command) => ({ port: command === 'dev' ? 3000 : 4000 })
}

データ型: string | boolean
デフォルト値: false

どのネットワーク IP アドレスでサーバーがリッスンするか設定します。(例: localhost ではない IP)

• false - ネットワーク IP アドレスを公開しない
• true - LAN やパブリックなアドレスを含むすべてのアドレスでリッスンする
• [custom-address] - [custom-address] (例: 192.168.0.1) のネットワーク IP アドレスを公開する

データ型: number
デフォルト値: 3000

ポートがリッスンするポートを設定する。

設定されたポートが使用されていた場合、Astro は自動的に次の利用可能なポート番号を試みます。

{
  server: { port: 8080 }
}

データ型: boolean
デフォルト値: false

マークダウンのドラフトページがビルドに含まれるかを制御します。

マークダウンページが front-matter に draft: true を含む場合、ドラフトとみなされます。ドラフトページは開発環境 (astro dev) では常に含まれ、閲覧できますが、デフォルトでは最終的なビルドに含まれません。

{
  markdown: {
    // 例: 最終的なビルドにドラフトをすべて含む
    drafts: true,
  }
}

データ型: Partial<ShikiConfig>

Shiki の設定項目です。使い方はマークダウンの設定のドキュメントをご覧ください。

データ型: 'shiki' | 'prism' | false
デフォルト値: shiki

もしあれば、使用するシンタックスハイライトを設定します。

• shiki - Shiki のハイライトを使用します
• prism - Prism のハイライトを使用します
• false - シンタックスハイライトを使用しません

{
  markdown: {
    // 例: マークダウンで prism のシンタックスハイライトを使用するよう変更する
    syntaxHighlight: 'prism',
  }
}

データ型: RemarkPlugins

どのようにマークダウンがビルドされるかをカスタマイズするために Remark のプラグインを渡します。

注意: カスタムの remarkPlugins または rehypePlugins を有効にすると、Astro の GitHub-flavored Markdown と Smartypants のビルトインサポートが無効になります。必要であれば、これらのプラグインを astro.config.mjs ファイルに明示的に追加する必要があります。

{
  markdown: {
    // 例: Astro で使用されるデフォルトの remark のプラグイン
    remarkPlugins: ['remark-gfm', 'remark-smartypants'],
  },
};

データ型: RehypePlugins

どのようにマークダウンがビルドされるかをカスタマイズするために Rehype のプラグインを渡します。

注意: カスタムの remarkPlugins または rehypePlugins を有効にすると、Astro の GitHub-flavored Markdown と Smartypants のビルトインサポートが無効になります。必要であれば、これらのプラグインを astro.config.mjs ファイルに明示的に追加する必要があります。

{
  markdown: {
    // 例: Astro で使用されるデフォルトの rehype のプラグイン
    rehypePlugins: [],
  },
};

ビルドアダプタを使用して、お好きなサーバー、サーバーレス、エッジのホストにデプロイできます。Netlify (EN) や Vercel などのファーストパーティーのアダプターを Astro の SSRにインポートしてください。

SSR についてより詳しく知りたい場合はサーバーサイドレンダリングのガイドを、ホストの完全な一覧はデプロイのガイドをご覧ください。

import netlify from '@astrojs/netlify/functions';
{
  // 例: Netlify のサーバーレスのデプロイのためのビルド
  adapter: netlify(),
}

カスタムインテグレーションで Astro を拡張します。インテグレーションは、フレームワークのサポート (Solid.js など) 、新機能 (サイトマップなど) 、新しいライブラリ(Partytown や Turbolinks など) を追加するためのワンストップ・ショップです。

Astro のインテグレーションを使い始めるためにはインテグレーションガイドをご覧ください。

import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // 例: Astro に React と Tailwind のサポートを追加
  integrations: [react(), tailwind()]
}

Vite に追加の設定項目を渡します。Astro が必要な高度な設定をサポートしていない場合に有用です。

vite に設定するオブジェクトの完全なドキュメントは vitejs.dev でご覧になれます。

{
  vite: {
    ssr: {
      // 例: 必要な場合、壊れたパッケージが SSR の処理を行うのをスキップさせます
      external: ['broken-npm-package'],
    }
  }
}

{
  vite: {
    // 例: Astro プロジェクトに直接カスタムの vite プラグインを追加する
    plugins: [myPlugin()],
  }
}