Nuxt Contentで作ったサイトをNetlifyにデプロイする

2020.11.13
Nuxt Contentで作ったサイトをNetlifyにデプロイする

Nuxt Contentで作ったサイトをNetlifyで公開します。

検証した環境

1 @nuxt/content 1.8.1

Nuxtのgenerate設定を追加

Nuxt Content公式に書かれている generate の設定を「nuxt.config.js」に追記
発展的な機能 - Nuxt Content

nuxt.config.js
export default {
・・・
  generate: {
    async routes() {
      const { $content } = require('@nuxt/content')
      const files = await $content().only(['path']).fetch()

      return files.map(file => (file.path === '/index' ? '/' : file.path))
    },
  },
}

generateを試す

追記した generate が実行出来るかを試します。

私は $yarn create nuxt-app <プロジェクト名> でサイトを生成した時(TypeScript版です)に以下の npm-scripts が登録されていました

package.json
{
  "scripts": {
    "generate": "nuxt-ts generate",
    "start": "nuxt-ts start",
    ・・・
  },
}

この generatestart を使います。

# distフォルダに書き出す
$ yarn run generate

# distフォルダの内容をローカルサーバで実行
$ yarn run start
=> localhost:3000 にアクセス

これで無事サイトが表示されればOK!

Netlifyの設定

GitHubやGitLab等のプロジェクトとNetlifyを連携します。
ここの手順はスキップします

NetlifyのBuild settings

  • Build command・・yarn run generate
  • publish directory・・dist

にします。

あとはmasterブランチにマージ等する事でNetlifyにデプロイされます。

(余談)Basic認証の設定

有料になってしまいますがBasic認証を設定する事も出来ます。



以下の記事はNext.jsとの連携ですが参考になるはずです



Nuxt Content版だとざっくり私は以下のような設定になりました

package.json
{
  "scripts": {
    "generate": "nuxt-ts generate",
    "start": "nuxt-ts start",
    "echo-netlify-basic-auth": "echo \"/*\\n  Basic-Auth: $BASIC_AUTH_ID:$BASIC_AUTH_PASSWORD\" > dist/_headers"
  },
}
netlify.toml
[context.production]
command = 'yarn run generate'
[context.develop]
command = 'yarn run generate && yarn run echo-netlify-basic-auth'
[context.deploy-preview]
command = 'yarn run generate && yarn run echo-netlify-basic-auth'

おすすめ