NetlifyへNuxtで作ったサイトをデプロイ

簡易版Wordpressの感覚で、備忘録が一応完成

• Netlify
• nuxt
• contentful

Nuxt側での設定

各ページのルーティングを書き出すための設定

nuxt.config.jsに下記を追加

const client = contentful.createClient({
  space: config.CTF_SPACE_ID,
  accessToken: config.CTF_CDA_ACCESS_TOKEN
}) 

export default {
  
 // 省略
 
  generate: {
    routes () {
      return Promise.all([
        client.getEntries({
          'content_type': 'work'// Contentful側のテーブル
        }),
           client.getEntries({
          'content_type': 'tag'// Contentful側のテーブル
        })
      ]).then(([works,tags]) => {
       return [
       ...works.items.map(work => `work/${work.fields.slug}`),//＄（リンク先ルート）
       ...tags.items.map(tag => `tag/${tag.sys.id}`)//＄（リンク先ルート）
        ]
      })
    }
  },
  // ここまで追加

  build: {
  //省略

Githubのプライベートリポジトリにアップする

NetlifyとGithubの連携

Netlifyのサイト

Netlifyサイトで Githubのアカウントでサインイン後 Githubリポジトリが表示されるので、デプロイするリポジトリを選択

「Build command」は「npm run generate」
「Publish directory」は「dist」
に書き換えて 「Deploy site」をクリック

（余談）デプロイ失敗時など、Netlifyサイトでできること
Overview site settingsから、サイトの削除
左上deploysよりデプロイの状態確認ができる（ターミナルと同じように、エラーの確認ができる）

トリガーの設定（contentfulで投稿をデプロイなしで反映）

• Netlify側　左のメニューから「Build & deploy」をクリック 下へスクロールし、「Build hooks」でnameを決めて「Add build hook」をクリック
  表示された「https://api.netlify.com/build_hooks/～」 で始まるURLをコピー
• Contentfulのサイト「Settings」メニューから「Webhooks」
  「Details」に、先程のnameとURLを貼り付け
  「Triggers」で「Select specific triggering events」を選択し、「Entry」にチェックを入れ、右上のsaveで完了
  追記
  Netlifyのビルド時間制限(300分/月)が引っかかりそうなのでWebhooksを最小限に設定し直す
  取り敢えず、Entry（記事）とAssets（画像とか）をPublishしたときとUnpublishしたとき
  ContentTypeIDでフィルターをかけて様子見

Nuxtの更新

Git リポジトリの変更を検出すると、自動的にサイトを更新します。

git add .
git commit -m ‘コメント’
git push

でリポジトリに反映するだけです。