Nuxt.jsとcontentfulとNetlifyで作るWebサイト

それぞれの良さをざっとまとめますね

Nuxt.js

普段めちゃめちゃ React.js x TypeScript でアプリケーション作るんですけど、こういう静的なテンプレートがほとんどのサイトは <template></template> で書ける方がいいかなと思って、Nuxt.jsにしました

この辺通りに進めれば、ベースのプロジェクトはさくっとできるので、最高

contentfulでNewsページのモデル設計をする

あるあるな構成

公開時間を設定したり、サムネイルの画像をアップロードしたり、Instagramから取ってきたりetc

そもそもcontentfulにどういうフォーマットあるの？

この辺までは自由に扱えます！！

Nuxt.js側でどうやってFetchしてくるの？

News一覧を取ってくるところだと、こんな感じで書いています！
contentfulのNewsデータをFetchしてくるところも、limitやorderのパラメーターがあるので柔軟にいけます！

<template lang="pug">
</template>
<script>
import { createClient } from "~/plugins/contentful.js"; // contentfulのplugin設定をする
const client = createClient();
export default {
  components: {},
  data() {
    return {
      currentPosts: []
    };
  },
  asyncData({ params }) {
    return client
      .getEntries({
        content_type: "news", // News一覧を
        order: "-fields.publishedAt", // 最新順で
        limit: 4 // 4件取ってくる
      })
      .then(entries => {
        return {
          currentPosts: entries.items
        };
      })
      .catch(error => {});
  },
  methods: {
  }
};
</script>
<style lang="stylus"></style>

動的にデータを入れてCMSもあって、API化させたい！みたいなときにcontentful使ってみるのはいかがでしょうか？

Netlify

(Netlifyってロゴは先頭小文字だし、サイト内は先頭大文字だし、正しい表記どっち？！？！？ってなりませんか、皆様)

なにができるかというと

• hosting
• build
• deploy

がベースで、
PullRequestがmasterにマージされれば、 build -> deploy まで走る仕組みとかはマジで改めて最高です

とはいえ、僕的には

• deploy preview
  • Pull Requestごとにプレビューリンクが発行されるからマージ前に皆がチェックできる
• Netlify Form
  • <form> を特に難しいことしなくてもメールに届くし、Slackにも届くし、各種webhookの対応できる

上記2つが「チームで開発する視点」だと非常に有効でした！！

deploy preview

(すでにマージされた事例で申し訳ないのですが)
ココ！ってなっているところをクリックすると、preview用のリンクが発行され、マージ前に皆で動作確認できた上でマージする運用がしやすくて、これもnetlifyにGitHubの設定の連携をするだけでうまく行ったのですごく良かったです

Netlify Form

一般的なformの構成に

<form>
  <!-- 入力項目 -->
  <input type="submit" />
</form>

これに

<form netlify>
  <!-- 入力項目 -->
  <input type="submit" />
</form>

netlify を <form> に入れるだけでform内のsubmit情報が全てNetlify側に吸い上げられる

Netlify側でformの入力項目が吸い上げられたら、あとはNetlify側でどこに飛ばすか(メールやSlack)を最後設定するだけで、
メールに飛んだり、Slackに飛んだりする

お問い合わせフォームをSlackとメールに飛ばす設定例

以下実用例コード(pugです)

form(
  name="contact" // Netlify formのデータのグルーピングに命名必須 
  @submit="checkForm" // 送信前チェック
  method="POST"
  action="/contact/accepted" // 送信完了後にどこのページに飛ぶか
  netlify // Netlify formを利用するにはこれを入れるだけ
)

チームで開発する上において

• 最初の仕組み(contentfulをFetchするところやNetlify form)だけ作ればエンジニアの手を借りずに(とはいえレビューとかはあるよ)、デザイナーが率先してサイトを更新 したり、 Pull Requestがマージされればそのまま本番反映される仕組み はエンジニア手離れできている and 改善サイクルが圧倒的に速いなと思っていてめちゃめちゃいいなと今のところチームで運用していても思う

最後に

色々開発/運用しているしているフェーズだが本構成でサイト作るのは良さそうだなという所感だったのでまとめてみました。
httpsの証明書あたりもNetlifyに寄せていたりしますが、本当は社内の証明書全てAWSのACMで管理しているのもあると、そちらに寄せたいなーとか思ったりなのですが、その辺の知見もまだない感じです！

nuxt.config.jsの設定周りの知見も少しずつ増えてきたので、手を動かしながらベストプラクティス探していこうと思います！