VercelでBasic認証を設定する手順・効かない原因【無料対応】

VercelでデプロイしたサイトにVercel Basic認証を設定したいけれど、無料プランでも可能な実装コードや、検索エンジンへのインデックスを防ぐための具体的な手順を詳しく知りたい。このような悩みを持つ開発者の方は多いのではないでしょうか。開発中のサイトを公開前に保護することは、プロジェクトの安全性を確保する上で非常に重要です。

こうした疑問に答えます。

VercelのBasic認証は、Next.jsのミドルウェア機能を活用することで無料プラン（Hobby）でも柔軟に実装可能です。標準のVercel Authentication機能は上位プランが必要となる場合もありますが、工夫次第で強固なVercel アクセス制限を構築できます。

本記事を読めば、Vercel ログイン 機能のような複雑な仕組みを入れずとも、第三者の閲覧や検索エンジンのクロールを確実に防ぎ、安全なテスト環境を構築できるようになります。Next.js Basic認証の具体的なコードを含めて解説するので、ぜひ最後まで読み進めてください。

VercelにBasic認証を導入する前の確認事項

vercelとはNext.js開発元が運営するクラウドプラットフォームのことで、Webサイトを公開する際に関係者のみに閲覧を制限したい場面は多いです。有力な手段であるBasic認証は、プランにより推奨される実装方法が異なります。導入前にプロジェクト環境と目的を整理してください。

開発環境におけるアクセス制限の重要性

プレビュー環境やテストサイトにVercel アクセス制限をかけることは、プロジェクト成功に不可欠な要素です。適切な制限がない状態で公開すると、検索エンジンに重複コンテンツとして登録されるリスクが生じます。

本番公開後のSEO評価を損なわないためにも、対策は欠かせません。Next.js Basic認証をMiddlewareで実装すれば、リクエストが届く前に安全に保護できます。

無料プランでの対応状況

Vercel Basic認証 無料プランでは、プラットフォーム標準の機能として認証設定は用意されていません。そのため、Vercel Middlewareを活用した自前でのコード実装が必要です。

無料プランとProプランの違いを以下の表にまとめました。

Hobbyプランでも工夫次第でVercel パスワード 認証を導入できます。非商用利用の範囲内で、リソース制限に注意しながら設定を進めましょう。

Proプラン専用機能の特徴

VercelのProプランでは、Vercel料金プランに応じて開発の利便性を高めるVercel ログイン 機能に近い保護設定が可能です。ただし、単純なBasic認証についてはMiddlewareでの実装が一般的となります。

Proプランで利用できる主な特徴は以下の通りです。

• ビジネス目的のプロジェクト公開ができる商用利用の許可
• Edge Requestsなどのリソース制限の大幅な緩和
• デプロイメント全体を保護するVercel Authenticationの簡易設定

Vercel basic 認証 効かないといったトラブルを防ぐためにも、仕様の理解は重要です。セキュリティ要件に合わせて、最適なプランと実装方法を選択してください。

VercelでBasic認証を設定する手順

Next.jsのMiddlewareを活用すれば、無料プランでもVercel Basic認証を実装できます。有料プランのVercel Password Protectionとは異なり、コードと環境変数を組み合わせることでアクセス制限を構築する方法です。

この方法はプレビュー環境を第三者から守るだけでなく、重複コンテンツによるSEOへの悪影響も防げます。具体的な実装手順を5つのステップで解説します。

① Next.jsのミドルウェアファイルを作成する

まずは、Next.jsプロジェクトのルートディレクトリにmiddleware.tsというファイルを作成します。srcディレクトリを使用しているプロジェクトの場合は、src直下に配置してください。

このファイルはVercel上でリクエストを処理する前に実行されるため、サイト全体へ確実にアクセス制限をかけられます。VercelとNext.jsの連携におけるNext.js Basic認証を実現するための基盤となる重要なステップです。

② パスワード認証用のコードを記述する

次に、作成したファイルへ認証ロジックを記述しましょう。以下のコードは、リクエストヘッダをチェックしてVercel パスワード認証を要求する仕組みです。

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('authorization');

  if (basicAuth) {
    const authValue = basicAuth.split(' ')[1];
    const [user, pwd] = atob(authValue).split(':');

    if (user === process.env.BASIC_AUTH_USER && pwd === process.env.BASIC_AUTH_PASSWORD) {
      return NextResponse.next();
    }
  }

  return new NextResponse('Auth Required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  });
}

このコードにより、正しい情報がないアクセスに対して401エラーを返し、ブラウザのログイン画面を呼び出せます。静的ファイルを含めてVercel アクセス制限を適用できるため非常に安全です。

③ ダッシュボードで環境変数を追加する

