ねこじゃすり
猫を魅了する魔法の装備品！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
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のプロジェクトを作成するところを進めていきたいと思います。
Travenist
Otakenist
