1
/
5

Nuxt.js+Contentful+NetlifyでサーバーレスなSPAサイトを作成する

こんにちは!

株式会社SCOUTER開発部フロントエンドエンジニアの佐藤(@r_sato1201)です

先日、社内でプログラミング歴が浅い社員対象の、初学者LT大会というものが開催されました。
LT大会の様子は後日このブログにて公開されると思いますが、
今回はそのLT大会で私が作成したものを、使った技術の紹介も含めて紹介したいと思います。

主にNuxtとNetlifyについて紹介します。

作成物

休日に活動しているバンドのHPを作成しました。


技術構成

Nuxt + Contentful + Netlify

この構成を選んだ理由は大きく2点あります。

HPの更新を誰でも更新できるようにしたかった

バンドHPでは主に、ライブ情報や発売したCDなどの情報を定期的に更新する必要があります。
その更新を、私以外のバンドメンバーでも更新できるようにしたかった為、CMS化することを考えました。
その中で、ContentfulはAPIファーストでコンテンツの作成・管理を簡単にできるので選択しました。

サーバーを自前で用意・運用したくなかった

上記の通りなのですが、サーバーを自前で運用するのはコストもかかりますし、知見もなかったので
静的サイトホスティングサービスであるNetlifyを選択しました。
GitHubリポジトリからwebhookを受け取ると自動でリポジトリをビルドやデプロイしてくれるので非常に便利なサービスです。

1.Nuxtでサイトの作成

Nuxtプロジェクト作成

yarn create nuxt-app <プロジェクト名>

まずは上記コマンドでNuxtプロジェクトを作成します。

layoutの作成

各ページ共通であるヘッダー、フッターをレイアウトテンプレートに記述しました。

default.vue

<template>
<div>
<Header/>
<nuxt/>
<Footer/>
</div>

</template>

<script>
import Header from '~/components/item/Header.vue'
import Footer from '~/components/item/Footer.vue'

export default {
components: {
Header,
Footer,
},
}
</script>

ヘッダー、フッター部分のコードは割愛します。

Contentfulの設定

Contentfulについて

Nuxtでプロジェクトを作り、外見をつくったら次はContentfulの設定です。
Contentfulはコンテンツを管理するためのREST APIを提供してくれます。


Contentfulの概念は上図のようになっています。
各々をイメージで説明すると

Space:コンテンツを管理する単位
ContentModel:データベースのテーブル定義のようなもので、テーブルのカラム定義を設定する場所Entry:ContentModelに定義したテーブルのデータ

となります。

Spaceの作成→ContentModelの作成→Entryの作成という順序でコンテンツを作成します。

次に、Contentfulを呼び出す用のプラグイン、contentful.jsを作成します

contentful.js

const contentful = require('contentful')

const config = {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN,
}

module.exports = {
createClient() {
return contentful.createClient(config)
},
}

次に、Contentfulと接続するためのAPI keyを取得し、接続設定を以下のように.env に記述します

.env

CTF_SPACE_ID="Your Space ID"
CTF_CDA_ACCESS_TOKEN="Your Access Token"
CTF_BLOG_POST_TYPE_ID="Your Post Type ID"

nuxt.config.jsにて先程.env に記述した内容をenvプロパティにて呼び出します。

nuxt.config.js

const config = require('./.contentful.json')

module.exports = {
// ...
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
}
// ...
}

最後に、Vueファイルを記述し記事を取得します。
asyncData内でContentfulから記事情報を取得し、Liveコンポーネントに渡しています。

※Vueファイルは分かりやすくするため、簡略化しています

pages/live/index.vue

<template>
<div class="container">
<live
v-for="post in posts"
:key="post.fields.slug"
:image="post.fields.image"
:title="post.fields.title"
:place="post.fields.place"
:fee="post.fields.fee"
/>
</div>
</template>

<script>
import Live from '~/components/Live'
import { createClient } from '~/plugins/contentful'

const client = createClient()
export default {
transition: 'slide-left',
components: {
Live,
},
asyncData({ env }) {
return client
.getEntries({
content_type: env.CTF_BLOG_POST_TYPE_ID,
order: '-fields.date',
})
.then(entries => {
return {
posts: entries.items,
}
})
.catch(console.error)
},
}
</script>

components/Live.vue

<template>
<div class="live-card">
<div class="live-card_image">
<img :src="image.fields.file.url">
</div>
<div class="live-card_contents">
<p class="live-card_title">{{ title }}</p>
<p class="live-card_place">{{ place }}</p>
<p class="live-card_fee">{{ fee }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
image: {
type: Object,
},
title: {
type: String,
},
place: {
type: String,
},
fee: {
type: String,
},
}
}

これでContentfulの設定は完了しました。

※詳しくは、Contentful公式ドキュメントに詳しく書かれているので参照して下さい。

Netlifyの設定

Netlify Formsについて

Netlifyを選んだ理由として、サーバーレスで実装できる以外にもフォームが簡単に実装できることが挙げられます。

HTMLの

タグの属性に

netlify

と追加で記述することで、そのフォームが動きます。
以下は公式ドキュメントの例です。

<form name="contact" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
<p>
<label>Your Email: <input type="email" name="email" /></label>
</p>
<p>
<label>Your Role: <select name="role[]" multiple>
<option value="leader">Leader</option>
<option value="follower">Follower</option>
</select></label>
</p>
<p>
<label>Message: <textarea name="message"></textarea></label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>

上記のように記述するだけで、NetlifyのFromページ上で送られた情報が確認できます。

サイトの作成

最後にNetlifyの設定について書きたいと思います。
「New Site From Git」を押下するとリポジトリ選択画面に移動するので、Nuxtプロジェクトをプッシュしたリポジトリを選択してください。


次に、デプロイするブランチを選択して下さい。
基本的にはmasterでいいと思います。


デプロイブランチを選択したら、ビルドの設定を行います。
今回は、Nuxtから静的サイトジェネレートするので nuxt generateと記述をします。

nuxt generate
によってdistディレクトリが生成されるので、Publish Directoryにはdistと記述します。


環境変数の設定

最後に環境変数の設定です。

.envに設定したContentfulのSpace ID
,Access Token
,Post Type ID を設定する必要があるので設定します。


サイトの公開

以上までで、設定は完了です。
Netlify上で、「Deploy Site」をクリックすることでサイトが公開されます。

まとめ

Nuxt+Contentful+Netlifyという構成で簡単にSPAサイトを作成することができました。
初学者でも非常に簡単に作成できるので非常にオススメの構成です。

今後は、現在作成途中のバンドHPを最後まで作り切ると共に
Contentful,Netlifyで出来ることに関してもっと理解を深めていきたいと考えています。

さいごに

現在、株式会社SCOUTERでは、エンジニア、デザイナーの募集をしております。

興味のある方は、是非下記からご応募お願い致します!


フロントエンドエンジニア
最新技術で成長業界の波に乗りたいVue.jsフロントエンドエンジニア募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
UI/UXデザイナー
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
株式会社ROXXでは一緒に働く仲間を募集しています
1 いいね!
1 いいね!
同じタグの記事
今週のランキング
株式会社ROXXからお誘い
この話題に共感したら、メンバーと話してみませんか?