docker-composeでNuxtアプリケーションを作成する

ふと、docker-composeを使ってNuxtのアプリケーションを作ろうと思ったから書いておこう。やるのはdocker-compose upでNuxtアプリケーションを立ち上げるところまで。前のプロジェクトでKubernetes使ってNuxtの開発していたからKubernetes使ったバージョンもやりたいな。

Nuxtアプリケーションのディレクトリ構成

ディレクトリ構成はこうしよう。

.
├── Dockerfile
├── docker-compose.yml
└── src

src配下にNuxtのファイルが入るイメージ。srcディレクトリを置いているのは、単純に破棄しやすいから。トップのディレクトリ配下にNuxtアプリケーションのコードがあると、消したい時なんかにちょっと不便。だからdocker-composeのvolumesではsrcを指定するよ。

Dockerfileを作る

まずはDockerfile。これだけ。

# イメージ指定
FROM node:12.13.0-alpine

EXPOSE 3000
ENV HOST 0.0.0.0

# コマンド実行
RUN apk update && \
    apk add git && \
    npm install -g @vue/cli nuxt create-nuxt-app

docker-compose.ymlを作る

docker-comppose.ymlもこれだけ。

version: '3'
services:
  nuxt-app:
    # Dockerfileの場所
    build: .
    working_dir: /src
    command: yarn run dev
    # ホストOSとコンテナ内でソースコードを共有する
    volumes:
      - ./src:/src
    # コンテナ内部の3000を外部から5000でアクセスする
    ports:
      - 5000:3000

docker-composeでcommandを指定するのかDockerfileでCMDを指定するのかっていうのをちょっと迷うけど、docker-compose upを打った時に実行したいからdocker-compose.ymlにcommandを記述している。

ja.stackoverflow.com

Nuxtアプリケーションを作成する

nuxtアプリケーションの作成をcreate-nuxt-appコマンドで作成する。作成したら立ち上げよう。

$ docker-compose run --rm nuxt-app npx create-nuxt-app

どんな設定にするか色々聞かれるから、答えてあげよう。この時点でTypeScriptを選択できるようになったんだね。TypeScriptでやりたいからTypeScriptを選択しておいた。runtimeも以前TypeScriptを使った時には@nuxt/typescript-runtimeを使ったから、それを選択。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name nuxt-app
? Project description My transcendent Nuxt.js project
? Author name me
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, 
<i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i
> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all
, <i> to invert selection)

全て回答するとアプリケーションが作られるぞ。TypeScript選択するとnuxt.config.jsonにbuildModule追加してくれたり、tsconfig.json作ってくれるのか。以前　JavascritpのものをTypeScriptに途中からした事があるけど、最初からやるとこんな楽なのか・・・

アプリケーションが作られたらsrc配下に色々ファイルが作られる。作られたら起動してみよう。