10分くらいでできるDocker+Vue.js環境構築（Mac編）

タイトルの通り、約10分くらいを目安にDockerでのVue.js環境を構築していきたいと思います。
なのでオプション等の細かい説明は省いています。

環境と前提

環境

・MacOS Monterey 12.6

前提

・Docker Desktopをインストール済み

ワークディレクトリ/Dockerfileの作成

・適当なプロジェクトを作成（今回はnode_dev）し、その中にappディレクトリとDockerfileを作成します。
Dockerfileの中身は以下のように記述します。

FROM node:18.12.0

WORKDIR /app

COPY ./app /app

CMD ["/bin/bash"]

Dockerイメージ作成

・先ほど作成したDockerfileを元にイメージを作成します。
node_dev内でコンソールを開き、以下のコマンドを実行します。

kookie@MBP node_dev % docker image build -t dev/node:latest .

・buildが完了したら、docker image lsコマンドでイメージが作成されているか確認してみましょう。
以下のように表示されていればOKです。

kookie@MBP node_dev % docker image ls
REPOSITORY          TAG       IMAGE ID       CREATED         SIZE
dev/node           latest    xxxxxxxxxxxx   2 minutes ago   991MB

Dockerコンテナの起動

・node_dev内でコンソールを開き、以下のコマンドを実行します。
root@xxxxxxxが表示されコンテナにいることが確認できたらOKです。
ついでにNodeとnpmもインストールされているかnode -v/npm -vで確認しておきましょう。

kookie@MBP node_dev % docker container run -it -p 8080:8080 --name node-dev -v ${PWD}/app:/app dev/node:latest
root@xxxxxxxxxxxx:/app#
root@xxxxxxxxxxxx:/app# node -v
v18.12.0
root@xxxxxxxxxxxx:/app# npm -v
8.19.2

Vue CLIのインストール

・コンテナ内で以下のコマンドを実行し、Vue CLIをグローバルインストールします。
インストールが完了したらvue –versionコマンドで確認。

root@xxxxxxxxxxxx:/app# npm install -g @vue/cli
~インストール完了後~
root@xxxxxxxxxxxx:/app# vue --version
@vue/cli 5.0.8

Vueプロジェクトの作成

・以下のコマンドでVueプロジェクトを作成します。

root@xxxxxxxxxxxx:/app# vue create .

・コマンド実行後、ディレクトリがない場合は以下のようなメッセージが表示されるので、Yで選択します。
その後、Vue3/Vue2どちらを使うかと、yarn/npmどちらを使うかの選択肢が出てくるので好きな方を選択します。（今回はVue3/yarnで選択しました。）
yarnを選択した理由ですが、おそらく猫好きならyarn一択だと思っています。

Vue CLI v5.0.8
? Generate project in current directory? (Y/n)

Vue.jsの起動

・以下コマンドを実行し、起動します。
起動後、http://localhost:8080/へアクセスしVueの画面が表示されれば完了です。
お疲れ様でした。

root@xxxxxxxxxxxx:/app# yarn serve

サクッと構築できてサクッと壊せてサクッと動作検証できるのがDockerの強みでもあるので、よかったら参考にしてみてください。