DockerでVue CLI、Vue.jsの開発環境を作成

DockerとVue CLIでVue.jsの開発環境を作成する方法

DockerとVue CLIを組み合わせてVue.jsの開発環境を作成する手順は以下の通りです。

1.Dockerのインストール
まずはDockerをインストールしてください。以下のサイトからダウンロードしてインストールしてください。

https://www.docker.com/

2.Dockerfileの作成
次に、Vue.jsの開発環境を構築するためのDockerfileを作成します。Dockerfileは、Dockerイメージをビルドするための設定ファイルです。

以下は、Vue.jsの開発環境を構築するためのDockerfileの例です。

# Node.jsの公式イメージをベースにする
FROM node:14-alpine

# 必要なパッケージのインストール
RUN apk add --no-cache git

# Vue CLIのインストール
RUN npm install -g @vue/cli

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

# ホストのpackage.jsonをコンテナにコピー
COPY package*.json ./

# 依存パッケージのインストール
RUN npm install

# ソースコードのコピー
COPY . .

# ポートの設定
EXPOSE 8080

# 開発サーバの起動
CMD ["npm", "run", "serve"]

このDockerfileでは、以下の処理を行っています。

• Node.jsの公式イメージをベースにする
• 必要なパッケージ（git）のインストール
• Vue CLIのインストール
• 作業ディレクトリの設定
• ホストのpackage.jsonをコンテナにコピーして依存パッケージをインストール
• ソースコードのコピー
• ポートの設定
• 開発サーバの起動

3.Dockerイメージのビルド
Dockerfileを作成したら、以下のコマンドを実行してDockerイメージをビルドします。

docker build -t my-vue-app .

このコマンドでは、Dockerイメージのタグ名を my-vue-app としています。また、イメージのビルドには現在のディレクトリにあるDockerfileを使用します。

4.Dockerコンテナの起動
Dockerイメージのビルドが完了したら、以下のコマンドを実行してDockerコンテナを起動します。

docker run -it --rm -p 8080:8080 -v ${PWD}:/app my-vue-app

このコマンドでは、Dockerコンテナをインタラクティブモードで起動しています。また、ホストのカレントディレクトリをDockerコンテナの /app ディレクトリにマウントしています。

5.Vueプロジェクトの作成
Dockerコンテナを起動したら、以下のコマンドを実行してVueプロジェクトを作成します。

vue create .

このコマンドでは、現在のディレクトリにVueプロジェクトを作成します。

6.開発サーバの起動
Vueプロジェクトが作成できたら、以下のコマンドを実行して開発サーバを起動します。
このコマンドでは、Vue CLIが提供する開発サーバを起動しています。