ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
  • 2022.01.08に公開
  • 2022.01.11に更新
  • ブログ構築TS
  • 5. Nuxt.js×Contentfulセットアップ
  • No.3 / 3

今回達成すること

開発環境に表示したContentfulのコンテンツをNetlifyにデプロイします。

本番環境でもContentfulが表示できているか確認します。

2022-01-09 12-56-47

scriptsコマンドを編集する

package.jsonscriptsを編集します。

デプロイ前には、必ずgenerateコマンドを実行します。

そこで、distディレクトリを削除するyarn rm:publish_dirコマンドをgenerateコマンドに移動します。

yarn rm:publish_dirコマンドは、distディレクトリがあるときのNuxtエラー対応として、この記事 #注意!! nuxt@2.15を使用している場合で追加しました。

package.json
{
  "scripts": {
    // yarn rm:publish_dirを追加
    // "generate": "nuxt generate",
    "generate": "yarn rm:publish_dir && nuxt generate",

    // yarn rm:publish_dirを削除
    // "netlify:deploy": "yarn rm:publish_dir && netlify deploy --build --prod --open"
    "netlify:deploy": "netlify deploy --build --prod --open"
  },
}

これで、デプロイ時もgenerate時も、コマンド実行前にdistディレクトリが削除できるようになりました。

Full staticモードのasyncDataを使ったデプロイの流れ

NuxtのモードがFull staticの場合、ContentfulへのAPIリクエストが行われるasyncData()メソッドは、generateコマンド実行時にリクエストが投げられます。

nuxt.config.js(Full staticモードの確認)
export default {
  ssr: true, // default: true
  target: 'static',
}

以下の流れでデプロイが行われます。

  1. % yarn generateコマンドの実行
  2. asyncData()からContentfulへAPIリクエスト
  3. API レスポンスのデータをNuxtのdata()メソッドにマージ
  4. data()を元にHTMLファイルを生成(ここにはCSSも含まれる)
  5. JSファイルの生成
  6. 生成したファイル群をNetlifyにデプロイ

Nuxt Full staticモードのasyncDataとfetchの挙動

Full staticモードのasyncData()fetch()メソッドは、generateコマンド実行時にサーバーサイドで実行され、本番環境では実行されません。

ですので、asyncData()fetch()には、genarateコマンド実行時に行う処理を記述します。

この挙動を知らないと、本番環境では動かないといった問題によくハマるので覚えていきましょう。

  • 開発環境 => サーバー・クライアント共に実行。

  • 本番環境 => generateコマンド時にサーバーサイドで実行。本番環境では実行されない。

    参考: Nuxt - Going Full Static

環境変数はNetlifyに登録しなくていいの?

環境変数はローカルの.envnetlify.tomlの値が参照されるので、本番サーバーに登録しなくて構いません。

これは、Netlifyへ手動デプロイをした場合の挙動です。

Netlifyの手動デプロイとは、

  • ローカルでgenerateし、
  • 生成したファイルをNetlifyにデプロイする手法です。

ちなみに、.envnetlify.tomlに同じ環境変数がある場合は、netlify.tomlが優先されます。

Netlifyにデプロイする

それではデプロイコマンドを実行しましょう。

% yarn netlify:deploy

本番環境でもContentfulのコンテンツを表示することができました。

2022-01-09 12-56-47

今回の作業は以上です。

GitHubにPushを行います。

% git commit -am "Edit package.json script command"
% git checkout master
% git merge <my branch name>
% git push

このチャプターまとめ

このContentfulセットアップのチャプターでは、以下3つの作業を行いました。

  1. contentfulモジュールのインストールとAPI Keyの登録
  2. Contentful API リクエストの実行
  3. デプロイし本番環境にContentfulのコンテンツを表示する(今ここ)

次回は?

次回からVuexとTypeScriptのセットアップに入ります。

asyncData()からのAPI リクエストを全てVuexに移動し、Store内でコンテンツを管理する設定を行います。また次回。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。