今回達成すること
NuxtプロジェクトをNetlifyにデプロイし、本番環境にNuxtページを表示します。
本番環境の設定には、Netlifyが用意している設定ファイル
netlify.tomlとは?
netlify.tomlは、Netlifyがどのようにサイトを構築し、デプロイするかを指定する設定ファイルで、リダイレクト、ブランチやコンテキスト固有の設定などがあります。
netlify.tomlを作成する
Nuxtプロジェクトディレクリ直下に
ファイルの作成場所は、公式にあるようにルートディレクトリ直下に作成してください。
このファイルは通常サイトリポジトリのルートに保存されますが、...
引用: 同上
% touch netlify.toml
netlify.tomlにNuxtビルド設定を行う
Nuxtの場合、公開ディレクトリパスとデプロイ前に実行するコマンドを指定します。
netlify.toml
# Doc: https://docs.netlify.com/configure-builds/file-based-configuration/
# ビルド設定
[build]
# 公開ディレクトリ
publish = "dist"
# 実行コマンド(target: 'static')
command = "yarn generate"
publish... Netlifyにデプロイするディレクトリを指定する。command... デプロイ前に実行するコマンドを指定する。
Nuxtのデプロイコマンド
Nuxtのモードtarget: 'static'の場合、ビルドにはgenerateコマンドを実行します。
generateコマンドは、ビルド後の静的ファイルをdistディレクトリに吐き出します。
デプロイで行われる一連の流れ
上記Nuxtの挙動を加味すると、Netlifyへのデプロイの流れは以下のようになります。
% yarn netlify deploy --buildコマンドを実行- デプロイ前に
netlify.toml の[build]が実行される commandのyarn generateが実行される- Nuxtが静的ファイルを生成。distディレクトリに吐き出す
- Netlifyには
publishで指定したdistディレクトリをデプロイ - 本番環境にNuxtプロジェクトが表示される
Netlifyにデプロイを行う
それではデプロイを行います。
% yarn netlify deploy --build
...
Deploying to draft URL...
✔ Finished hashing 13 files
✔ CDN requesting 8 files
✔ Finished uploading 8 assets
✔ Deploy is live!
Logs: https://app.netlify.com/sites/demo-blog-v2/deploys/6...
Website Draft URL: https://6...--demo-blog-v2.netlify.app/
最初は確認用URLにデプロイされる
% netlify deployコマンドは、本番用URLの前に、まずDraft URLにデプロイされます。
表示されたWebsite Draft URLをブラウザから確認してみてください。
開発環境と同じHTMLが本番環境に表示されています。
本番用URLにデプロイする
それでは本番用URLにデプロイするために、prodフラグをつけて再度実行します。
% yarn netlify deploy --prod
...
Website URL: https://demo-blog-v2.netlify.app
今度は本番用URLのWebsite URLが表示されました。
ブラウザで本番用URLを確認しよう
ブラウザで確認してみましょう。
% yarn netlify open:site
OK。本番用URLにNuxtがデプロイできました。
デプロイコマンドをスクリプトで簡略化する
デプロイ手順を省略するために、
package.json
{
"scripts": {
"netlify": "netlify",
// 一番下に追加
"netlify:deploy": "netlify deploy --build --prod --open"
},
}
--buildフラグ ... デプロイ前にビルドコマンドを実行する。--prodフラグ ... 本番用URLにデプロイする。--openフラグ ... デプロイ後にサイトをオープンする。
注意!! nuxt@2.15を使用している場合
Nuxt.jsのバージョンは
% yarn list --pattern nuxtで確認できます。
nuxt@2.15は、generateコマンドやdevコマンドが不安定です。
具体的には、distディレクトリが存在するとnuxt geterateやnuxt処理が途中で止まってしまいます。
そこで、コマンド前にdistディレクトリを削除するようにスクリプトコマンドを変更します。
distディレクトリがある状態で、
yarn generateコマンドが正常動作するのであれば、無理に設定しなくて構いません。
package.json
{
"name": "demo_blog_v2",
"version": "1.0.0",
"private": true,
// 追加
"config": {
"publish_dir": "dist"
},
"scripts": {
// 追加
"rm:publish_dir": "rm -rf $npm_package_config_publish_dir",
// 書き換え
"dev": "yarn rm:publish_dir && nuxt",
// 追加
"netlify:deploy": "yarn rm:publish_dir && netlify deploy --build --prod --open"
},
}
デプロイ用スクリプトコマンドの挙動を確認する
それでは、
pages/index.vue
<!-- 追加 -->
<p>
netlify:deployコマンド正常稼働のテスト
</p>
</v-container>
</div>
</template>
追加したデプロイコマンドを実行しましょう。
% yarn netlify:deploy
OK。自動でブラウザが開きましたね。
Netlifyの手動デプロイの特性
お気づきの通り、Netlifyの手動デプロイは、ローカルのGitと全く連携していません。
ローカルファイルの現状をそのままデプロイする手法となります。
今回の作業は以上です。
ブランチをマージして、GitHubにPushします。
% git add -A
% git commit -m "Add netlify.toml" -m "Finished first deploy"
% git checkout master
% git merge <ブランチ名>
% git push
次回は?
Contentfulのセットアップを行いましょう。
まずはブラウザの作業です。いよいよブログの下準備の第一歩です。