docker-composeで Nuxt TypeScript + Vuetify 環境を構築 #Docker

はじめに

普段Laravelを触ることが多く、イチからフロントエンドの環境をDockerで構築したことがなかったので挑戦してみました。
docker-composeでNuxt TypeScript+Vuetifyなフロントエンド環境を構築します。
最終的に、モノリポでバックエンドとしてlaravelも同じリポジトリに載せる予定です。
Dockerとdocker-composeがインストールされているものとします。

実行環境

macOS Catalina ver 10.15.6
Docker ver 2.4.0
docker-compose ver 1.27.4

ディレクトリ構成

docker-compose.yml
nuxt/
docker/
└ app/
　　└ Dockerfile

docker-compose

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: ./
      dockerfile: ./docker/app/Dockerfile
    ports: 
      - "3000:3000"
    command: yarn run dev
    volumes:
      - ./nuxt:/nuxt

Dockerfile

FROM node:14.4.0-alpine

ENV HOME=/nuxt \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0

# Vuetifyのインストールに必要
RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python


WORKDIR /nuxt

EXPOSE 3000

ビルド

$ docker-compose build

Nuxt、Vuetifyのインストール

$ docker-compose run --rm app yarn create nuxt-app nuxt
...
...
create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in nuxt
? Project name: `nuxt`
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios (<= スペースキーを押さないと選択されないので注意）
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None

各種質問が出てくるので、上記のようにUI frameworkの欄でVuetify.jsを選ぶ。
スペースを押さないと選択されない項目があるので注意。
インストールが終わるとnuxtディレクトリが以下のようになる

nuxt
　┣ .config/
　┗ nuxt/
　　　┣ asset/
　　　┣ ...
　　　┣ ...
　　　┣ package.json
　　　┗ yarn.loc

ので、nuxt/nuxt/* をnuxt/に移動して以下のようにする

nuxt
　┣ .config/
　┣ asset/
　┣ ...
　┣ ...
　┣ package.json
　┗ yarn.loc

起動

$ docker-compose up -d

http://localhost:3000/
にアクセスして下の画像のように表示されればとりあえず完了！

tsconfig.jsonの設定などあるかもしれませんが、次はLaravelのSanctumとSPA認証の記事で書く予定…