Vue.jsアプリケーションをKubernetes Clasterで開発する

TIPS,Vue.jsDocker,Kubernetes

この投稿ではVue.jsアプリケーションをKubernetesへデプロイしホットリロードで開発する方法を紹介します。

DevSpaceについて

今回の投稿ではDevSpaceというOSSなKubernetes開発ツールを使用していきます。

DevSpace とは

Kubernetesはコンテナオーケストレーションというコンテナのデプロイやスケーリング、管理を自動化するプラットフォームですがDevSpaceを使用する事でクラウドネイティブなアプリケーションを迅速に開発・デプロイでき、KubernetesをDevOps的に活用しやすくなります。

具体的にはKubernetesの標準コマンドである kubectl を拡張しワンコマンドでKubernetes用のマニファスト作成にDockerfileの生成、イメージビルドの自動化やキャッシュにデプロイの自動化、ホットリロードでの開発等を実現してくれる強力なCLIアプリケーションです。

DevSpace Cloud とは

Kubernetesの仮想クラスターを使い、分離された開発用NameSpaceを作成する事ができます。
AWSやGCP、Azureといった主要Cloudに対応しておりクラスターを接続する事で軽量なコントロールプレーンをクラスターにインストールしてくれます。

また、接続以外にもフルマネージドでKubernetesクラスターをホストしてくれる無料のスペースが1つ用意されており気軽に検証する事も可能です。

こちらもOSSで公開されているためDevSpace Cloudをセルフホスティングした場合は全ての機能を無制限で使用する事ができます。

Vueアプリケーションのデプロイ

下準備

まずはDevSpaceをインストールします。
次のコマンドを実行してください。

$ npm install -g devspace

Vue.jsアプリの用意

今回の開発で使用するVueアプリケーションを作成しましょう。

$ npm install -g @vue/cli

$ vue create kube-vue-app

Vue CLIから聞かれる質問には適当に回答しアプリケーションを作成します。
今回はアプリ作成時に自動生成されるプロジェクトをそのままKubernetes上にデプロイするため、作成されたファイルは何も変更しないで大丈夫です。

※ もし既存のVueアプリケーションがある場合はそのプロジェクトディレクトリに移動するだけでもOKです。

VueアプリケーションをDockerコンテナ化する

KubernetesでVueアプリケーションを実行するにはDockerfieと、Kubernetes用のマニフェストが必要になります。
本来であれば一つ一つ手動で作成することになりますがDevSpaceを使用することで自動的に作成させる事ができます。

devspace init

上記のコマンドをターミナルで実行すると4つの質問が表示されます。

Dockerfileの選択

devspace init を実行したディレクトリにDockerfileが存在しない場合、自動で生成するか他のディレクトリに置いてあるDockerfileを使用するのか選択できます。

もし既にDockerfileが存在する場合は Use the Dockerfile in ./Dockerfileが表示されます

既存のイメージが存在する場合はDocker Hubなどに保管したイメージを引っ張ってくる事も可能になっています。

開発言語の選択

Currentディレクトリのソースコードを解析し、プログラミング言語を検出してくれます。
自動選択された言語と他のものを選択したい場合は十字キーでカーソルを移動させEnterキーで決定してください。

Dockerレジストリの選択

DevSpaceがDockerfileからイメージをビルドした時、Docker HubなどのDockerレジストリにプッシュする必要があります。
セルフホスティングしたDocker Hubを選択することも可能です。

Docker Hubを使用していない場合や、プライベートリポジトリが埋まっている際はdscr.ioというDevSpaceが提供しているDockerレジストリ一つだけイメージを保存する事ができます。

使用するポートの選択

Vueアプリケーションが実行されるポートを指定します。

Vue.jsはデフォルトで8080を開発サーバに使用するため、変更していない場合は 8080 を入力しEnterを押下してください。

これでプロジェクトディレクトリに3つのファイルが追加されているはずです。

  • Docekrfile
  • .dockerignore
  • devspace.yml

この devspace.yml はDocker化したVueアプリケーションをKubernetesにデプロイする際に使用されます。

