みなさん、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の可愛いアイコンがMacに入ったと思います。
Dockerが導入できたら、”Docker is Running”となるまで暫しお待ち下さい。
おそらく、1分ぐらいしたら起動するかと思います。
起動したら、作業用ディレクトリを作成しておきます。
$ mkdir [プロジェクト名] && cd [プロジェクト名]
Dockerfileの作成
Dockerを動かすための設定ファイルがDockerfileです。
今回は、Nuxt.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