---
title: "JSSアプリでVercelデプロイメント保護機能を活用してください"
slug: "use-the-vercel-deployment-protection-feature-with-jss-apps"
abstract: "Next.js JSSアプリのVercelクラウドプラットフォームでデプロイメントプロテクションの使い方を学びましょう。"
---
# JSSアプリでVercelデプロイメント保護機能を活用してください

[デプロイメント保護は](https://vercel.com/docs/concepts/deployments/deployment-protection)Vercelクラウドプラットフォームの機能で、開発者や編集者が自社のサイト展開へのアクセスを制限できます。

このトピックでは、JSSのバージョンに応じてデプロイメント保護の使い方について説明します:

-   [21.2から21.5までのJSSバージョンでデプロイメント保護を使用してください](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-the-vercel-deployment-protection-feature-with-jss-apps.html#UUID-307803d3-da5e-28bb-4c3c-e44a808128f9_section-idm1853431929867984 "Use Deployment Protection with JSS versions from 21.2 to 21.5")
-   [JSSバージョン21.6または21.7でデプロイメント保護を使用してください](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-the-vercel-deployment-protection-feature-with-jss-apps.html#UUID-307803d3-da5e-28bb-4c3c-e44a808128f9_section-idm4582143676908834319294171914 "Use Deployment Protection with JSS versions 21.6 or 21.7")

## 21.2から21.5までのJSSバージョンでデプロイメント保護を使用してください

JSSのバージョン21.2から21.5でデプロイメント保護を使用するには:

1.  例えば、src/tempフォルダに新しいファイルを作成します。例えばget-public-url.jsは以下の内容です。
    
    const { getPublicUrl: defaultGetPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs');
    
    const getPublicUrl = () => {
      return process.env.NODE\_ENV !== 'production' ? defaultGetPublicUrl() : '';
    
    }
    
    module.exports = getPublicUrl;
    
    > !注JSS SDK 21.2以降を使用する場合は、@sitecore-jss/sitecore-jss-nextjs(非推奨)ではなく@sitecore-jss/sitecore-jss-nextjs/utilsからインポートまたはgetPublicUrl関数を要求してください。
    
2.  アプリ内の静的アセットリンクを使用しているすべてのコンポーネントやファイルについて、getPublicUrlのインポートを ./temp/get-public-url.jsからのインポートに置き換えてください。例えば [、foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head)を使う場合は、既存のインポート/要求文を次のように置き換えます。
    
    -   next.config.jsファイルでは:const getPublicUrl = require('./src/temp/get-public-url');
    -   src/Layout.tsxファイルでは:import getPublicUrl from 'temp/get-public-url';
    -   src/Navigation.tsxファイルでは:import getPublicUrl from 'temp/get-public-url';
    
    > !注sitemap.tsファイルのインポート文を変更する必要はありません。
    
3.  他のファイルやコンポーネントで静的アセットURLを使う場合は、インポート/要求の文getPublicUrlを ./temp/get-public-url.jsからのインポートに置き換えてください。
    

ローカルgetPublicUrl実装は必要に応じて変更可能です。この関数の主な目的は、Vercelデプロイメントで絶対リンクを相対的なURLに変換することです。

> !重要Vercel Deployment Protectionは編集モードでは動作しません。Experience EditorやPagesをサイト設定で動作させる必要がある場合は、デフォルトのXM Cloud編集ホスト、自社の編集ホスト、またはデプロイメント保護されていないVercelデプロイメントのいずれかをご利用ください。
> 
> 通常モードでプロ [テクションバイパストークン](https://vercel.com/docs/concepts/deployments/deployment-protection#using-protection-bypass-for-automation) を使ってサイトにアクセスする場合、すべての静的資産を正しくレンダリングするためにx-vercel-protection-bypassとx-vercel-set-bypass-cookieヘッダー(またはクエリ文字列パラメータ)の両方を使う必要があります。

## JSSバージョン21.6または21.7でデプロイメント保護を使用してください

JSSバージョン21.6または21.7でデプロイメント保護を使用するには:

1.  アプリのscripts\\config\\plugins\\fallback.tsファイルで、publicUrlの設定方法を変更してください。例えば:
    
    const publicUrlFallback = (process.env.NODE\_ENV !== 'production' ? getPublicUrl() : '');
    return Object.assign({}, config, {
     publicUrl: config.publicUrl || publicUrlFallback,
    });
    
    > !重要もしDeployment Protection対応のVercel URLのいずれかを編集のレンダリングホストエンドポイントとして使用している場合、Sitecoreの編集ツールが保護バイパス付きのVercelデプロイメントを使えるようにするために、この手順の残りのステップを完了する必要があります。それ以外は、これ以上の変更は必要ありません。
    
2.  Vercelで[Protection Bypassトークン](https://vercel.com/docs/concepts/deployments/deployment-protection#using-protection-bypass-for-automation) を設定してください。
    
3.  SXAを使うかローカルファイル編集を使ってサイト設定をするかによって、レンダリングホストの設定にバイパストークンを追加してください:
    
    SXAサイト設定
    
    1.  SXAでは、/sitecore/system/Settings/Services/Rendering Hosts/にあるレンダリングホストの定義を開きます。例えば、定義がvercelの場合、/sitecore/system/Settings/Services/Rendering Hosts/vercelを開きます。
        
    2.  以下のフィールドのURLにクエリ文字列パラメータx-vercel-protection-bypass=<bypass\_token> を追加し、Vercelのバイパストークン値を含めるようにしてください。
        
        -   Server side rendering engine endpoint URL
        -   Server side rendering engine application URL
        -   Server side rendering engine configuration URL
        
        以下の例はServer side rendering engine application URLの更新URLを示しています:
        
        https://<vercel\_deployment\_url>/?x-vercel-protection-bypass=<bypass\_token>
        
    
    設定ファイルサイト設定
    
    アプリの設定ファイルを開き、アプリケーションの <app> ノードでクエリ文字列パラメータx-vercel-protection-bypass=<bypass\_token> を以下の属性の値に追加し、Vercelのバイパストークン値も必ず含めてください。
    
    -   serverSideRenderingEngineEndpointUrl
    -   serverSideRenderingEngineApplicationUrl
    
    以下の例はserverSideRenderingEngineApplicationUrlの更新URLを示しています:
    
    https://<vercel\_deployment\_url>/?x-vercel-protection-bypass=<bypass\_token>
    
4.  [自動生成](https://vercel.com/docs/deployments/generated-urls)URL以外の展開URLでVercel Deployment Protectionが有効で、そのURLをレンダリングホストエンドポイントとして使用している場合、Vercelで以下の手順を行ってください。
    
    1.  環境変数 PUBLIC\_URL 追加します。
    2.  新しい変数の値は、レンダリングホストの設定で使われているプロトコルとホスト名(例: https://<vercel\_deployment\_url>)に設定してください。

> !重要通常モードでプロテクションバイパストークンを使ってサイトにアクセスする場合、すべての静的資産を正しくレンダリングするために、x-vercel-protection-bypassとx-vercel-set-bypass-cookieヘッダーの両方を使うか[](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation#using-protection-bypass-for-automation)、クエリ文字列パラメータを使う必要があります。