VercelアプリでサブドメインからCookieを設定する方法：初心者向け完全ガイド

1. Cookie（クッキー）とは？基本を理解しよう

Cookie（クッキー）とは、Webサイトがユーザーのブラウザに保存する小さなテキストファイルのことです。WebサイトはCookieを使って、ユーザーのログイン情報、ショッピングカートの中身、サイトの閲覧履歴などを記憶することができます。

Cookieの役割:
ユーザーの識別
セッション管理（ログイン状態の維持など）
パーソナライズ（ユーザーに合わせたコンテンツ表示）
行動追跡（広告ターゲティングなど）

2. なぜサブドメインでCookieを設定する必要があるのか？

Webサイトを複数のサブドメインに分割している場合、サブドメイン間で情報を共有するためにCookieが必要になることがあります。例えば、メインサイト（example.com）とブログ（blog.example.com）でユーザーのログイン状態を共有したい場合などが該当します。

3. Cookieのドメイン属性：`Domain`属性の重要性

Cookieを設定する際に重要なのが、Domain属性です。Domain属性は、Cookieが有効になるドメインを指定します。

Domain属性がない場合: Cookieは、設定されたドメインにのみ有効です。例えば、example.comで設定されたCookieは、example.comでのみ有効で、blog.example.comでは利用できません。
Domain属性がある場合: Domain属性に指定されたドメインとそのサブドメインでCookieが有効になります。例えば、Domain=example.comと設定されたCookieは、example.com、blog.example.com、shop.example.comなど、すべてのサブドメインで利用できます。

4. VercelでサブドメインにCookieを設定する具体的な方法

VercelでサブドメインにCookieを設定するには、サーバーサイドのコードでDomain属性を適切に設定する必要があります。以下に、Node.js（ノードジェイエス）とcookieライブラリを使った例を示します。

const { serialize } = require('cookie');

export default async function handler(req, res) {
  const cookieValue = 'my-cookie-value';

  const cookieOptions = {
    domain: '.example.com',
    path: '/',
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
  };

  const serializedCookie = serialize('my-cookie', cookieValue, cookieOptions);

  res.setHeader('Set-Cookie', serializedCookie);

  res.status(200).json({ message: 'Cookie set successfully' });
}

コードの解説:

require(‘cookie’): cookieライブラリをインポートします。このライブラリは、Cookieのシリアライズ（文字列への変換）を簡単に行うためのものです。
cookieOptions: Cookieのオプションを設定します。
domain: ‘.example.com’: Domain属性を.example.comに設定します。先頭に.をつけることで、example.comとそのすべてのサブドメインでCookieが有効になります。
path: ‘/’: Cookieが有効になるパスを/（ルート）に設定します。これにより、サイト全体でCookieが利用可能になります。
httpOnly: true: JavaScriptからのCookieへのアクセスを禁止します。セキュリティ対策として推奨されます。
secure: process.env.NODE_ENV === ‘production’: 本番環境（production）でのみ、HTTPS経由でCookieを送信するように設定します。
sameSite: ‘lax’: CSRF（クロスサイトリクエストフォージェリ）攻撃に対する対策として、sameSite属性をlaxに設定します。
serialize(‘my-cookie’, cookieValue, cookieOptions): cookieライブラリのserialize関数を使って、Cookieを文字列に変換します。
res.setHeader(‘Set-Cookie’, serializedCookie): レスポンスヘッダーにSet-Cookieを設定し、ブラウザにCookieを送信します。

補足:

cookieライブラリは、npm install cookieでインストールできます。
NODE_ENV環境変数は、Vercelの環境変数設定で定義できます。

5. Vercelでのドメイン設定の確認

Vercelでサブドメインを使用している場合、Vercelのダッシュボードでドメイン設定が正しく行われているか確認してください。

Vercelのプロジェクトにアクセスします。
“Settings” > “Domains” を選択します。
サブドメインが正しく設定されていることを確認します。

6. Cookie設定の注意点

セキュリティ: Cookieには機密情報を保存しないようにしましょう。また、httpOnly属性やsecure属性を適切に設定し、セキュリティ対策を講じることが重要です。
SameSite属性: SameSite属性は、CSRF攻撃に対する対策として重要です。lax、strict、noneのいずれかの値を設定できます。
Cookieのサイズ制限: Cookieにはサイズ制限があります（通常は4KB）。大きなデータをCookieに保存することは避けましょう。
プライバシー: Cookieの使用目的を明確にし、プライバシーポリシーに記載することが重要です。

7. まとめ：VercelでのCookie設定をマスターしよう

この記事では、VercelアプリでサブドメインからCookieを設定する方法について解説しました。

Cookieは、Webサイトがユーザーのブラウザに保存する小さなテキストファイルです。
サブドメイン間で情報を共有するためにCookieが必要になることがあります。
Domain属性は、Cookieが有効になるドメインを指定します。
VercelでサブドメインにCookieを設定するには、サーバーサイドのコードでDomain属性を適切に設定する必要があります。
セキュリティ、SameSite属性、Cookieのサイズ制限、プライバシーに注意しましょう。

次のステップ:

実際にコードを書いて、Cookieの設定を試してみましょう。
Cookieに関するセキュリティ対策について、さらに深く学んでみましょう。
Vercelのドキュメントを読んで、Vercelの機能をさらに理解しましょう。

この記事が、VercelでのCookie設定の理解に役立つことを願っています！