Dockerfileの編集

Dockerfileを自動生成で用意した場合、デフォルトでは以下のようになっています。

FROM node:8.11.4

RUN mkdir /app
WORKDIR /app

COPY package.json .
RUN npm install

COPY . .

CMD ["npm", "start"]

最後のCMDスコープを以下のように修正します。

CMD ["npm", "run", "serve"]

package.jsonをプロジェクト毎に用意するとパッケージのインストール時にDockerがキャッシュできるようになり、2度目以降のイメージビルド時に処理時間を大幅短縮できます。

Helm Chart のカスタマイズ

Kubernetesでコンテナを起動する際はマニフェストが必要となります。
デフォルトのマニフェストをそのまま利用する事もできますが、KubernetesのパッケージマネージャであるHelm Chartにバンドルさせる事ができます。

DevSpaceはcomponent-chartを使用しデプロイする事ができます。
デフォルトのままでも問題ありませんが、アプリのデプロイをカスタマイズしたい場合は devspace.yml
の以下のセクションを編集します。

（前略）
deployments:
- name: kube-vue-app
  helm:
    chart:
      name: component-chart
      version: v0.0.6
      repo: https://charts.devspace.cloud
    values:
      containers:
      - image: dscr.io/${DEVSPACE_USERNAME}/devspace
      service:
        ports:
        - port: 8080
（後略）

カスタマイズの詳細が確認した場合は以下を参照してください。


Vueアプリケーションをデプロイする

先ほどまでの対応でVueアプリケションがDockerコンテナ化されたため、Kubernetesへデプロイしていきます。
とはいえ、デプロイに使用するクラスターをDevSpaceへ通知するだけで準備が完了します。

DevSpace Cloudを使用する

もし現時点でAWS上などにKubernetesクラスターが用意されていない場合、DevSpaceがマネージするNameSpaceを使用して作成する事が可能です。

次のコマンドを実行することでDevSpace Cloud上にNameSpaceが作成されます。

$ devspace create space kube-vue-app

既存のクラスターを使用する

既にKubernetesクラスターが存在している場合は、任意のクラスターを使用する事ができます。
次のコマンドを実行し既存のクラスター内にNameSpaceを作成します。

$ devspace use namespace kube-vue-app

※ DevSpaceは指定されたNameSpaceが存在しなかった際、自動でNameSpaceを作成してくれます。

Vueアプリケーションのビルドとデプロイ

本来であればDockerコンテナ化の際と同様、Dockerイメージを作成し、kubectl を使用してレジストリにプッシュする必要があります。

しかし、DevSpaceではたったの1コマンドでデプロイが完了します。

devsspace deploy

DevSpace Cloudを使用した場合、このコマンドが実行されると次のように作成されたNameSpaceが参照できる状態になります。

デプロイが完了した場合、以下のコマンドを実行します。

devspace open

どのように開発サーバを起動するか質問が入るので今回は localhostでの実行を指定しEnterを押下します。

選択後しばらく待つとブラウザが立ち上がります。
またDevSpace Cloudを使用している場合、ドメイン経由でのアクセスも可能になっています。

ホットリロード開発の開始

次の1コマンドを実行するだけで準備は完了します。

$ devspace dev

DevSpaceはVueアプリケーションを開発モードでデプロイします。
しばらく待機すると処理が完了しブラウザが自動で開きます。

最後に

とても簡単にKubernetesでの開発環境が完成してしまいました。
Kubernetesは機能が多く覚えるべきコマンドも多いですがDevSpaceを使用すればたったの数種類のコマンドで開発が開始できます。
勿論、マルチステージビルドを活用したDockerfileにも対応しています。
フロント側の時の流れは元々早かった記憶がありますが近年はインフラ周りも技術の移り変わりが早いのでこの手の開発者向けツールがより注目されるようになってきた気がします。

今回作成したサンプルは以下のGitHubにアップロードしてあります。

TIPS,Vue.jsDocker,Kubernetes

Posted by Kenny