投稿日：
2019年6月10日
最終更新日：
【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】
YouTubeも見てね♪
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
目次
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環境は以下の通りです。
| docker | Docker version 18.06.1-ce, build e68fc7a |
|---|---|
| docker-compose | docker-compose version 1.22.0, build f46880f |
Dockerfileの作成
まずはDockerfileを用意しましょう。
内容は以下をコピペで問題ありません。
|
1
2
3
4
5
6
7
8
9
10
|
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を作成します。
こちらも基本的には以下の内容をそのままコピペで問題ありません。
|
1
2
3
4
5
6
7
8
9
10
|
version: '3'
services:
nuxt_sample_app:
build: .
ports:
- "3000:3000"
volumes:
- ".:/projects"
tty: true
|
ファイル群をホスト側で編集出来るように、Dockerfileで作成したprojectsフォルダをマウントしておきます。
実行
それでは、docker-composeコマンドで起動しましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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と出ていれば起動は完了です。
確認
では、起動したコンテナに以下のコマンドで入ってみましょう。
|
1 |
root@627ac282256c:/projects#
|
正常にrootユーザーで入る事が出来たかと思います。
|
1 |
1.16.0 |
yarnも正常にインストールされていますね♪
終わりに
これで、Vue.jsやNuxt.jsをDocker環境で開発するための準備が出来ました。
次回は実際にNuxt.jsのプロジェクトを作成するところを進めていきたいと思います。