【Docker】【Vue3】Docker+Vue3開発環境を作る

こんにちは。
Webアプリが作りたい今日この頃なんですが、フロントエンドにはVue3を使いたいと思い、自分のローカルに開発環境を作った話をしようと思います。

参考

qiita.com

こちらのqiitaの記事を参考にさせていただきました。

実行環境

MacOS Moterey 12.5.1
docker 20.10.11
docker-compose 1.29.2

作業ディレクトリ

- docker-compose.yaml
- Dockerfile

上記２つのファイルを作ります。

Dockerfile

FROM node:16.16

RUN apt-get update -qq && yarn global add @vue/cli

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

docker-compose

version: "3.9"

services:
  client:
    build: ./app
    container_name: app
    ports:
      - "8080:8080"
    expose:
      - "8080"
    volumes:
      - ./app:/app
    tty: true
    stdin_open: true

実行

$ docker image build . -t app
$ docker container run --rm -it -p 8080:8080 app

vueのインストール

$ yarn -v
# 1.22.19

yarnは最初から入っていました。

$ yarn global add @vue/cli

プロジェクトの作成

$ vue create my-project

プロジェクトができたら動かしてみます。

$ cd my-project
$ yarn serve

localhost:8080にアクセスするとVueのページが見れます。

まとめ

• とりあえず動かすのは簡単
• 参考記事のコピーでDockerfileを作ったのでvolumeの意味がわかってなくて最初は困った
• 新規でアプリを作ったのであまり旨味を感じなかったけど、既にあるアプリを動かそうとするならインストールできないものがあるとかで困らなくなるのでよさそう
• Dockerもっと色々できそうなので順次調べていきたい