Nuxt.js + Netlifyでポートフォリオを作った


## 技術選定

* Nuxt.js (Vue.js)

   最近Nuxt.jsに興味があり使っていて、手っ取り早くSPAのページを作りたかったことが採用理由です。
   Nuxt自体について詳しくは[こちら](https://ja.nuxtjs.org/)

* Netlify

  静的ホスティングサイト。
  今まではCircleCI + Firebase等を使っていたが、Netlifyは噂を聞くが、自分では今まで使ったことがなかったので今回採用してみました。
  [Netlify](https://www.netlify.com/)

## 開発環境

今回は下記環境で作業しました。

* OS: High Sierra (MacBook Pro)
* 開発ツール: Visual Studio Code

## プロジェクト作成

```bash
npx create-nuxt-app <project-name>
```

途中で色々聞かれますが、今回は下記のようにしました。

```bash
? Project name portfolio
? Project description portfolio
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name <username>
? Choose a package manager yarn
```

今回は「Universal」モードにしていますが、nuxt generateで静的ファイルを生成して、Netlifyに上げる想定です。

また、UIフレームワークはVuetifyを利用することにしました。

## 起動確認
```
cd portfolio
yarn run dev
```

UIフレームワークにvuetify指定した状態で、デフォルトのまま起動しようとするとprettierでエラーになるようなので修正します。(2019/1/1時点)

また、eslintと併用しているのと、コマンドラインで使えるように prettier-eslint と prettier-eslint-cli を入れます

```bash
yarn add -D prettier-eslint prettier-eslint-cli
```

## pretter-eslint実行

今回はエラーが出ていた layout/default.vue のみ修正しています

```bash
node_modules/.bin/prettier-eslint  layouts/default.vue --write
```

## 起動確認(2回目)

```bash
yarn run dev
```

http://localhost:3000/ にアクセスしてこんな感じで表示されれば成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/8f2810ed-96a7-4577-b49c-11ceb3423139.png)

## GitHubへPush

GitHubでポートフォリオ用のリポジトリを切って、pushします。

```bash
git init
git add .
git commit -m "first commit"
git remote add origin <gitのリポジトリURL>
git push origin master
```


## Netlifyにデプロイする

まず [Netlify](https://www.netlify.com/) にログインします。
ログインはGitHubのアカウントでできます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/43ce799d-e92a-bf31-8dda-a41afdfd5101.png)
New site from Git から新しくサイトを作ります

![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/1a96394e-06f0-2cb2-76f2-2c940773fdef.png)
「GitHub」を選択します

別ウィンドウでアクセス許可の画面が立ち上がるので「Authorize Netlify by Netlify」をクリックし、画面に従って設定していきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/99a20fef-0425-792b-1f11-dfaf49a532af.png)
Netlifyの画面に戻ってビルドを走らせるリポジトリを選択します。

次にビルドの設定を行っていきます。今回は下記のように設定。

|設定項目|設定値|
|---|---|
|Branch to deploy| master |
|Build Command| yarn generate |
|Publish directory| dist |

![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/966a59f0-c073-f132-9132-220ec72c4a97.png)

設定をしたら、「Deploy site」をクリックします。

ビルドが通れば、デプロイ完了となります。

デフォルトだとサブドメインがランダムに割り当てられてわかりにくいので、Domain Settingから subdomainは任意のものにできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/26690/ce5b0349-6faf-6626-83ed-a54b7eb7bf37.png)

この状態で、ビルドが完了すると、URLにアクセスして確認ができます。

## コーディング
デプロイまでの環境ができたのであとはひたすらコーディングです。
今回はポートフォリオを作りました。

作ったサイトはこちら
https://mintsu-portfolio.netlify.com/



## まとめ
Netlifyを使ってみての感想になります。

今までCircleCI + Firebaseでホスティングをしていたのですが、Netlifyを使うと、すべてNetlifyのUI上で設定が済むので非常に楽でした。

また、プロダクションブランチ以外に対しても、プルリクエストを出したブランチのプレビューも見ることができたりする点も良かったです。

単純に静的ファイルをデプロイしたいときはもちろん使えるのと、今回のようにnuxt generateした結果をデプロイしたいといった場合に、Netlify側でビルドしてくれるので非常に便利でした。

ただし、CIツールではないので、自動テスト、テストカバレッジ取得、デプロイなどビルドパイプラインをガッツリ作りたい場合にはやはりCIツールとの連携が必要になってくると思うので必要に応じて使い分けていきたいと思います