Featured image of post Nuxt.jsの開発環境をDockerで構築する方法【SSR/Vue.js】
IT

Nuxt.jsの開発環境をDockerで構築する方法【SSR/Vue.js】

サーバーサイドレンダリングができる「Nuxt.js」の開発環境をDockerで構築する手順。Vue.jsとNuxt.jsの概要、Dockerfileとdocker-compose.ymlの作成、コンテナの起動とyarnの確認まで。連載の環境構築編です♪

1795文字

Nuxt.jsがアツい

フロントエンド戦争は落ち着き始めている？

近年のフロントサイドの技術は目まぐるしく進化を遂げていますね。

AngularJSからReact、Node.jsなどなど。。。

そして、そんなフロントエンド戦争に終止符を打つべく登場したのが、Vue.jsです。

Vue.js？

Vue.jsとは、描写(View)に重きを置いたシンプルなフレームワークです。

The Progressive JavaScript Framework 親しみやすい すでに HTML、CSS そして JavaScript を知っていますか？ ガイドを読んで、すぐにモノ作りを開始しましょう！

融通が効く ライブラリと完全な機能を備えたフレームワークの間で拡張できる徐々に採用可能なエコシステム

高性能 20KB min+gzip コンパクトなランタイム。 猛烈に速い Virtual DOM 。 最小限のみ成果で最適化が可能。Vue.js

要するに、扱いやすくカスタマイズ性が高く高速なフレームワーク、と言う事ですね。
Angular.jsなどはフルスタックフレームワークとなっているため、やれる事は多いのですが設定や記述が複雑なのが弱みです。

日本語ドキュメントが充実しているところもポイントです♪

そして、そんなVue.jsをさらに扱いやすくするフレームワークがNuxt.jsです。

Nuxt.js？

Nuxt.jsとは、Vue.jsを用いたWebアプリケーションを簡単に作るために考え出されたフレームワークです。

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。はじめに - Nuxt.js

Vue.js単体でWebアプリケーションを作る際に必要だった設定等を何も指定せずによしなにやってくれるため、導入しやすいのがメリットです。

Vue.jsと同様に、こちらも日本語ドキュメントが充実しています♪

Nuxtの読み方はナクスト

ちなみに、初見だと悩んでしまう読み方ですが、ナクストと読みます。
これからは胸を張ってナクストと言っていきましょう！笑

英語が弱めな筆者はヌクストと読んでいた。

SSR(サーバーサイドレンダリング)が可能

そして、一番注目されているのがサーバーサイドレンダリングが簡単に出来る、と言う点ですね。

今回はSSRについての説明は割愛しますが、簡単に言うとパフォーマンスがさらに向上しSEO対策にも効果がある、と言われています。

Docker環境でサクッと開発しよう

フロントエンドの開発を行う際にも、最近ではコマンドを駆使して進める事が多くなっていると思います。

しかし、複数のアプリケーション開発をしているとモジュールのバージョン違いなどでうまく動かなかったり、マシンの環境変数やコマンドが汚れてしまう恐れがあります

そこで今回は、実際にNuxt.jsを開発するためのDocker環境を構築するところまでをご紹介していこうと思います。

Dockerを使うことでバージョン違いやグローバルを汚す恐れを気にすることなく環境を構築する事が可能になるのでオススメです♪

手順

前提

今回のホスト側のDocker環境は以下の通りです。

dockerDocker version 18.06.1-ce, build e68fc7a
docker-composedocker-compose version 1.22.0, build f46880f

Dockerfileの作成

まずはDockerfileを用意しましょう。

[adsense-responsive]

内容は以下をコピペで問題ありません。

Dockerfile
FROM node:10.8.0-stretch

RUN npm install --global yarn
RUN yarn global add @vue/cli
RUN yarn global add @vue/cli-init

WORKDIR /projects

ENV HOST 0.0.0.0
ENV PORT 3000

Nuxt.jsプロジェクトを構築するために必要なもののみインストールしておきます。

docker-compose.ymlの作成

次に、docker-compose.ymlを作成します。

こちらも基本的には以下の内容をそのままコピペで問題ありません。

docker-compose.yml
version: '3'

services:
  nuxt_sample_app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ".:/projects"
    tty: true

ファイル群をホスト側で編集出来るように、Dockerfileで作成したprojectsフォルダをマウントしておきます。

実行

それでは、docker-composeコマンドで起動しましょう。

docker-compose up -d
Creating network "study-nuxt_default" with the default driver
Building nuxt_sample_app
Step 1/7 : FROM node:10.8.0-stretch
 ---> 383051761be5
Step 2/7 : RUN npm install --global yarn
 ---> Using cache
 ---> 3b160886b7be
Step 3/7 : RUN yarn global add @vue/cli
 ---> Using cache
 ---> 88ee573a9597
Step 4/7 : RUN yarn global add @vue/cli-init
 ---> Using cache
 ---> 17c9a11855ad
Step 5/7 : WORKDIR /projects
 ---> Using cache
 ---> 69fee8cfe82d
Step 6/7 : ENV HOST 0.0.0.0
 ---> Using cache
 ---> 75400c251c28
Step 7/7 : ENV PORT 3000
 ---> Using cache
 ---> 74c1f1050678
Successfully built 74c1f1050678
Successfully tagged study-nuxt_nuxt_sample_app:latest

Starting study-nuxt_nuxt_sample_app_1 ... done

以上のようにStarting study-nuxt_nuxt_sample_app_1 ... doneと出ていれば起動は完了です。

確認

では、起動したコンテナに以下のコマンドで入ってみましょう。

docker-compose exec nuxt_sample_app bash
root@627ac282256c:/projects#

正常にrootユーザーで入る事が出来たかと思います。

yarn --version
1.16.0

yarnも正常にインストールされていますね♪

終わりに

これで、Vue.jsやNuxt.jsをDocker環境で開発するための準備が出来ました。

次回は実際にNuxt.jsのプロジェクトを作成するところを進めていきたいと思います。