セキュリティを担保するため、ユーザー名とパスワードはVercel環境変数の設定として管理します。Vercelのプロジェクト設定からEnvironment Variables画面を開いてください。

• BASIC_AUTH_USER：ログインに使用するユーザー名
• BASIC_AUTH_PASSWORD：ログインに使用するパスワード

これらの値を設定することで、ソースコードに機密情報を記述せずにVercel ログイン機能を構築できます。特定の環境のみに適用したい場合は、環境変数ごとに適用範囲を選択することも可能です。

④ プロジェクトをデプロイする

コードと環境変数の準備ができたら、変更を反映させるためにVercelデプロイの手順に沿って公開しましょう。Git経由でプッシュするか、Vercel CLIでコマンドを実行して最新の状態へ更新してください。

もしVercel basic 認証 効か ないというトラブルが発生した際は、環境変数の綴りを確認しましょう。環境変数を変更した後は、一度再デプロイを行わないと設定が反映されない点に注意が必要です。

⑤ ログイン画面の表示を確認する

最後に、デプロイされたURLへアクセスして動作テストを行います。サイトを開いた瞬間にブラウザ独自の入力ダイアログが表示されれば成功です。

設定したユーザー名とパスワードを入力し、正しくコンテンツが表示されるか見てみましょう。プレビュー環境ごとの挙動を確認したい場合はVercel CLIで動作確認するのも有効で、これで無料プランでも安全にVercel Basic認証を運用でき、未完成のサイトが外部に漏れる心配もありません。

VercelのBasic認証が効かない場合の解決策

コードを記述しても認証画面が出ない、あるいは特定の環境で動作しないトラブルが発生することがあります。Basic認証が正しく機能しない主な原因は、設定不備やファイルの配置ミス、Edgeランタイム特有の制約です。

原因ごとに確認すべきポイントと対応策を解説します。

環境変数の設定内容の見直し

Vercel Basic認証の実装において、認証に使用するユーザー名とパスワードは環境変数で管理するのが一般的です。認証が通らない場合は、まずVercelのダッシュボード上で環境変数が正しく設定されているかを確認しましょう。

Middleware内で呼び出している変数名と、設定した名前が一致していないとVercel Authenticationは正常に動作しません。環境変数を追加した後は、設定を反映させるために必ず再デプロイを実行してください。

ミドルウェアファイルの配置場所の確認

Next.js Basic認証を実現するMiddlewareは、プロジェクト内での配置場所が厳密に決まっています。ファイルが正しい位置にないと、Vercelのサーバー側で実行対象として認識されず、Vercel アクセス制限が有効になりません。

配置ルールは以下の通りです。

• srcディレクトリがある場合：src/middleware.tsとして配置
• srcディレクトリがない場合：package.jsonと同じ階層に配置
• 特定のディレクトリ内への配置：pages/やapp/の中では動作しない

認証の除外パスの追加

全てのページに適用したい場合でも、静的ファイルやシステムに関連するパスを除外しないと、サイトの表示が崩れる原因になります。デフォルトの設定では画像やCSSファイルにも認証を要求するため、ブラウザによってはサイトが正常に読み込まれません。

これを防ぐためには、適切な除外設定を行いMatcherを調整する必要があります。以下のパスは認証から除外するのが一般的です。

• _next/static（静的生成ファイル）
• _next/image（画像最適化用パス）
• favicon.ico（サイトアイコン）
• publicディレクトリ内の画像やロゴ

静的エクスポート時の動作制約の考慮

Next.jsでoutput: 'export'を使用している場合やVercel Edge Functionsの制約があるEdge Runtimeで動作させる際は、Node.js固有の機能が使えない制約に注意が必要です。特にBase64の変換に使用されるBufferクラスは、VercelのEdge環境では標準で利用できません。

古い記事にあるBuffer.from()を使ったコードは、Vercel上でパスワード認証が失敗する原因となります。標準のWeb APIであるatob()を使用するようにコードを書き換えてください。

• 修正前：Buffer.from()を使用する古い記述
• 修正後：atob()を使用したEdge Runtime対応の記述

ランタイムに適したメソッドを選択することで、Vercel ログイン機能が安定して動作します。最新の仕様に基づき、Web標準APIへの準拠を再確認しましょう。

あわせて読みたい

VercelのBlobとは？料金や実装手順を徹底解説【初心者向け】

ファイル管理に悩む方へ、VercelのBlobの料金や公式sdkの活用、private設定を解説し、保守を省き最速でプロダクト構築が完了する手法を紹介します。

VercelでBasic認証以外のアクセス制限を行う方法

Vercelでは、一般的なBasic認証以外にも用途に応じた複数のアクセス制限手法があります。開発環境の保護や関係者限定の公開など、目的に適した手法を選びましょう。

