タイトルの通り、約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の強みでもあるので、よかったら参考にしてみてください。
