Vercelは、Next.jsやその他のフロントエンドフレームワークのプロジェクトを簡単にホスティングできるプラットフォームです。しかし、Vercelに載せるときのディレクトリとビルド設定には、注意点がいくつかあります。この記事では、Vercelへのデプロイをスムーズにするためのディレクトリ構成とビルド設定の勘どころについて説明します。
ディレクトリ構成
Vercelでは、プロジェクトのルートディレクトリが重要です。プロジェクトのルートディレクトリには、package.jsonファイルや、Next.jsの設定ファイルであるnext.config.jsファイルが含まれることが多いです。Vercelでは、プロジェクトのルートディレクトリを自動的に検出しますが、ディレクトリ構成が複雑な場合は、手動で設定する必要があります。
例えば、以下のようなディレクトリ構成の場合:
my-project/
├── package.json
├── next.config.js
├── pages/
│ ├── index.js
│ └── about.js
├── components/
│ ├── Header.js
│ └── Footer.js
└── public/
├── index.html
└── favicon.ico
Vercelでは、my-projectディレクトリがプロジェクトのルートディレクトリとして認識されます。
ビルド設定
Vercelでは、ビルド設定をvercel.jsonファイルで定義できます。このファイルでは、ビルドの際に使用するコマンドや、ビルド後のファイルをどこに保存するかを指定できます。
例えば、以下のようなvercel.jsonファイルの場合:
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/static-build"
}
],
"routes": [
{
"src": "/",
"dest": "index.html"
}
]
}
Vercelでは、package.jsonファイルをビルドの起点として使用し、ビルド後のファイルをindex.htmlに保存します。
ビルドの実行
Vercelでは、ビルドを実行するために、vercel buildコマンドを使用します。このコマンドは、vercel.jsonファイルで定義されたビルド設定を使用して、プロジェクトをビルドします。
例えば、以下のようなコマンドの場合:
vercel build --prod
Vercelでは、プロジェクトをビルドし、ビルド後のファイルをindex.htmlに保存します。
まとめ
Vercelへのデプロイをスムーズにするためのディレクトリ構成とビルド設定には、注意点がいくつかあります。この記事では、ディレクトリ構成とビルド設定の勘どころについて説明しました。また、ビルドを実行するために使用するコマンドについても説明しました。