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フロントエンドエンジニア募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
UI/UX designer
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
株式会社SCOUTER's job postings
Anonymous
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
1 Likes
Anonymous
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
1 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more

Page top icon