Tech note

備忘録

DockerでNuxt環境を構築する

Nuxt Docker

環境

macOS Catalina 10.15.6

前提

Docker for Macをインストール済みであること。
インストールをしていない場合は、こちらからインストール。

ディレクトリ構成

|-- src
|-- docker-compose.yml
|-- Dockerfile

Dockerコンテナの作成

必要なファイルを準備する。

docker-compose.yml

version: '3'

services:
  nuxt:
    container_name: nuxt
    build: .
    ports:
      - 3000:3000
    volumes:
      - ./src/:/app
    tty: true

Dockerfile

FROM node:14.10.1

ENV LANG=C.UTF-8 TZ=Asia/Tokyo

WORKDIR /app

RUN npm install -g create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3000
コンテナの作成と起動をする。
$ docker-compose up -d

Nuxtプロジェクトの作成

先ほど作成したコンテナのIDを調べて、コンテナの中に入る。
$ docker ps
$ docker exec -it コンテナのID /bin/sh
プロジェクトを作成する。
$ npx create-nuxt-app プロジェクト名

? Project name: プロジェクト名
? Programming language: TypeScript
? Package manage: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: -
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: -
プロジェクトを起動する。
$ cd プロジェクト名
$ npm run dev
「http://localhost:3000」にアクセスする。

f:id:sbu8:20200913005114p:plain