ユニバーサルエディター用 SecurBank サンプルアプリ securbank
SecurBank アプリを使用して実践的なエクスペリエンスを持つユニバーサルエディターについて説明します。このアプリは、ユニバーサルエディターの機能、柔軟性、使いやすさを紹介して、コンテンツの作成を高速化するように設計されています。
前提条件 prerequisites
SecurBank のインストール installation
SecurBank アプリのインストールは簡単ですが、AEM as a Cloud Serviceの多くの領域に影響を与えるため、いくつかの手順が必要になります。 主な手順の概要を次に示します。
次のセクションでは、必要な個々のタスクについて詳しく説明します。
Cloud Managerでサンドボックスプログラムを作成します。 create-sandbox-program
SecurBank をインストールできる新しいCloud Managerプログラムが必要になります。
-
my.cloudmanager.adobe.com で Cloud Manager にログインし、適切な組織を選択します。
-
SecurBank アプリ用の新しいサンドボックスプログラムを作成します。
- ソリューションとアドオン を選択する場合は、デフォルトのオプションを使用します。
- サンドボックスプログラムの作成方法について詳しくは、ドキュメント サンドボックスプログラムの作成を参照してください。
プログラムの Git リポジトリを複製し、SecurBank AEM プロジェクトのコンテンツを使用して更新します。 clone-and-update
-
プログラムを作成したら開き、「リポジトリ」タブで「リポジトリ情報にアクセス」ボタンをタップまたはクリックして リポジトリ情報 ダイアログを開き、サンドボックス環境の Git リポジトリへのアクセスに必要な資格情報を表示します。
- リポジトリ情報へのアクセス方法について詳しくは、 リポジトリへのアクセスのドキュメントを参照してください。
-
リポジトリ情報 ダイアログの資格情報を使用して、ローカルマシンにリポジトリのクローンを作成します。
-
ローカルクローンのフォルダーを探して開き、hidden/dot ファイルを除くすべてのコンテンツを削除します。
-
https://github.com/Adobe-Marketing-Cloud/summit-2024-l425-securbankの GitHub から、最新の SecurBank AEM プロジェクトコードを取得します。コード をクリックし、ドロップダウンで ZIP をダウンロード します。 -
ローカルファイルシステム上の zip ファイルの内容を解凍し、サンドボックスプログラムのローカルクローンの空になったフォルダーに移動します。
-
ターミナルを使用して、複製されたプロジェクトのフォルダーに切り替え、すべてのコンテンツをコミットして Git にプッシュします。
git add --allgit commit -m "Adding SecurBank app code"git push
パイプラインを実行して SecurBank AEM プロジェクトをデプロイします。 run-pipeline
SecurBank のAEM プロジェクトをサンドボックスリポジトリにコミットした状態で、パイプラインを使用してデプロイできます。
-
Cloud Managerのサンドボックスプログラムの「概要」タブに戻り、フルスタックの実稼動以外のパイプラインを実行します。
- パイプライン実行のすべてのオプションをオフにします。
- パイプラインの実行について詳しくは、 パイプラインの管理のドキュメントを参照してください。
ローカル web アプリ開発用のCloud Manager資格情報を取得します。 retrieve-credentials
SecurBank アプリを実行する前に、アプリをCloud Managerに接続するためにCloud Manager資格情報が必要です。
-
パイプラインを実行中に、Cloud Managerの「概要」タブに戻り、環境名の横にある省略記号ボタンをタップまたはクリックして、「Developer Console」を選択します。
-
Developer Consoleで、「統合」タブを選択し、「ローカルトークン」タブを選択して、「ローカル開発トークンの取得」をタップまたはクリックします。
-
アクセストークンを使用して JSON ファイルが生成されます。 Developer Consoleを閉じてCloud Managerに戻る前に、トークン自体（残りの JSON は不要）のみを、今後の手順で使用するために安全な場所にコピーします。
-
Cloud Managerに戻り、「概要」タブで環境の URL を右クリックしてコピーし、今後の手順で使用するために安全な場所に保存します。
SecurBank Web アプリをダウンロードして構成します。 download-web-app
これで、SecurBank の Web アプリケーションをダウンロードして構成できます。
-
https://github.com/Adobe-Marketing-Cloud/summit-2024-l425/tree/ue-z-final-with-eventsの GitHub から最新の SecurBank アプリコードを取得するには、ドロップダウンで「コード」をクリックし、「ZIP をダウンロード」をクリックします。 -
ローカルファイルシステム上の zip ファイルの内容を解凍します。
-
任意のコードエディターを起動し、SecurBank アプリプロジェクト内の非表示の環境ファイル（
summit-2024-l425-ue-z-final-with-events/react-app/.env）を開きます。 -
.envファイルに次の変更を加え、変更内容を保存します。REACT_APP_HOST_URI：以前にコピーした環境の URL の値を貼り付けます。REACT_APP_DEV_TOKEN：以前にコピーしたローカル開発トークンの値をペーストします。
SecurBank Web アプリを実行します。 run-web-app
すべてがCloud Managerとローカルの両方で設定されているので、SecurBank web アプリを実行できます。
-
ローカルマシンのコマンドラインで、ダウンロードして解凍した SecurBank アプリプロジェクトの
react-appフォルダーに移動します。 -
react-appフォルダーに、node -iコマンドを使用して SecurBank アプリをインストールします。 -
インストールが完了したら、
npm startのコマンドを使用して SecurBank アプリを起動します。 -
インストールと開始が成功した場合は、次のように表示されます。
-
次に、ターミナルでの出力を示します。
code language-text Compiled successfully! You can now view securbank in the browser. Local: https://localhost:3000 On Your Network: https://192.168.1.15:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully-
ブラウザーウィンドウが開き、URL
https://localhost:3000が表示されます。- これは開発目的なので、有効な証明書は提供されません。 そのため、ページにアクセスできるようにブラウザーに通知する必要がある場合があります。
-
これで完了です。これで、ブラウザで SecurBank アプリが正常に実行されていることがわかります。
コンテンツがまだ表示されない場合は、実行した 開発にデプロイ パイプラインが正常に完了したことを確認します。
