概要

チュートリアルの概要

API BackendとFrontendの連携

本チュートリアルを実施することで、API Backend と連携した一連のアプリケーションのデプロイを体験できます。

チュートリアルの流れ

本章では、Qmonus Value Stream を使って、Frontend アプリケーションをデプロイするまでの流れを説明します。 本チュートリアルでデプロイする Frontend アプリケーションの構成は、以下の図に示すように Firebase Hosting に Frontend アプリケーションがデプロイされた環境となります。 さらにこの Frontend アプリケーションを、先にデプロイした API Backend と連携させることで、サンプルアプリケーションの TODO アプリケーションを動かすことができるようになります。

また本チュートリアルでは、以下のステップで CI/CD パイプラインを構築します。

• Step 1 では、GCPのサービスアカウントを取得します。

• Step 2 では、デプロイするインフラストラクチャ構成を選択します。
• Step 3 では、チュートリアルを進める上で必要なアプリケーションや環境情報を設定します。
• Step 4 では、設定した構成に基づいて CI/CD パイプラインを作成します。
• Step 5 では、AssemblyLine を実行してアプリケーションをデプロイします。

チュートリアルリポジトリの紹介

チュートリアルで利用するリポジトリを紹介します。

リポジトリ: https://github.com/qmonus/valuestream-examples

フォルダ構成の説明

本チュートリアルを実施するとデプロイされるアプリケーションはチュートリアルリポジトリのtodo-appのフォルダに格納されています。 フォルダには、API を提供するバックエンドアプリケーションと、バックエンドアプリケーションと連携する TODO アプリケーションであるフロントエンドアプリケーションがそれぞれ格納されています。

.
├── .valuestream
│   ├── aws  # 本チュートリアルでは利用しません
│   └── kubernetes  # 本チュートリアルでは利用しません
└── todo-app
    ├── backend  # バックエンドアプリケーション
    ├── docker-compose.yaml  # ローカルでのテスト実行用docker-compose.yaml
    ├── frontend  # フロントエンドアプリケーション
    └── shared-infra  # 本チュートリアルでは利用しません

フロントエンドアプリケーションのフォルダにはフロントエンドアプリケーションの実行に必要なソースコード一式と各種パッケージ類が格納されています。

• /src : フロントエンドアプリケーション本体
• /public : staticファイルとして公開されるフォルダ

.
└── todo-app
    ├── frontend
    │   ├── .env.development
    │   ├── .env.production
    │   ├── .valuestream  # 本チュートリアルでは利用しません
    │   ├── Dockerfile  # 本チュートリアルでは利用しません
    │   ├── Makefile
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── jsconfig.json
    │   ├── package.json
    │   ├── public  # staticファイルとして公開されるフォルダ
    │   │   └── ...
    │   ├── src  # フロントエンドアプリケーションのプログラムファイル
    │   │   └── ...
    │   ├── vue.config.js
    │   └── yarn.lock