タイトルの通り、約10分くらいを目安にDockerでのVue.js環境を構築していきたいと思います。
なのでオプション等の細かい説明は省いています。
環境と前提
環境
・MacOS Monterey 12.6
前提
・Docker Desktopをインストール済み
ワークディレクトリ/Dockerfileの作成
・適当なプロジェクトを作成(今回はnode_dev)し、その中にappディレクトリとDockerfileを作成します。
Dockerfileの中身は以下のように記述します。
Dockerイメージ作成
・先ほど作成したDockerfileを元にイメージを作成します。
node_dev内でコンソールを開き、以下のコマンドを実行します。
・buildが完了したら、docker image lsコマンドでイメージが作成されているか確認してみましょう。
以下のように表示されていればOKです。
Dockerコンテナの起動
・node_dev内でコンソールを開き、以下のコマンドを実行します。
root@xxxxxxxが表示されコンテナにいることが確認できたらOKです。
ついでにNodeとnpmもインストールされているかnode -v/npm -vで確認しておきましょう。
Vue CLIのインストール
・コンテナ内で以下のコマンドを実行し、Vue CLIをグローバルインストールします。
インストールが完了したらvue –versionコマンドで確認。
Vueプロジェクトの作成
・以下のコマンドでVueプロジェクトを作成します。
・コマンド実行後、ディレクトリがない場合は以下のようなメッセージが表示されるので、Yで選択します。
その後、Vue3/Vue2どちらを使うかと、yarn/npmどちらを使うかの選択肢が出てくるので好きな方を選択します。(今回はVue3/yarnで選択しました。)
yarnを選択した理由ですが、おそらく猫好きならyarn一択だと思っています。
Vue.jsの起動
・以下コマンドを実行し、起動します。
起動後、http://localhost:8080/へアクセスしVueの画面が表示されれば完了です。
お疲れ様でした。

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