ロゴテキスト ロゴ

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

    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

    にします。

    NetlifyのBuild settings

    あとは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'
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。