Nuxt.js(Vue.js) + Netlifyでポートフォリオ作成 (2020年度版)

キッカケは色々ググって見つけた記事 [Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門](https://qiita.com/isihigameKoudai/items/e3b136e9964f1d30d73d) から。

# やりたいこと（ざっくり）
- １日で出来るぐらいの粒度でパパッとアウトプットしたい
- ひとまず小難しいことは考えずほぼHTML/CSSで完結させたい
    - SCSSでglobal変数を扱いたい
- Nuxt.js選別理由としては主に２点
    - header / footerなど共通パーツはコンポーネント化して共通で呼び出したい
    - 制作物は量が多いので、JSONにデータ集約させてforループで表示させたい
    - （Nuxt以外にもNextなどいくらでも候補はありそうだが、個人的な使用経験により）
- ホスティングサービス候補は、Netlify※使用経験なし or GitHub Pages※[昔作ったことがある](https://sevensoundspace.github.io/)
    - Netlifyが簡単とよく見かけるので、お試し感覚で。

→ ちなみに作成したサイトは[こちら](https://s2-web-creation.netlify.com/)

## Nuxtインストール
※前提として、[npm vs yarnどっち使うかの話](https://qiita.com/jigengineer/items/c75ca9b8f0e9ce462e99)を踏まえてyarnで進めていきます。
※yarnのインストールまでは個々の環境差があるため省略しますmm

[Nuxt公式ドキュメント](https://ja.nuxtjs.org/guide/installation)より、今回は**create-nuxt-app**を使用していきます。

```
$ yarn create nuxt-app <project-name>
```

今回project-nameはs2-web-creationとしています。
ステップが進み、各種設定を入力するフェーズでは一例として以下としました。
※最小限のインストールであればすべてデフォルトで進めて問題ないそうです。
※後々の拡張を考えて、Typescript関連とTailwind CSS、あとLinterを導入した感じです。

```
✨  Generating Nuxt.js project in s2-web-creation
? Project name s2-web-creation
? Project description S2 Web Creation's portfolio and so on.
? Author name Seven Sound
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier, StyleLint
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
```

インストール完了後、

```
$ cd <project-name>
$ yarn dev
```

と打って`localhost:3000`にアクセスしてNuxtデフォルトページが表示されればOK。
確認できたら、このファイル`/pages/index.vue`の中身を一旦クリアして作りたい内容に書き換えていきます。

## SCSS準備
**SCSSでglobal変数を扱いたい**を実現するために、モジュール追加・設定追加しておきます。
参考：[nuxt.js で scss のグローバルな変数を使用する](https://matsuoshi.hatenablog.com/entry/2019/11/05/000000)
　　　[@nuxtjs/style-resources公式README](https://github.com/nuxt-community/style-resources-module) ではより多くの例も。

```
$ yarn add sass-loader node-sass
$ yarn add -D @nuxtjs/style-resources
```

でmodule追加して、SCSSファイル追加＋nuxt.config.jsに追記しておく。

``` js:nuxt.config.js
export default {
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      './assets/scss/vars/*.scss'   // <- scssファイルの置き場所によって調整
    ]
  }
}
```

## 準備ができたので実装開始
ここで説明することは脱線気味にもなるので、ピックアップで。

- font-familyについて面白い記事があり、~~パクら~~参考にさせてもらいました。 [font-familyについて本気で考えてみた](https://qiita.com/RinoTsuka/items/b30e03ce10aa38ac2a10)
- レスポンシブ対応するときのおすすめ [Sassの変数とmixinで変更に強いメディアクエリをつくる](https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html)
- worksのforループはこんな感じ
    - ついでに（？）h1要素のタイトルロゴも少し表現こだわったのでコンポーネント化したり

``` vue:works.vue
<template>
  <div>
    <titleLogo titleText="Works"></titleLogo>
    <ul class="workList mt-6">
      <li class="card" v-for="works in works" :key="works.name">
        <img class="cardImage" :src='"~/assets/images/works/" + works.name + ".jpg"' :alt="works.title" />
        <div class="cardText">
          <h2 class="workTitle">{{ works.title }}</h2>
          <p class="workDetail" v-html="works.detail"></p>
          <p class="date">date:<span class="dateTag">{{ works.date }}</span></p>
          <p class="link"><a :href="works.url" target="_blank">visit site ></a></p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import TitleLogo from '~/components/TitleLogo.vue'

export default Vue.extend({
  components: {
    TitleLogo
  },
  asyncData () {
    return {
      works: require(`~/assets/json/works.json`)
    }
  }
})
</script>
```

なお実装中の確認はすべて `yaml dev` からのlocalhost確認のみで進めました。
確認できたらgit pushしておきます。（ブランチ等は任意。 master以外でも可）

## Netlifyでホスティング
さて、実装も無事終わったのでgit pushした後、[Netlifyのページ](https://www.netlify.com/)でポチポチやっていきます。
詳しい流れは冒頭で紹介した記事がわかりやすかったので、[該当の項目](https://qiita.com/isihigameKoudai/items/e3b136e9964f1d30d73d#netlify%E8%A8%AD%E5%AE%9A)を参照していただければ。
今回、私はブランチをmasterではなく試しに`deploy/netlify`というブランチで運用してみたため、
デプロイ直前の設定画面では以下のようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349753/b0fe12ce-e11d-debd-1291-1d86db127240.png)

あとは**「Deploy site」**をポチーでサイトが公開できるなんて楽な時代だ… なんて思っていたら不測の事態が。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349753/6aeccc68-4527-b35e-dd31-c365535e81c0.png)

failedしとる～～～～～！！？
なんでやなんでや…と手探りで原因を探っていたところ行き当たったのがディレクトリ構成。
※ちなみに普通の構成ならfailedしないと思います。

今回、先を見据えてこのリポジトリをサンドボックス的な位置づけにしようと思ったので、とりあえず実装内容を`nuxt/`ディレクトリに移していたんですよね。
なのでデフォルトのままだと直下でgenerateしようとしてコケてたわけで。

というわけで引き続き以下の設定を追加して、無事に公開に至りました！
まず、failed画面の「Deploy settings」を選択すると、以下のように設定画面へ遷移します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349753/19dba33c-9590-4f77-8324-7186de1ff01d.png)

このBuild settings内にある**Base directory** に、今回構成変更した`nuxt`を設定すればOKです:+1:
（設定時に、Publish directoryも追従して書き換えてくれます）
Overviewに戻り、**1 Deploy your site** ！

### Site nameを変えておく
デプロイ完了後はサイトURLがデフォルトのランダムに割り当てられた文字列になっているため、
Settingsから**Site name**を好きなものに変更しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349753/5ae7de66-255a-bb3a-eb5a-8d72a0398284.png)

# 結局、1日で無事に公開に至った…！
実装中や、最後に書いたNetlifyの設定やらちょくちょく詰まったものの、ベース構築～デプロイ自体は本当に爆速で組めたので、
サーバーレスなものなら気軽にアウトプットできるなと改めて体感することができた。
（そもそもコンテンツ自体やレイアウトどうしよっかなーと考えていた時間の方がほとんどなので尚更）