Vue.js のお試し開発環境を構築するシンプルな Docker Compose を用意した

はじめに

以前、 Dockerfile を書かないで docker-compose.yml だけで Node.js 開発環境を用意する方法 にて Node.js のシンプルな開発環境を docker-compose.yml を使用して構築しました。

今回、 Vue.js を使ったアプリをお試しで作りたいです。この時、前回だけでは環境が足りませんでしたので、ノートいたします。

docker-compose.yml

前回 からの diff

• working_dir は Dockerfile へ移したので削除した。
• ウェブブラウザから Vue.js アプリを確認するために、 ports を追加した。

version: "3.7"
services:
    app:
      build: ./
      tty: true
      ports:
        - "8080:8080"
      volumes:
        - ./:/app

Dockerfile

前回 からの diff

• Dockerfile を新たに作成
• docker-compose.yml の working_dir を Dockerfile の WORKDIR へと移動した。
• node:14.0.0 イメージに対して @vue/cli を追加した。

FROM node:14.0.0
WORKDIR /app
RUN npm install -g @vue/cli

おわりに

ウェブブラウザで確認するときのポートを調べるには、実際にコンテナ内で npm run serve して調べました。

今回の投稿、なんとなく以前にも投稿したことがあるかもしれないと思いつつ、まあ、いいかと思って記しました。

以上です。