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

11517 ワード
Vue.js ポートフォリオ scss nuxt.js scss テキストリンク

キッカケは色々ググって見つけた記事 Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門 から。

やりたいこと（ざっくり）

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

→ ちなみに作成したサイトはこちら

Nuxtインストール

※前提として、npm vs yarnどっち使うかの話を踏まえてyarnで進めていきます。
※yarnのインストールまでは個々の環境差があるため省略しますmm

Nuxt公式ドキュメントより、今回は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 のグローバルな変数を使用する
　　　@nuxtjs/style-resources公式README ではより多くの例も。

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

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

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

準備ができたので実装開始

ここで説明することは脱線気味にもなるので、ピックアップで。

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のページでポチポチやっていきます。
詳しい流れは冒頭で紹介した記事がわかりやすかったので、該当の項目を参照していただければ。
今回、私はブランチをmasterではなく試しにdeploy/netlifyというブランチで運用してみたため、
デプロイ直前の設定画面では以下のようになりました。

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

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

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

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

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

Site nameを変えておく

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

結局、1日で無事に公開に至った…！

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