素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2019年6月10日
最終更新日:

【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】

YouTubeも見てね♪

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

Nuxt.jsがアツい

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

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

AngularJSからReactNode.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を用意しましょう。

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

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

docker-compose.ymlの作成

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

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

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

実行

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

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

確認

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

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

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

終わりに

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

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

CATEGORIES & TAGS

IT