[Docker 初心者向け] Docker を活用して開発環境を整えよう (第９回)

2021年3月1日月曜日

第９章: docker-compose の活用例 (Nuxt.js)

Vue.js といえば Nuxt.js 。ドキュメントの豊富さなどからいくと、これからフロントエンド開発を始める人は Nuxt.js からはじめるのが間違いはないでしょう。

9.1 作成する docker 環境について

Vue.js 同様 Nuxt.js のサイトも日本語訳が充実しているのでまずは公式サイトを参考にすると良いでしょう。

今回の設定で注意するところは docker-compose.yml ファイルで environment での設定です。

PORT: 3000 に加え HOST: 0.0.0.0 を指定しています。なぜ、localhost 127.0.0.1 ではないのか。詳細は説明はここでは省きますが、公式サイトにもそれに該当する資料が存在するのでそちらの資料を参考すると良いと思います。

Nuxt.js 公式 - https://ja.nuxtjs.org/
Nuxt.js 公式設定について - https://ja.nuxtjs.org/docs/2.x/features/configuration/

9.2 準備する各ファイルの説明

下記のようなファイル構成を目指してゆきます。

(任意のディレクリを作成 今回は ~/tmp/docker_sample/node_nuxt)
% mkdir -p ~/tmp/docker_sample/node_nuxt && cd ~/tmp/docker_sample/node_nuxt
% touch Dockerfile docker-compose.yml compose_cmd.bash && \
chmod +x compose_cmd.bash

Dockerfile (イメージを作成するためのファイル)

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

docker-compose.yml (compose コマンドで実行するファイル)

version: '3.8'
services:
  web:
    container_name: ctr_nuxt_node14_15_4
    build:
      context: .
    image: node14_15_4:yarn
    volumes:
      - .:/usr/src/app
    ports:
      - '3000:3000'
    environment:
      PORT: 3000
      HOST: 0.0.0.0
    command: './compose_cmd.bash'

compose_cmd.bash ( compose.yml の中で実行するコマンド)

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

9.3 docker-compse の実行例

(イメージを作成)
% docker-compose build
(nuxt フレームワーク作成 プロジェクト名 node_nuxt)
% docker-compose run --rm web yarn create nuxt-app node_nuxt
(ディレクトリ整理、通常ファイルと隠しファイル、同じものは移動しない)
% mv -n node_nuxt/* . && \
mv -n node_nuxt/.[^\.]* .
(残っているファイル、中身を確認してディレクトリごと削除)
% rm -r node_nuxt
(web app 起動)
% docker-compose up

(web ブラウザで localhost:3000 で確認)

(コンテナの中に入って作業したいとき、もう一つコンソールを開いて)
% docker-compose exec web /bin/bash
(コンテナの中でライブラリ追加 Commander の場合)
# yarn add commander
(コンテナ終了)
# exit
(コンテナの外からモジュールを追加したいとき Moment の場合)
% docker-compose exec web yarn add moment
(次回からの実行)
% docker-compose up

9.4 まとめ

Nuxt.js は Vue.js を中心としてフロントエンド開発に必要なものが一通り揃っている
Nuxt.js をつかうと簡易的なものであればサーバーサイド開発も対応できる

9.5 次回

今回は Nuxt.js 開発環境を作ってみました。

最近は Nuxt.js を使ったフロントエンド開発がおおくなってきましたので、docker 環境の作り方を覚えておくと役に立つと思います。

サンプルの紹介は今回でおわります、次回は最後に docker の代表的なコマンド事例のまとめを紹介したいと思います。

Becomブログ