概要

docker-compose を用いて、Nuxt の開発環境を構築してみます。

docker-composeは、docker-compose.ymlというファイルにコンテナの構成情報をまとめて定義することで、同一のホスト上の複数のDockerコンテナを一括管理し連動させることができます。

dockerってなんぞやという方は以前の記事をご覧ください。 dockerとは

目次

• 概要
• 使用した環境
• ディレクトリの構成
• ファイルの作成
• Nuxtプロジェクトの生成

使用した環境

• Mac OS
• node 　ー１２.１６.１
• Docker version ー１９.０３.１２

ディレクトリの構成

最終的なディレクトリ構成は以下のようになっています。

nuxt-test
　│ 
　├── docker
　│   |
　│   └── nuxt
　│       │ 
　│       └── Dockerfile    (アプリケーションコンテナの設定ファイル)
　│       
　├──  docker-compose.yml
　│
　├──  compose-cmd.bash
　│
　└──  nuxtのファイル群

ファイルの作成

上記の様に docker-compose.yml , Dockerfile ,compose-cmd.bashを作成します。

docker-compose.ymlに記述

version: '3.7'

services:
    nuxt:
        container_name: nuxt-test   # コンテナの名前を決める
        
        build: ./docker/nuxt # ./docker/nuxt の Dockerfileから構築

        ports:  # ポート設定　(3000がデフォルト)
            - '3000:3000'

        volumes:   # 開発ディレクトリと公開ディレクトリをマウント(共有)
            - .:/usr/src/app
        
        environment: # 環境設定 これを書き忘れると上手く起動できなかったです
            PORT: 3000
            HOST: 0.0.0.0

        command: './compose-cmd.bash'

docker/nuxt/Dockerfileに記述

FROM node:12.16.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

compose-cmd.bashに記述

#!/usr/bin/env bash
yarn install && \
yarn dev

compose-cmd.bashに対して所有者の実行権限を付与

$ chmod +x compose_cmd.bash

(Linuxなどで書いたシェルスクリプトは、実行可能権がないと実行できないらしいよ）

Nuxtプロジェクトの生成

• Dockerイメージのbuild

$ docker-compose build

• nuxtの作成(今回のプロジェクト名はnuxt_test)

$ docker-compose run --rm web yarn create nuxt-app nuxt_test

• ディレクトリ・ファイルを整理

$ mv -n nuxt_test/* . && \mv -n nuxt_test/.[^\.]* .
$ rm -r nuxt_test

• アプリケーションの起動

$ docker-compose up

成功すると以下のようになっているはずです

$ docker-compose up
Creating nuxt-test ... done
Attaching to nuxt-test
nuxt-test | yarn install v1.22.0
nuxt-test | [1/4] Resolving packages...
nuxt-test | success Already up-to-date.
nuxt-test | Done in 1.83s.
nuxt-test | yarn run v1.22.0
nuxt-test | $ nuxt
nuxt-test | ℹ Listening on: http://172.24.0.2:3000/
nuxt-test | ℹ Preparing project for development
nuxt-test | ℹ Initial build may take a while
nuxt-test | ✔ Builder initialized
nuxt-test | ✔ Nuxt files generated
nuxt-test | ℹ Compiling Client
nuxt-test | ℹ Compiling Server
nuxt-test | ✔ Server: Compiled successfully in 32.18s
nuxt-test | ✔ Client: Compiled successfully in 41.84s
nuxt-test | ℹ Waiting for file changes
nuxt-test | ℹ Memory usage: 187 MB (RSS: 288 MB)
nuxt-test | ℹ Listening on: http://172.24.0.2:3000/

http://localhost:3000に接続してNuxtの画面が出力されるか確認します。

• アプリケーションの停止

$ docker-compose down

最後に

今回は、Dockerを用いてNuxt.jsの環境開発に挑戦しました。

今度は実際に、Nuxt.jsを使って何か作ってみようと思います。

ありがとうございました。