Docker Composeを使用したVue.js開発環境の構築

はじめに

この記事では、Docker Composeを使用してVue.jsの開発環境を構築する方法について説明します。Docker Composeは、複数のDockerコンテナを一元的に管理し、それらの間の依存関係を定義するためのツールです。Vue.jsは、ユーザーインターフェースを構築するためのプログレッシブフレームワークであり、その人気と採用率は急速に増加しています。

この記事を読むことで、Docker Composeを使用してVue.jsの開発環境を簡単にセットアップし、管理する方法を学ぶことができます。これにより、開発プロセスがスムーズになり、チーム全体の生産性が向上します。

次のセクションでは、DockerとDocker Composeの準備について説明します。それでは、始めましょう！

DockerとDocker Composeの準備

DockerとDocker Composeを使用するためには、まずそれらをインストールする必要があります。以下に、それぞれのインストール方法を説明します。

Dockerのインストール

Dockerは、アプリケーションをパッケージ化し、それを他のマシンで実行できるようにするためのプラットフォームです。以下のコマンドを使用してDockerをインストールできます。

# Ubuntuの場合
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

# MacOSの場合
brew install --cask docker

Docker Composeのインストール

Docker Composeは、複数のDockerコンテナを一元的に管理するためのツールです。以下のコマンドを使用してDocker Composeをインストールできます。

# Linuxの場合
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

# MacOSの場合
brew install docker-compose

これで、DockerとDocker Composeの準備が整いました。次のセクションでは、docker-compose.ymlの作成について説明します。それでは、進んでいきましょう！

docker-compose.ymlの作成

Docker Composeを使用するためには、docker-compose.ymlという設定ファイルを作成する必要があります。このファイルでは、使用するサービス（この場合はVue.jsアプリケーション）とその設定を定義します。

以下に、Vue.jsアプリケーション用の基本的なdocker-compose.ymlファイルの例を示します。

version: '3'
services:
  vue:
    build: .
    ports:
      - '8080:8080'
    volumes:
      - .:/app
    command: 'npm run serve'

この設定では、build: .で現在のディレクトリをビルドコンテキストとして指定し、Dockerfileを探しに行きます。portsでは、ホストマシンの8080ポートとコンテナの8080ポートをマッピングしています。volumesでは、ホストマシンの現在のディレクトリ（.）とコンテナ内の/appディレクトリをマッピングしています。最後に、commandでコンテナ起動時に実行するコマンドを指定しています。

このdocker-compose.ymlファイルをプロジェクトのルートディレクトリに保存します。次のセクションでは、Vue.jsプロジェクトの作成について説明します。それでは、進んでいきましょう！

Vue.jsプロジェクトの作成

Vue.jsプロジェクトを作成するためには、まずVue CLIをインストールする必要があります。以下のコマンドを使用してVue CLIをインストールできます。

npm install -g @vue/cli

次に、Vue CLIを使用して新しいプロジェクトを作成します。以下のコマンドを使用して新しいプロジェクトを作成できます。

vue create my-project

ここで、my-projectはあなたが作成したいプロジェクトの名前です。このコマンドを実行すると、Vue CLIは新しいプロジェクトを作成し、必要な依存関係をインストールします。

これで、Vue.jsプロジェクトの作成が完了しました。次のセクションでは、Dockerfileの作成について説明します。それでは、進んでいきましょう！

Dockerfileの作成

Dockerfileは、Dockerイメージを作成するための設定ファイルです。このファイルには、ベースとなるイメージ、追加のソフトウェアのインストール、環境変数の設定など、イメージの作成に必要な指示が書かれています。

以下に、Vue.jsアプリケーション用の基本的なDockerfileの例を示します。

# ベースイメージの指定
FROM node:lts-alpine

# 作業ディレクトリの設定
WORKDIR /app

# 依存関係のコピー
COPY package*.json ./

# 依存関係のインストール
RUN npm install

# ソースのコピー
COPY . .

# アプリケーションのビルド
RUN npm run build

# ポートの公開
EXPOSE 8080

# アプリケーションの起動
CMD ["npm", "run", "serve"]

このDockerfileをプロジェクトのルートディレクトリに保存します。次のセクションでは、Dockerの起動とコンテナへの入り方について説明します。それでは、進んでいきましょう！

Docker起動&コンテナに入る

DockerとDocker Composeを使用して、Vue.jsアプリケーションのコンテナを起動し、その中に入る方法について説明します。

Docker Composeでのコンテナの起動

以下のコマンドを使用して、Docker Composeで定義したサービス（この場合はVue.jsアプリケーション）のコンテナを起動できます。

docker-compose up -d

-dオプションは、コンテナをバックグラウンドで実行することを意味します。

コンテナに入る

コンテナが起動したら、以下のコマンドを使用してコンテナの中に入ることができます。

docker-compose exec vue sh

ここで、vueはサービスの名前（docker-compose.ymlで定義）で、shはシェルを開くことを意味します。

これで、Dockerを起動し、Vue.jsアプリケーションのコンテナに入る方法について説明しました。次のセクションでは、Vue.jsプロジェクトの作成または更新について説明します。それでは、進んでいきましょう！

vue.jsプロジェクト作成または更新

Vue.jsプロジェクトを作成または更新するためには、まずコンテナ内で作業を行う必要があります。以下の手順で、Vue.jsプロジェクトを作成または更新できます。

Vue.jsプロジェクトの作成

新しいVue.jsプロジェクトを作成する場合は、以下のコマンドを使用します。

vue create my-project

ここで、my-projectはあなたが作成したいプロジェクトの名前です。このコマンドを実行すると、Vue CLIは新しいプロジェクトを作成し、必要な依存関係をインストールします。

Vue.jsプロジェクトの更新

既存のVue.jsプロジェクトを更新する場合は、以下のコマンドを使用します。

npm update

このコマンドを実行すると、プロジェクトの依存関係が最新のバージョンに更新されます。

これで、Vue.jsプロジェクトの作成または更新について説明しました。次のセクションでは、動作確認について説明します。それでは、進んでいきましょう！

確認

すべての設定が完了したら、Vue.jsアプリケーションが正しく動作していることを確認しましょう。

ブラウザでの確認

まず、ブラウザを開き、以下のURLにアクセスします。

http://localhost:8080

ここで、8080はdocker-compose.ymlで設定したポート番号です。正しく設定されていれば、Vue.jsアプリケーションのウェルカムページが表示されます。

コンソールでの確認

また、コンテナ内で以下のコマンドを実行して、Vue.jsアプリケーションが正しく動作していることを確認できます。

npm run serve

このコマンドを実行すると、開発サーバーが起動し、アプリケーションが正しく動作していることを確認できます。

以上で、Docker Composeを使用したVue.js開発環境の構築が完了しました。これにより、開発環境のセットアップと管理が容易になり、チーム全体の生産性が向上します。それでは、開発を始めましょう！