Skip to content

チュートリアルで利用するアプリケーションの説明

こちらではチュートリアルでデプロイするアプリケーションの説明をします。 チュートリアルで利用するアプリケーションは以下のリポジトリに格納されており、以後チュートリアルではこちらのリポジトリを利用します。

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

フォルダ構成の説明

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

jsx
.
├── .valuestream
│   ├── assemblyline-staging.yaml  # 本チュートリアルでは利用しません
│   └── qvs.yaml  # 本チュートリアルでは利用しません
└── todo-app
    ├── backend  # バックエンドアプリケーション
    ├── frontend  # フロントエンドアプリケーション
    └── shared-infra  # 本チュートリアルでは利用しません

バックエンドアプリケーションのフォルダにはバックエンドアプリケーションの実行に必要なソースコード一式と各種パッケージ類、Dockerでバックエンドアプリケーションを動かすためファイル一式が格納されています。

バックエンドアプリケーションフォルダの説明は以下の通りです。

  • Dockerfile: バックエンドアプリケーションのDockerイメージの内容を定義したファイル
  • docker-compose.yml: ローカルで実行するコンテナ設定が書かれています。
  • main.go: バックエンドアプリケーションのメインプログラムファイル
  • /pkg: バックエンドアプリケーションのプログラムファイル
  • scripts: テスト用のスクリプトファイル
jsx
.
└── todo-app
    ├── backend
    │   ├── .valuestream  # 本チュートリアルでは利用しません
    │   ├── Dockerfile  # バックエンドアプリケーションのDockerイメージの内容を定義したファイル
    │   ├── Makefile
    │   ├── docker-compose.yml  # ローカルで実行するためのDocker Composeファイル
    │   ├── go.mod
    │   ├── go.sum
    │   ├── main.go  # バックエンドアプリケーションのメインプログラムファイル
    │   ├── pkg  #  バックエンドアプリケーションのプログラムファイル
    │   │   └── ...
    │   └── scripts  # テスト用のスクリプトファイル
    │       └── ...

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

  • /src : フロントエンドアプリケーション本体
  • /public : staticファイルとして公開されるフォルダ
jsx
.
└── 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

Qmonus Value Streamによるバックエンドアプリケーションのデプロイ時の動作

Qmonus Value Streamがこのリポジトリのバックエンドアプリケーションをデプロイする時、以下の順で処理が実行され、Google Kubernetes Engine(GKE)へバックエンドアプリケーションがデプロイされます。
  1. Qmonus Value Streamは指定したバックエンドアプリケーションのフォルダの中にあるDockerfileを探し出し、Dockerfileを元にDockerイメージを作成します。
  2. Dockerイメージを作成したら、作成したイメージをGoogle Artifact Registryにアップロードします。
  3. アップロードしたイメージをGKEに展開し、バックエンドアプリケーションのコンテナを立ち上げます。

ユーザがオリジナルのバックエンドアプリケーションをQmonus Value Streamを利用してGKEにデプロイしたい時も、チュートリアルと同じようにDockerfileを用意しDockerイメージを作成できるファイル構成にすれば簡単にGKEに自分のアプリケーションをデプロイできます。

Qmonus Value Streamによるフロントエンドアプリケーションのデプロイ時の動作

Qmonus Value Streamがこのリポジトリのアプリケーションをデプロイする時、以下の順で処理が実行され、Firebase Hostingへフロントエンドアプリケーションがデプロイされます。
  1. 指定したフロントエンドアプリケーションのフォルダの中でビルドコマンドを実行しアプリケーションをビルドします。
  2. ビルドしたアプリケーションのファイルをFirebase Hostingへアップロードします。

ユーザがオリジナルのアプリケーションをQmonus Value Streamを利用してFirebase Hostingにデプロイしたいときも、チュートリアルと同じようなファイル構成にしてアプリケーションをビルドできれば簡単にFirebase Hostingに自分のフロントエンドアプリケーションをデプロイできます。

ローカルでのテスト実行

このサンプルアプリケーションはDocker Composeを利用して、ローカルでも実行可能です。

ローカルで実行する場合は以下のコマンドでアプリケーションを立ち上げた後にhttp://localhost:8080にアクセスすることでデプロイするアプリケーションの動作を確認できます。

bash
cd todo-app
docker-compose up