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

本記事は 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/

```bash:
# 任意のディレクトリで以下のコマンドを実行
$ npx create-nuxt-app tutorial-nuxt-netlify
```
プロジェクト名 `tutorial-nuxt-netlify` の部分は適宜、変更してください。

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

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

### Project name
```bash
? Project name (tutorial-nuxt-netlify)
```
プロジェクト名。
デフォルトはコマンド実行時に指定したもの。特に理由がない限り、そのままで良いかと思います。


### Project description
```bash
? Project description (My awe-inspiring Nuxt.js project)
```
プロジェクトの説明。

### Author name
```bash
? Author name (naente_dev)
```
プロジェクトの作成者名。


### Choose the package manager
```bash
? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm
```
パッケージマネージャーの選択。
`Yarn` と `Npm` のどちらを使用するか、今回は `Npm` を選択しました。

### Choose UI framework
```bash
? 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
```bash
? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
```
サーバーサイドフレームワークの選択。
知見が無かった為、推奨されている `None` を選択しました。


### Choose Nuxt.js modules
```bash
? 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
```bash
? 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
```bash
? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA
```
テスティングフレームワークの選択。
今回は `None` を選択しました。

### Choose rendering mode
```bash
? 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
```bash
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
```
開発ツールの選択。
今回はチェックしませんでしたが、`Visual Studio Code` を使用する場合はチェック推奨とのこと。


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

## プロジェクトの起動確認

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

```bash
> 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/ にアクセスすると以下の画面が表示されます。
![localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/c25c7522-871e-35c2-95d3-ab2a7c4fa0f1.png)

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

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


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

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

![github.com_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/2e97bd8a-dada-e74b-b310-b59c38c2db32.png)

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



## リモートリポジトリへプッシュ
```bash
# プロジェクトディレクトリ内（本例では 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
```

![github.com_naente_tutorial-nuxt-netlify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/24bc0b7b-b3bc-bb06-97f1-009a590d3079.png)

GitHub ページに反映されていれば成功です。


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

無料の Starter プランでは **Basic 認証（Basic authentication headers）が利用できません**が
今回の目的は「とりあえず使ってみる」なので気にしません。

## GitHub との連携・デプロイ
![netlify01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/ad12cdce-e062-addb-605a-6dcd55a2126c.png)
**New site from Git** をクリック

![netlify02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/410f62e5-0513-8415-3ce7-93abfebdee09.png)
**GitHub** を選択

![netlify03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/8cf30028-03a2-1fae-4dd5-0e24a4d03144.png)
初回は GitHub への認証許可を求める画面が表示されるので **Authorize Netlify by Netlify** をクリック

![netlify04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/aa94116c-ad89-265c-60d6-6fa6e350e968.png)
Netlify からのアクセスを許可するリポジトリの設定
**Only select repositories** をチェックして、作成したリポジトリを選択、**Install** をクリック

![netlify05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/c7eefef5-1b65-b7e3-0f46-3bc9f82d599c.png)
追加されたリポジトリを選択

![netlify06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/7bd493ee-0617-3b99-cdfd-5364754274a9.png)
今回、Nuxt.js のレンダリングモードで Single Page App を選択していたので
Build command には `npm run build` 、Publish directory には `dist` と入力して **Deploy site** をクリック

参考
https://ja.nuxtjs.org/faq/netlify-deployment/

![netlify07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243093/191d0d5e-6f82-2a50-5cac-d4a1a59e969c.png)
デプロイが完了すると左上に URL が表示され、デプロイされた Web コンテンツの確認が可能

---

以降、カスタムドメイン（独自ドメイン）の設定や HTTPS の適用も可能ですが
今回は割愛します。