今回達成すること
開発環境に表示したContentfulのコンテンツをNetlifyにデプロイします。
本番環境でもContentfulが表示できているか確認します。
scriptsコマンドを編集する
scriptsを編集します。
デプロイ前には、必ず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',
}
以下の流れでデプロイが行われます。
% yarn generateコマンドの実行asyncData()からContentfulへAPIリクエスト- API レスポンスのデータをNuxtの
data()メソッドにマージ data()を元にHTMLファイルを生成（ここにはCSSも含まれる）- JSファイルの生成
- 生成したファイル群をNetlifyにデプロイ
Nuxt Full staticモードのasyncDataとfetchの挙動
Full staticモードのasyncData()とfetch()メソッドは、generateコマンド実行時にサーバーサイドで実行され、本番環境では実行されません。
ですので、asyncData()とfetch()には、genarateコマンド実行時に行う処理を記述します。
この挙動を知らないと、本番環境では動かないといった問題によくハマるので覚えていきましょう。
-
開発環境 => サーバー・クライアント共に実行。
-
本番環境 =>
generateコマンド時にサーバーサイドで実行。本番環境では実行されない。
環境変数はNetlifyに登録しなくていいの?
環境変数はローカルの
これは、Netlifyへ手動デプロイをした場合の挙動です。
Netlifyの手動デプロイとは、
- ローカルで
generateし、 - 生成したファイルをNetlifyにデプロイする手法です。
ちなみに、
Netlifyにデプロイする
それではデプロイコマンドを実行しましょう。
% yarn netlify:deploy
本番環境でもContentfulのコンテンツを表示することができました。
今回の作業は以上です。
GitHubにPushを行います。
% git commit -am "Edit package.json script command"
% git checkout master
% git merge <my branch name>
% git push
このチャプターまとめ
このContentfulセットアップのチャプターでは、以下3つの作業を行いました。
contentfulモジュールのインストールとAPI Keyの登録- Contentful API リクエストの実行
- デプロイし本番環境にContentfulのコンテンツを表示する（今ここ）
次回は?
次回からVuexとTypeScriptのセットアップに入ります。
asyncData()からのAPI リクエストを全てVuexに移動し、Store内でコンテンツを管理する設定を行います。また次回。