はじめに

今回は、Vue.jsの練習を踏まえてDockerで開発環境を作成しようと思い作成しました。

環境

Node.js - v22.9.0
Vue3

事前準備

$ mkdir docker_vue
$ cd docker_vue
$ touch Dockerfile

Dockerfile編集

Dockerfile

ベースイメージの指定
FROM node:22.9

Vue CLIをグローバルにインストール
RUN npm install -g @vue/cli

作業ディレクトリの作成
WORKDIR /app

プロジェクトを自動生成（デフォルト設定で）
RUN vue create vue_practise --default

作成されたプロジェクトに移動
WORKDIR /app/vue_practise

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

アプリが使用するポートを開放
EXPOSE 8080

アプリを実行するコマンド
CMD ["npm", "run", "serve"]

ビルドと実行

$ docker build -t vue_practise .
$ docker run -p 8080:8080 vue_practise

補足(docker run)

docker run -v $(pwd)/vue_practise:/app/vue_practise -p 8081:8080 -it vue_practise

こちらにすると、ホストとコンテナ間でファイル共有ができて、
開発する際に、ファイルをリアルタイムで変更できる。

動作確認

プロジェクトが動作しているかを確認する。
http://localhost:8080

プロジェクトファイルをコピー

現在、Dockerfile内で vue create コマンドを使ってVue.jsプロジェクトを自動生成したため、プロジェクトはコンテナ内部で作成されています。そのため、ホストの作業ディレクトリには、生成されたプロジェクトファイルが表示されない状態です。
そのためにホストでも表示させるためにコピーをします。

$ docker ps

これで出てきたコンテナIDをコピーする。

$ docker cp <コンテナID>:/app/vue_practise ./vue_practise

<コンテナID>こちらにIDを打つ

これで表示されるようになりました。

vue_practise/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
├── Dockerfile
└── ...

補足

起動する時に毎回↓のコードを打つのは、面倒いと思ったので、Dockerfileと同じ直下の所に、
docker-compose.ymlを作成する。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    command: npm run serve

もしまだイメージをビルドしていない場合、またはビルド時に新しい変更を反映させたい場合は、ビルドの設定を書く.

最後に

わざわざ、コピーしなくてもDockerfileで書けるのかどうにかしたらできるかと思いますが、わからなかったのでこのやり方でした汗
まだDocker環境も慣れていないので、
もっと簡単な方法は、あるかと思います。その時は、教えていただきたいです。