Nuxt.jsの環境をDockerで構築する方法

みなさん、Nuxt.jsは知っていますか?

Nuxt.js公式ドキュメント

Nuxt.jsとは、SSR(サーバサイドレンダリング)や静的ファイル生成を持ったVue.jsアプリケーションを構築できるフレームワークです。

Vue.jsをそのまま書いてもいいのですが、SSRを実装する手間やうまいことファイル分割ができず、コードが長くなってしまうデメリットがあります。

そこで、もうちょっときれいに書きたい・・・と思う人もいるかと思います。

その、痒いところに手が届くようなフレームワークがNuxt.jsです。

今回は、自分のPC環境を汚したくないな・・っていう人向けにDockerを使ってサクッとNuxt.jsを試せるように説明していきます。

今回学べる技術

  • Docker
  • Docker Compose
  • Nuxt.js

※ 利用するホストコンピュータはMacとなります。

必要ツールの導入と準備

今回は、Dockerを利用するため、Docker For Macを導入しましょう。

Docker For Mac公式ドキュメント

インストールが完了できたら、Dockerの可愛いアイコンがMacに入ったと思います。

Dockerが導入できたら、”Docker is Running”となるまで暫しお待ち下さい。

おそらく、1分ぐらいしたら起動するかと思います。

起動したら、作業用ディレクトリを作成しておきます。

$ mkdir [プロジェクト名] && cd [プロジェクト名]

Dockerfileの作成

Dockerを動かすための設定ファイルがDockerfileです。

今回は、Nuxt.jsを動かすため、Node.jsが必要となります。

Node.jsは最新版の安定しているバージョンを入れておきましょう。

Node.js公式ドキュメント

今回は、10.11.0を入れて検証してみたいと思います。

FROM node:10.11.0-alpine

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli && \
    npm install -g nuxt && \
    npm install -g create-nuxt-app
ENV HOST 0.0.0.0

WORKDIR /app

Dockerhubにある、node:10.11.0-alpineのイメージをベースにして、Nuxt.jsをインストールしたイメージを作成します。

設定はこれだけです。

npm(Node.jsのパッケージマネージャー)でNuxt.jsやNuxt.jsのアプリケーションを簡単に作成できるcreate-nuxt-appをインストールしています。

そして、コンテナ内の作業用ディレクトをappとして定義しております。

docker-compose.ymlの作成

今回に限って言えばDockerだけでもことは足りるのですが、今後他のミドルウェアを利用するかもしれない、かつコンテナを簡単に管理したいという思いからDocker Composeを利用したいと思います。

Docker Composeを利用するには、docker-compose.ymlが必要なので、ファイルを作成していきます。

※ Docker Composeは、Docker For Macを入れていれば自動的にインストールはされています

version: "3"
services:
  web:
    build:
      context: ./
    privileged: true
    volumes:
      - "./:/app"
    ports:
      - 3003:3000
    container_name: "nuxt-sandbox"
    tty: true

Docker Composeの簡単な説明です。

・Volumes

ホストマシンとDockerコンテナ内のファイルをSyncすることができます。

[ホストマシンのパス]:[Dockerコンテナ内のパス]

というように記述します。

・container_name

コンテナに名前をつけることができます。

今回はnuxt-sandboxと名前をつけております。

・tty

Dockerコンテナを起動してもtrueをつけることで永続化できます。

Dockerを動かしてNuxt.jsを構築する

Dockerでコンテナを作成していく

では、Dockerfileとdocker-compose.ymlからコンテナを作成していきます。

イメージをビルドしていきます。

$ docker-compose build

ビルドが終わったら、次にコンテナを起動していきます。

オプション-dをつけることで、バックグラウンドでコンテナを起動します。

$ docker-compose up -d

これで、必要なコンテナが立ち上がりました。

Nuxt.jsのアプリケーションを作成していく

Dockerコンテナが立ち上がったので、次にコンテナ内でNuxt.jsのアプリケーションを展開していきます。

ホストコンピュータで下記のコマンドを叩き、Dockerコンテナ内に入ってください。

$ docker-compose exec web sh

※ 下記からはDockerコンテナ内の作業です

コンテナ内で最初に入れた、create-nuxt-appコマンドを用いて、Nuxt.jsを展開していきます。

$ create-nuxt-app .

打つと、色々聞かれますので、自分がほしい設定やモジュールを選択してください。

? Project name app
? Project description My priceless Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name
? Choose a package manager yarn

これで、Nuxt.jsを展開することができ、docker-compose.ymlに書いてあるVolumesの設定により、ホストコンピュータにもソースコードがSyncして展開されたと思います。

環境を確認して、開発を進めていく

ソースコードが展開されたら、プロジェクトを起動していきましょう。

先程Nuxt.jsを展開するときに、Choose a package managerで選択したパッケージマネージャーで必要パッケージをインストールしていきましょう。

※ 今回はyarnを選択しています

$ yarn install

必要パッケージがインストールできたら、プロジェクトを起動していきましょう。

$ yarn run dev

localhost:3000をブラウザに売って確かめてみましょう!

これでホストコンピュータからソースをいじれて、かつDockerコンテナ内でサーバが立ち上がり、開発する環境が出来上がったと思います。

まとめ

DockerでNuxt.jsの環境を構築することができました。

これで、ホストコンピュータ(Mac)の中に余分なものをインストールしなくても、コンテナ内で全て完結でき構築をすることができます。

Dockerってとても便利ですね!

是非皆さんも参考に環境を構築してみてください!

[参考] コマンドまとめ

Dockerイメージを作成する

$ docker-compose build

Dockerコンテナを立ち上げる

$ docker-compose up -d

Dockerコンテナ内にshで入る

$ docker-compose exec [コンテナ名] sh