More than 5 years have passed since last update.

Nuxt.js のインストール + Netlify を利用したサーバーレス構築

Last updated at 2020-02-02Posted at 2020-02-02

本記事は Nuxt.js の導入から Netlify へのビルドまでを行った際の覚書となります。
Nuxt.js を利用したプロダクト開発は取り扱っていません。

内容

プログレッシブフレームワーク Nuxt.js の導入
ホスティングサービス Netlify への GitHub 連携を利用したビルド・ホスティング

環境

macOS Mojave 10.14.3
Node.js 12.12.0
- npm 6.11.3（Nuxt.js インストール時 npx コマンドを実行する為に必要）

Nuxt.js

バージョン 2.11.0

create-nuxt-app を使用して Nuxt.js をインストール

公式ドキュメント
https://ja.nuxtjs.org/guide/installation/

# 任意のディレクトリで以下のコマンドを実行
$ npx create-nuxt-app tutorial-nuxt-netlify

プロジェクト名 tutorial-nuxt-netlify の部分は適宜、変更してください。

対話形式でのインストール（プロジェクト作成）が開始されます。

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in tutorial-nuxt-netlify

Project name

? Project name (tutorial-nuxt-netlify)

プロジェクト名。
デフォルトはコマンド実行時に指定したもの。特に理由がない限り、そのままで良いかと思います。

Project description

? Project description (My awe-inspiring Nuxt.js project)

プロジェクトの説明。

Author name

? Author name (naente_dev)

プロジェクトの作成者名。

Choose the package manager

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

パッケージマネージャーの選択。
Yarn と Npm のどちらを使用するか、今回は Npm を選択しました。

Choose UI framework

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

UI フレームワークの選択。
先日参加した勉強会でオススメされていた Ant Design Vue を選択しました。

Choose custom server framework

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

サーバーサイドフレームワークの選択。
知見が無かった為、推奨されている None を選択しました。

Choose Nuxt.js modules

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Nuxt.js モジュール（拡張機能）の選択。

公式ドキュメント
https://ja.nuxtjs.org/guide/modules

モジュールは、Nuxt.js のコア機能を拡張し、無限のインテグレーションを加える Nuxt.js の拡張機能です。

今回は全てチェックしました。

Choose linting tools

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

使用する lint（ソースコード静的解析ツール）の選択。
公式ドキュメントで ESLint と Prettier の併用が推奨されていたので、そのふたつを選択しました。
https://ja.nuxtjs.org/guide/development-tools#eslint-%E3%81%A8-prettier

Choose test framework

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

テスティングフレームワークの選択。
今回は None を選択しました。

Choose rendering mode

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

レンダリングモードの選択。

ユニバーサル（SSR）
シングルページアプリケーション（SPA）

今回は Single Page App を選択しました。

参考にさせていただいた記事
https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d

Choose development tools

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)

開発ツールの選択。
今回はチェックしませんでしたが、Visual Studio Code を使用する場合はチェック推奨とのこと。

🎉  Successfully created project tutorial-nuxt-netlify

  To get started:

	cd tutorial-nuxt-netlify
	npm run dev

  To build & start for production:

	cd tutorial-nuxt-netlify
	npm run build
	npm run start

以上でインストール（プロジェクト作成）が完了しました。
コマンドを実行したディレクトリ内にプロジェクト名のディレクトリが作成されている筈です。

プロジェクトの起動確認

# プロジェクトディレクトリへ移動
$ cd tutorial-nuxt-netlify/
# プロジェクトを開発モードで起動
$ npm run dev

> tutorial-nuxt-netlify@1.0.0 dev /*****/*****/*****/tutorial-nuxt-netlify
> nuxt


   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.11.0                        │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                               10:28:35
ℹ Initial build may take a while                                                                                                                                                                  10:28:35
✔ Builder initialized                                                                                                                                                                             10:28:35
✔ Nuxt files generated                                                                                                                                                                            10:28:35

✔ Client
  Compiled successfully in 9.10s

ℹ Waiting for file changes                                                                                                                                                                        10:28:46
ℹ Memory usage: 423 MB (RSS: 534 MB)

http://localhost:3000/ にアクセスすると以下の画面が表示されます。

ローカルリポジトリの作成

# プロジェクトディレクトリ内（本例では tutorial-nuxt-netlify 内）で初期化
$ git init
Reinitialized existing Git repository in /*****/*****/*****/tutorial-nuxt-netlify/.git/

プロジェクト作成時にあらかじめ準備されているようですが念の為、初期化しておきました。

GitHub

アカウントの作成は割愛します。

リモートリポジトリの作成

リポジトリの作成に成功すると
リモート URL https://github.com/******/tutorial-nuxt-netlify.git が発行されます。
（****** 部分は GitHub のユーザーネーム）

リモートリポジトリへプッシュ

# プロジェクトディレクトリ内（本例では tutorial-nuxt-netlify 内）にて
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/tutorial-nuxt-netlify.git
$ git push -u origin master