vue + docker で環境構築

2022年9月16日未分類

こんにちは。ものレボの古澤です。

今回は、vue + docker での環境構築を紹介したいと思います。

dockerで環境構築しようと思った理由

最近、会社PCをm1チップ搭載モデルに変えてもらったのですが、その際に、環境構築が面倒だったので、今後環境構築を楽に済ませるために、dockerを導入することにしました。

事前準備

Docker Desktop for Apple siliconをインストール

構成

/(プロジェクトのルートディレクトリ)
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── .quasar
├── babel.config.js
├── bin
├── Dockerfile  <-- ★
├── docker-compose.yml  <-- ★
├── package.json
├── public
├── quasar.conf.js
├── src
├── tsconfig.json
└── yarn.lock

vue3 + typescript + quasar の構成。

今回は、vue を docker 上で動かす方法を記載するので、★マークのみが対象となる。

構築

1. Dockerfileを作成

FROM node:16.6.2

WORKDIR /app

ENV HOST 0.0.0.0
EXPOSE 8080

FROM

公式でnodeのdockerイメージが存在するので、そちらを活用。

WORKDIR

コンテナ内の作業ディレクトリを/appに設定。

ENV

環境設定HOSTを設定。

EXPOSE

コンテナの Listen Port を8080に設定。

2. docker-compose.ymlを作成

version: '3.8'

services:
  neo:
    container_name: neo
    build: .
    command: /bin/sh -c "yarn && yarn dev"
    tty: true
    volumes:
      - .:/app
    ports:
      - 8000:8080