Nuxt+Netlifyでサイトを公開してみた！

レガシーエンジニアがモダンなエンジニアになるべく試行錯誤している中の一つのチャレンジです。
最近Vue.js、Nuxt.jsの沼に引き込まれ猛烈に取り組んでいます。

今回は初めてポートフォリオサイトの作成にNuxt.jsを使ってみました。
完成版は以下です。（しょぼいですが、というか内容無いですが是非覗いてみてください。）

https://objective-shockley-4532ee.netlify.com/

ということでさっそくプロジェクト作成～サイト公開までの流れを纏めていきます。

# 開発環境
このような開発環境で作業しました。
・MacBook Pro 10.13.4
・VsCode

# プロジェクトの作成
適当にworkspaceのフォルダを作成してそこで以下のコマンドを実行します。
初めての私は公式サイトの通りにこのテンプレートを使用しました。

```Console
vue init nuxt-community/starter-template <project-name>
```

先ほど作成したworkspaceにいろんなソースが展開されると思うので
とりあえずパッケージのインストールを行います。

```Console
yarn
```

パッケージのインストールが完了したらもうサイトを見れる状態となるので、
以下のコマンドで起動してみます。

```Console
yarn dev
```

これだけでサイトができました！
なんか楽しいな（漠然と）とわくわくモードで手が止まりません。
ここまでは[Nuxtの公式サイト](https://ja.nuxtjs.org/)の内容と変わりありません。

# ヘッダーとフッターの作成
今回は1ページだけのページ遷移のないサイトにします。

## CSSフレームワークの導入
導入するほど凝ったサイトになってないですが、勉強のためBulmaを使ってみました。
アイコンはFontAwesome5を利用します。
BulmaはNuxtコミュニティで公開されていますので`yarn add`で追加します。

```Console
yarn add bulma
```

追加されたbulmaを`nuxt.config.js`にcss設定に追加します。

```javascript:nuxt.config.js
modules: [
    '@nuxtjs/bulma'
],
```

FontAwesome5のインストールとCSSへの設定を追加します。

```Console
yarn add @fortawesome/fontawesome-free-webfonts
```
```javascript:nuxt.config.js
css: [
    '@fortawesome/fontawesome-free-webfonts',
    '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
    '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
    '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],
```

## 共通レイアウトの定義
共通のレイアウトはlayouts ディレクトリにファイルをいれます。
ヘッダーとフッターをcomponentsとして作成します。

このフォルダの中に`.vue`ファイルを作成
components
┣Header.vue
┗Footer.vue

ヘッダーのテンプレートとレイアウトを記載します。

```Vue:Header.vue
<template>
  <div class="main-back-img">
    <section class="hero is-fullheight">
      <div class="hero-body">
        <div class="container">
          <h1 class="title has-text-white-ter">
            _neekoko hoge hoge
          </h1>
          <h3 class="subtitle has-text-grey-lighter">
            渋谷で働くWebエンジニア。猫とコーヒーがあればなんとかなります----->
          </h3>
        </div>
      </div>
    </section>
  </div>
</template>

<style>
  .main-back-img {
    background-size: cover;
    background-image: url('~/assets/back-img.jpg');
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    height: 600px;
  }
  .main-back-img::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
  }
  .header-img {
    border-radius: 50%
  }
</style>
```
ヘッダーファイルが出来上がったら、`defalut.vue`で呼び出します。
デフォルトレイアウトで呼び出すことによってメインのレイアウトの拡張が簡単にできます。
レイアウトを作成するときは、必ず `<nuxt/>` コンポーネントを入れなければなりません。

```Vue:defalut.vue
<template>
  <div>
    <Header/>
    <nuxt/>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
export default {
  components: {
    Header
  }
}
</script>
```

同じ要領で`Footer`も作成します。
この状態で画面で確認するとメインコンテンツはテンプレでヘッダーとフッターは自身で作成した
ものが適用されているかと思います。

# 作成したサイトの公開
メインコンテンツの内容は省略して公開方法について記載して行きます。
今回サイトの公開に利用したのは`netlify`です。
高機能なホスティングサービスですが詳細は[公式](https://www.netlify.com/)を参照してください。

## GitHubにリポジトリを作成
ローカルで開発していたプロジェクトをリモートにpushします。

## netlifyでサイトの作成
`New site from Git`ボタンを押下するとサイトの作成ができます。

<img width="388" alt="スクリーンショット 2018-06-04 22.31.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/161401/354be5dd-c73a-2e20-a8a9-4d6ab42ac912.png">

`Build command`にはビルド時に実行されるコマンドを設定します。

```Console
yarn generate
```

`Publish directory`には公開時のフォルダを設定します。

```Console
dist
```

<img width="720" alt="スクリーンショット 2018-06-04 20.51.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/161401/dac2220b-65cf-bd3c-b2ba-e3d8687b620b.png">

ここまで設定が完了したら公開ボタンを押下しましょう。
数分したらサイトが公開できているかと思います。

# その他
Nuxtではpwaが簡単に実装できるらしいので試してみました。
pwaする前のLighthouseの結果をエクスポートするの忘れてたので対応後のものだけ貼っときます。

## pwaパッケージのインストール

```Console
yarn add @nuxtjs/pwa
```

## モジュールの追記＆staticフォルダにアイコンの追加

```javascript:nuxt.config.js
modules: [
    '@nuxtjs/bulma',
    '@nuxtjs/pwa' /* ←を追加 */
],
```
staticフォルダにアイコンを追加します。（icon.png）

## .gitignoreの編集
以下を追加します。

```
sw.*
```

これで完了です！簡単！！
再度GitHubにpushするとビルドとデプロイが行われます。

再度計測してみると以下のような結果でした。
<img width="859" alt="スクリーンショット 2018-06-04 22.57.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/161401/91d04346-1602-a2c7-ed11-6f9c752e5265.png">

# まとめ
Nuxtを使ってサイト作成するミッションをクリアできました。
今回は簡単な静的サイトだったので次回はSSRさせてアプリケーションの作成にも挑戦してみたいです。
vueとnuxtイイね！！

# お世話になったサイト
お世話になったサイトになります。大変分かりやすく記載されていて助かりました。
ありがとうございました。

・[Nuxt tech book](https://potato4d.booth.pm/)
・[Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す](https://razokulover.hateblo.jp/entry/2018/05/02/175235)