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を使って何か作ってみようと思います。
ありがとうございました。