Docker Nuxt.js

DockerでMacにNuxtの環境を構築する

DockerでMacにNuxtの環境を構築する

概要

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

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

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

目次

使用した環境

  • Mac OS
  • node  ー12.16.1
  • Docker version ー19.03.12

ディレクトリの構成

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

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を使って何か作ってみようと思います。

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

関連記事

最近の投稿