設定方法
次のリファレンスは Astro でサポートされているすべての設定項目をカバーしています。Astro の設定についてもっと知りたい場合は、Astro の設定の解説をご覧ください。
import { defineConfig } from 'astro/config'
export default defineConfig({
// 設定項目をこちらに記載
})
トップレベルのオプション
Section titled トップレベルのオプションデータ型: string
CLI: --root
デフォルト値: "."
(現在の作業ディレクトリ)
このオプションはプロジェクトルートのディレクトリ以外のディレクトリで astro
の CLI コマンドを実行するときのみに指定する必要があります。Astro は設定ファイルを見つける前にプロジェクトルートを知る必要があるため、通常このオプションは Astro の設定ファイルのかわりに CLI 経由で指定されます。
もし相対パスを渡した場合 (例: --root: './my-project'
) 、Astro は現在の作業ディレクトリに対して相対パスを解決します。
{
root: './my-project-directory'
}
$ astro build --root ./my-project-directory
srcDir
Section titled srcDirデータ型: string
デフォルト値: "./src"
Astro がサイトを読み込むディレクトリを設定します。
この値はファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかで設定されます。
{
srcDir: './www'
}
publicDir
Section titled publicDirデータ型: string
デフォルト値: "./public"
静的アセットを置くディレクトリを設定します。このディレクトリのファイルは開発環境では /
で配信され、ビルド時にはビルド用のディレクトリにコピーされます。これらのファイルは変換、バンドルされることはなく、常にそのままの状態で配信、コピーされます。
この値はファイルシステムの絶対パスかプロジェクトルートからの相対パスのどちらかで設定されます。
{
publicDir: './my-custom-publicDir-directory'
}
outDir
Section titled outDirデータ型: 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'
}
trailingSlash
Section titled trailingSlashデータ型: 'always' | 'never' | 'ignore'
デフォルト値: 'ignore'
開発サーバーのルーティングを合わせる動作の設定をします。次のオプションから選択してください。
'always'
- 末尾にスラッシュを含むURLにのみマッチする (例: “/foo/“)'never'
- 末尾にスラッシュを含むURLにはマッチしない (ex: “/foo”)'ignore'
- URL の末尾に ”/” があるかどうかに関係なく一致する
本番用ホストが末尾のスラッシュどのように機能するか、機能しないかについて厳格な取り扱いをしている場合、この設定項目を使用してください。
末尾のスラッシュを含む、または含まない URL が開発時に動作させないようにより厳格にしたい場合はこのオプションを設定することもできます。
{
// 例: 開発時に末尾のスラッシュを必須にするdevelopment
trailingSlash: 'always'
}
こちらもご覧ください:
- buildOptions.pageUrlFormat
ビルドのオプション
Section titled ビルドのオプションbuild.format
Section titled build.formatデータ型: ('file' | 'directory')
デフォルト値: 'directory'
それぞれのページの出力ファイルの形式を取り扱います。
- ‘file’ が指定された場合、Astro はそれぞれのページで HTML ファイルを生成します。 (例: “/foo.html”)
- ‘directory’ が指定された場合、Astro はそれぞれのページでネストされた
index.html
ファイル (例: “/foo/index.html”) があるディレクトリを生成します。
{
build: {
// 例: ビルドの間に `page/index.html` のかわりに `page.html` を生成します。
format: 'file'
}
}
サーバーのオプション
Section titled サーバーのオプションastro dev
と astro preview
の両方で使用される、Astro の開発サーバーをカスタマイズします。
{
server: { port: 1234, host: true }
}
実行するコマンド (“dev”, “preview”) に応じて異なる設定をするために、この設定項目に関数も渡すことができます。
{
// 例: コマンドに応じてカスタマイズするためには関数の構文を使用します
server: (command) => ({ port: command === 'dev' ? 3000 : 4000 })
}
server.host
Section titled server.hostデータ型: string | boolean
デフォルト値: false
astro@0.24.0
どのネットワーク IP アドレスでサーバーがリッスンするか設定します。(例: localhost ではない IP)
false
- ネットワーク IP アドレスを公開しないtrue
- LAN やパブリックなアドレスを含むすべてのアドレスでリッスンする[custom-address]
-[custom-address]
(例:192.168.0.1
) のネットワーク IP アドレスを公開する
server.port
Section titled server.portデータ型: number
デフォルト値: 3000
ポートがリッスンするポートを設定する。
設定されたポートが使用されていた場合、Astro は自動的に次の利用可能なポート番号を試みます。
{
server: { port: 8080 }
}
マークダウンのオプション
Section titled マークダウンのオプションmarkdown.drafts
Section titled markdown.draftsデータ型: boolean
デフォルト値: false
マークダウンのドラフトページがビルドに含まれるかを制御します。
マークダウンページが front-matter に draft: true
を含む場合、ドラフトとみなされます。ドラフトページは開発環境 (astro dev
) では常に含まれ、閲覧できますが、デフォルトでは最終的なビルドに含まれません。
{
markdown: {
// 例: 最終的なビルドにドラフトをすべて含む
drafts: true,
}
}
markdown.shikiConfig
Section titled markdown.shikiConfigデータ型: Partial<ShikiConfig>
Shiki の設定項目です。使い方はマークダウンの設定のドキュメントをご覧ください。
markdown.syntaxHighlight
Section titled markdown.syntaxHighlightデータ型: 'shiki' | 'prism' | false
デフォルト値: shiki
もしあれば、使用するシンタックスハイライトを設定します。
{
markdown: {
// 例: マークダウンで prism のシンタックスハイライトを使用するよう変更する
syntaxHighlight: 'prism',
}
}
markdown.remarkPlugins
Section titled markdown.remarkPluginsデータ型: RemarkPlugins
どのようにマークダウンがビルドされるかをカスタマイズするために Remark のプラグインを渡します。
注意: カスタムの remarkPlugins
または rehypePlugins
を有効にすると、Astro の GitHub-flavored Markdown と Smartypants のビルトインサポートが無効になります。必要であれば、これらのプラグインを astro.config.mjs
ファイルに明示的に追加する必要があります。
{
markdown: {
// 例: Astro で使用されるデフォルトの remark のプラグイン
remarkPlugins: ['remark-gfm', 'remark-smartypants'],
},
};
markdown.rehypePlugins
Section titled markdown.rehypePluginsデータ型: RehypePlugins
どのようにマークダウンがビルドされるかをカスタマイズするために Rehype のプラグインを渡します。
注意: カスタムの remarkPlugins
または rehypePlugins
を有効にすると、Astro の GitHub-flavored Markdown と Smartypants のビルトインサポートが無効になります。必要であれば、これらのプラグインを astro.config.mjs
ファイルに明示的に追加する必要があります。
{
markdown: {
// 例: Astro で使用されるデフォルトの rehype のプラグイン
rehypePlugins: [],
},
};
アダブター
Section titled アダブタービルドアダプタを使用して、お好きなサーバー、サーバーレス、エッジのホストにデプロイできます。Netlify (EN) や Vercel などのファーストパーティーのアダプターを Astro の SSRにインポートしてください。
SSR についてより詳しく知りたい場合はサーバーサイドレンダリングのガイドを、ホストの完全な一覧はデプロイのガイドをご覧ください。
import netlify from '@astrojs/netlify/functions';
{
// 例: Netlify のサーバーレスのデプロイのためのビルド
adapter: netlify(),
}
インテグレーション
Section titled インテグレーションカスタムインテグレーションで 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()],
}
}