Tailwind Logo

XM Cloud で Tailwind CSS のサンプルサイトを作成 - その3 .env ファイルを保護する

XM CloudHeadless SXA

公開日: 2024-06-25

これまでブログで Tips を紹介している際に、.env ファイルの取り扱いをどうするのが一番いいのか悩んでいましたが、XM Cloud Tutorials #4 で紹介されていたので反映させます。

コンテンツ更新

以下のページで最新の情報を確認してください


なお、以下の YouTube の動画で紹介されています。

.env ファイル

このファイルは XM Cloud をローカルで動かす際には必ず必要となるファイルです。しかしながら、ここにはローカルで利用する際のキーなどが含まれる形となるため、そのまま GitHub などで公開をするのは危険です。

そこで上記の動画では以下のようなアプローチをとっています。

  1. .env ファイルを利用して .env.template を作成
  2. .env.template から環境固有のキーを削除
  3. .env を GitHub のリポジトリから削除
  4. .gitignore にて .env のファイルを追加
  5. init.ps1 を更新して、.env.template から新規に .env を作成、環境の初期化を行う

それでは実際に上記の手順を確認していきます

.env.template の作成

まず最初に、.env ファイルをコピーして .env.template を作成します。続いて、.env.template のファイルの中で定義されている以下の項目を削除していきます。対象となる項目は、YouTube の動画とは少し異なりますが init.ps1 を実行した際に変更される項目を確認して以下の項目とします。

  • SITECORE_ADMIN_PASSWORD
  • SQL_SA_PASSWORD
  • REPORTING_API_KEY
  • TELERIK_ENCRYPTION_KEY
  • MEDIA_REQUEST_PROTECTION_SHARED_SECRET
  • JSS_DEPLOYMENT_SECRET_xmcloudpreview
  • SITECORE_API_KEY_xmcloudpreview
  • JSS_EDITING_SECRET

これで .env.template の下準備が出来ました。

.env ファイルを削除する

続いて .env ファイルを GitHub のリポジトリから削除をします。まずローカルにある環境から .env ファイルを削除します。Visual Studio Code で参照すると今の段階では以下のような画面になっています。

create-tailwindcss-sample-14.png

.env のファイル削除に関して、Commit + Push を実行して GitHub のリポジトリから .env ファイルを削除します。

create-tailwindcss-sample-15.png

GitHub にアクセスをするとファイルが削除されているのがわかります。

create-tailwindcss-sample-16.png

.gitignore の更新

今後、.env ファイルを作成しても GitHub のリポジトリに反映されないようにするため、.gitignore ファイルに以下の行を追加します

Plain Text
# Environment file .env
.env

これで .env ファイルを作成しても、ファイル自体がグレーになるため GitHub に反映されないことを確認することが出来ます。

create-tailwindcss-sample-17.png

init.ps1 を更新する

あとは .env.template を .env としてコピーをする処理を init.ps1 に追加するだけとなります。ファイルは様々な処理の前に作成されている必要があるため、YouTube の動画と同じように Add Windows hosts file entries の後ろに以下のコードを追加します。

PowerShell
################################
# Create .env file
################################

Write-Host "Create .env file." -ForegroundColor Green
Copy-Item ".\.env.template" ".\.env" -Force

これで準備が整いました。

動作確認

それでは今回の変更が正しく動作するか、確認をします。まず最初に .env ファイルを削除してからの状態にします。続いて、init.ps1 を実行します。

実行後、.env ファイルが作成されたあと、up.ps1 で正しく起動するか確認をしてください。しばらくして、ローカルで XM Cloud が起動すれば今回の .env ファイルの削除に関しての手順は完了となります。

create-tailwindcss-sample-18.png

まとめ

.env ファイルには重要な情報が記載されることが多いため、今回のように初期化のスクリプトがある場合は、そこでテンプレートから作成するような処理をするのがおすすめです。これで、Public リポジトリでソースコードの共有がしやすくなりますね。

関連タグ