Vercel公式機能やNext.jsの機能を活用した高度な制限方法を詳しく解説します。

Vercel Authenticationの導入

Vercel Authenticationは、公式が提供する強力なデプロイメント保護機能です。チームメンバーや特定権限を持つユーザーのみ、サイトへアクセスできる環境を構築できます。

個別のVercelアカウントで制御するため、IDやパスワードを共有する手間がありません。Vercelログイン機能を活用したセキュアな管理が可能です。

• 公式推奨の保護方法：プラットフォームと密接に統合されており信頼性が高い
• 柔軟なアクセス権限：パブリックと非パブリックのデプロイを正確に区別できる
• チーム開発に最適：メンバーの入れ替わりにも柔軟に対応可能

この高度なセキュリティ機能は、主にProプラン以上の有料提供となる点に注意してください。

あわせて読みたい

VercelとGitHub連携・自動デプロイとエラー対処【プロ解説】

VercelとGitHubを連携して自動デプロイする手順やエラー対策を解説しており、サーバー構築の手間を省き、実装に集中できる開発環境を実現できます。

許可したIPアドレスのみの接続制限

特定のオフィスからのみ接続を許可したい場合は、IPアドレス制限が有効です。Next.jsのMiddlewareを活用すれば、関数ベースでこの制限を実装できます。

パスワード入力を省略しつつ、物理的な接続元を制限できるため利便性と安全性を両立可能です。許可リスト外のリクエストを遮断し、不正アクセスリスクを大幅に低減します。

1. ヘッダーからIP取得：x-forwarded-forを参照しリクエスト元を特定する
2. 環境変数での管理：許可IPをDashboardのEnvironment Variablesに設定する
3. ミドルウェアでの照合：取得したIPが許可リストに含まれるか判定する

Basic認証とIPアドレス制限はそれぞれ異なる特性を持ちます。下表を参考に、運用環境に合った手法を選択してください。

あわせて読みたい

VercelのCron設定手順・無料枠の条件と安全な実装【完全版】

アプリの定期処理構築に悩む方へ、VercelのCronの実装手順や無料枠の料金、不正アクセス対策を解説し、管理工数とコストを削減し安全に運用できます。

クローラーのインデックス登録のブロック

テストサイトが検索エンジンに登録されるのを防ぐには、クローラー制御が欠かせません。Vercelアクセス制限を導入すると、クローラーの巡回も同時に遮断できます。

重複コンテンツによる本番サイトのSEO評価低下を防ぐために、この対策は必須です。意図しない情報漏洩やユーザーの誤流入を防止する役割も果たします。

• アクセス制限の適用：Basic認証等を設定してクローラーを物理的に拒否する
• HTTPレスポンスヘッダーの設定：MiddlewareでX-Robots-Tagを出力する
• robots.txtの配置：Disallow設定によりクローラーへ巡回拒否を伝える

これらの対策により、検索結果に開発サイトが表示されるリスクを最小限に抑えられます。

あわせて読みたい

Vercelのドメイン設定・DNS追加手順5ステップ【初心者向け】

Vercelのドメイン設定に関わる独自ドメイン料金やDNS設定、SSL証明書を解説し、エラー対処法も押さえて本格的なWeb運用を始める手順を紹介します。

あわせて読みたい

VercelのCDN仕様・キャッシュ制御とCloudflare比較【手順】

VercelのCDNのキャッシュでお困りの方へ、Vercel EdgeやVercel Firewall、プロキシ比較を解説し、最適化でサイトを高速化し、運用工数を削減します。

まとめ：VercelでBasic認証をNext.jsのミドルウェアを使って実装する方法

Vercelで公開したWebサイトにアクセス制限をかけたい場合、Next.jsのVercel Middlewareを活用したVercel Basic認証の実装が便利です。有料プランの機能を使わずとも、Middleware経由でパスワード認証を導入すれば、無料プランのまま安全なテスト環境を構築できます。

Next.js Basic認証の設定は、セキュリティ向上だけでなく検索エンジンへのインデックス拒否にも役立ちます。環境変数に必要なIDとパスワードを保存し、適切なコードを配置するだけでVercelアクセス制限は完了です。

万が一Vercel Basic認証が効かない場合は、ファイルの保存場所やEdge Runtimeの制約を疑ってください。特定のパスを認証から除外する設定が正しく反映されているかも、改めて見直すポイントです。

Vercel Authenticationを適切に活用して、第三者からの閲覧を防ぎつつ円滑に開発を進めていきましょう。高度な認証基盤の構築や技術的なお悩みがあれば、ぜひプロのアドバイザーへご相談ください。

VercelのBasic認証に関するよくある質問