📐

Nuxt.js入門 〜環境構築編〜

2 min read

Nuxt.js is 何

Nuxt.jsとはVue.jsにサーバーサイドレンダリングやデータ管理、ルーティングを組み込んだものである。

サーバーサイドレンダリング

サーバーサイドレンダリングとは「クライアントサイドで表示を生成する」というクライアントサイドレンダリングとはことなり、サーバーサイドで表示をレンダリングしてクライアントサイドに送るというという手法。

ルーティング

Vue Routerというルート管理ライブラリが組み込まれており複数ページを簡単に作成し追加できる。
あらかじめ用意されているフォルダに.vueファイルを追加するだけで新たなページとして認識され、アドレスが割り振られる

環境構築

手作業でアプリを作成

  1. package.jsonの作成
{
    "name" : "app-name",
    "scripts" : {
        "dev" : "nuxt"
    }
}
  1. パッケージのインストール
    npmを使ってNuxt.jsに必要なパッケージをインストール
npm install —save nuxt

node_modulesやpackage-lock.jsonなどが作成されていれば成功

  1. ページの作成
    作成したアプリ用ディレクトリの直下に「pages」ディレクトリを作成し、その中に「index.vue」を作成する
    index.vueにコードを追記
<templete>
    <div>
        <h1>Hello Nuxt</h1>
        <p>This is Nuxt.js app</p>
    </div>
</templete>
  1. プロジェクトの実行
    npmコマンドを使ってプロジェクトの実行
npm run dev
  1. localhostにアクセス
    http://localhost:3000/ にアクセスすればindex.vueの内容が表示される

コマンドでアプリを作成

  1. アプリの作成
    作業ディレクトリの中で以下のコマンドを実行
npm create-nuxt-app プロジェクト名
  1. 必要な情報を入力
  • 名前
  • プロジェクトの概要
  • サーバーフレームワークの選択
  • UIフレームワークの選択
  • レンダンリングモードの選択
  • axiosモージュールの有無
  • eslintモジュールの有無
  • prettierモジュールの有無
  • 作者名の入力
  • パッケージ管理ツールの選択
  1. プロジェクトの実行
    npmコマンドを使ってプロジェクトの実行
npm run dev
  1. localhostにアクセス
    http://localhost:3000/ にアクセスすればデフォルトページの内容が表示される

Dockerでアプリを作成

  1. Dockerのインストール
docker -v

Dockerのバージョンが表示されなければ公式(https://www.docker.com/ )からインストール

  1. Dockerfileの作成
# イメージの指定
FROM node:latest

WORKDIR /app

# linux 最新化 gitインストール npm最新化 vue-cli インストール
RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli

ENV HOST 0.0.0.0
EXPOSE 8080

3、docker-compose.ymlの作成

version: '3'

services:
  nuxt:
    # Dockerfileの場所
    build: .
    tty: true

    command: npm run dev

    volumes:
      - .:/app

    ports:
      - "8080:3000"
  1. ビルド
$ docker-compose build
  1. Nuxt.jsのセットアップ
$ docker-compose run --rm コンテナ名 npx create-nuxt-app
  1. コンテナの立ち上げ
$ docker-compose up -d
  1. localhostにアクセス
    http://localhost:8080/ にアクセスすればデフォルトページの内容が表示される

Discussion

ログインするとコメントできます