Qmonus Value Stream Docs

Appearance

2. アーキテクチャの選択 ​

フロントエンドアプリケーションのデプロイでは API Backendのデプロイと同様に、フロントエンドアプリケーションをデプロイするための QVS Config を用意し、自身のリポジトリに格納する必要があります。

以下の手順に従って、リポジトリにフロントエンドアプリケーション用の QVS Config を格納してください。

2-1. QVS Config の作成 ​

  1. 左メニューから Infra/Pipeline を選択し、表示された画面右上の CREATE INFRA/PIPELINE FROM CATALOG ボタンを押下します。

  1. Select Architecture で Single Page Application (SPA) をホスティングしたい を選択します。
  1. Provisioning Target で Microsoft Azure を選択します。
  2. CDNと統合されたフルマネージドな環境にSingle Page Application (SPA) を構築する を選択します。
  1. Select Option で何も選択せずに、NEXT ボタンを押下します。
  1. Download QVS Config で DOWNLOAD QVS CONFIG ボタンを押下します。
  1. DOWNLOAD QVS CONFIG ボタンを押下すると自動生成された QVS Config の zip ファイルがダウンロードされます。

2-2. リポジトリへの登録 ​

上記の手順でダウンロードした QVS Config を、API Backendのデプロイで Clone したリポジトリに格納します。

  1. ダウンロードした zip ファイルを解凍します。
bash
unzip <ダウンロードしたzipファイルのパス>
  1. API Backendのデプロイで Clone したリポジトリ直下にある .valuestream ディレクトリに解凍したファイルを移動します。
bash
mv azure-frontend.yaml /path/to/your/repository/.valuestream/
  1. リポジトリに移動します。
bash
cd /path/to/your/repository
  1. 変更をステージに追加します。
bash
git add .valuestream/azure-frontend.yaml
  1. リポジトリに変更をコミットします。
bash
git commit -m "Add QVS Config"
  1. リポジトリに変更をプッシュします。
bash
git push

2-3. Frontendアプリケーションの設定 ​

次に、フロントエンドアプリケーションのデプロイ設定をします。

  1. リポジトリの todo/frontend/.env.production の VUE_API_ENDPOINT を API Backendのデプロイでデプロイした API の URL に書き換えて保存します。

今回は例として https://api.2nd-tutorial.azure.vsdev.axis.io を指定しています。

NODE_ENV=production
VUE_APP_API_ENDPOINT=https://api.2nd-tutorial.azure.vsdev.axis.io
  1. 変更をステージに追加します。
bash
git add todo-app/frontend/.env.production
  1. リポジトリに変更をコミットします。
bash
git commit -m "Update api url"
  1. リポジトリに変更をプッシュします。
bash
git push
  1. Git コミットのハッシュ値を取得します。
bash
git rev-parse HEAD

TIP

取得したハッシュ値は、後続の手順で使用します。値をテキストエディタなどにコピーしておいてください。

ハッシュ値を取得できたら、画面下部に表示されている NEXT ボタンを押下して、Application 作成画面へ遷移します。

QVS Config 生成の手順は以上となります。次章で引き続き Application および Deployment を登録します。