Sitecore Search の Starter Kit をローカルで起動、その後 Vercel に展開をして実際に動作する環境の構築を進めていきます。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F67txzsUHn7LsuaEranVZlc%2F6b35691ec1497137ed8624364aae3a20%2Flala-azizli-8IJ5xNTv1QM-unsplash.jpg&w=3840&q=75)
ローカルで起動する
前編で起動した環境はすでに準備済みの環境につなげた形でした。中編で作成をした Widgets を作成してどういう形で動くのかを確認したいと思います。今回作成をしたのはアジアの search インスタンスのため、以下のようになります。
VITE_SEARCH_ENV=apse2
VITE_SEARCH_CUSTOMER_KEY=<Customer-Key>
VITE_SEARCH_API_KEY=<API-KEY>
VITE_SEARCH_PATH=/
検索のサーバーが変わっている方です。上記のデータは、Developer Resouces のページで確認することが可能です。なお、VITE_SEARCH_ENV に関しては readme.md にも記載されていますが、この Developer Resources にアクセスをして、Server API Host の名前が apse2 になっているのがわかるかと思います。
実際に動作させた画面は以下のようになります。
![searchstarterkitdeploy02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7KksedaoNCJd5g6VwHYm1X%2F36ea3f92bcb62387acf5994691bf4a3f%2Fsearchstarterkitdeploy02.png&w=3840&q=75)
作成した HTML Block が適用されて表示できているのがわかります。続いて、検索言語を日本語に切り替えて、プレビューを表示させます。
![searchstarterkitdeploy03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7kt97XhkFo0NYQeOqL6wYx%2Fa160855aba605dd0d082d500b3570f0b%2Fsearchstarterkitdeploy03.png&w=3840&q=75)
検索結果が表示されました。ローカルの環境と Starter Kit を連携させることができました。
Vercel に展開する
今回展開している環境を Vercel の環境に展開します。まず、GitHub と連携している Vercel のアカウントでログインをします。まず最初にプロジェクトを作成します。
![searchstarterkitdeploy04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F21fKtlv9ekjYNCqZWnVjp8%2F559077b98a7b07f9ecdea196c55dfb19%2Fsearchstarterkitdeploy04.png&w=1920&q=75)
プロジェクトを作成した後は、Environment Variables を設定していきます。ここには .env で設定した同じ項目、同じ値を設定してください。
![searchstarterkitdeploy05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7rDoEm1GixnBNjsSozJN36%2F4b17d093ba92ba0a3399acbd9ec49e7f%2Fsearchstarterkitdeploy05.png&w=1920&q=75)
Deploy ボタンをクリックすると、以下のように展開が完了しました。
![searchstarterkitdeploy06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3zUC56xMEoQyHJQOSqM5Ng%2F069fbd64040c13ea48164de58564ea00%2Fsearchstarterkitdeploy06.png&w=3840&q=75)
サイトにアクセスをして、日本語にメニューを切り替えて、検索をすると結果が出てきました。
![searchstarterkitdeploy07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F269JnHWiGYU3rE2tliH3H%2F58e0cc525ff42806a3b3094cd4d1d9dc%2Fsearchstarterkitdeploy07.png&w=3840&q=75)
まとめ
Sitecore Search Starter Kit を利用して、Web サイトにサンプルを展開することができました。まだ日本語のデータのみが掲載されている状況でサンプルのままですが、ここからいろいろと触ってチューニングをしていく形となります。