netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
  • 2021.12.31に公開
  • ブログ構築TS
  • 3. NetlifyCLIを使ったNuxtデプロイ
  • No.2 / 2

今回達成すること

NuxtプロジェクトをNetlifyにデプロイし、本番環境にNuxtページを表示します。

本番環境の設定には、Netlifyが用意している設定ファイルnetlify.tomlを使用します。

2021-12-31 23-22-15

netlify.tomlとは?

netlify.tomlとは、Netlify環境設定を行うファイルとなります。

netlify.tomlは、Netlifyがどのようにサイトを構築し、デプロイするかを指定する設定ファイルで、リダイレクト、ブランチやコンテキスト固有の設定などがあります。

引用: File-based configuration | Netlify Docs

netlify.tomlを作成する

Nuxtプロジェクトディレクリ直下にnetlify.tomlを作成します。

ファイルの作成場所は、公式にあるようにルートディレクトリ直下に作成してください。

このファイルは通常サイトリポジトリのルートに保存されますが、...

引用: 同上

% touch netlify.toml

netlify.tomlにNuxtビルド設定を行う

netlify.tomlのビルド設定には、本番環境にデプロイする前に実行する処理を記述します。

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ディレクトリに吐き出します。

参考: Commands and Deployment - Nuxt

デプロイで行われる一連の流れ

上記Nuxtの挙動を加味すると、Netlifyへのデプロイの流れは以下のようになります。

  1. % yarn netlify deploy --buildコマンドを実行
  2. デプロイ前にnetlify.toml[build]が実行される
  3. commandyarn generateが実行される
  4. Nuxtが静的ファイルを生成。distディレクトリに吐き出す
  5. Netlifyにはpublishで指定したdistディレクトリをデプロイ
  6. 本番環境に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をブラウザから確認してみてください。

2021-12-31 17-17-31

開発環境と同じ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がデプロイできました。

2021-12-31 17-24-44

デプロイコマンドをスクリプトで簡略化する

デプロイ手順を省略するために、package.jsonに、デプロイ用スクリプトコマンドを追加します。

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"
  },
}

デプロイ用スクリプトコマンドの挙動を確認する

それでは、index.vueに適当な文字列を追加して、

pages/index.vue
      <!-- 追加 -->
      <p>
        netlify:deployコマンド正常稼働のテスト
      </p>
    </v-container>
  </div>
</template>

追加したデプロイコマンドを実行しましょう。

% yarn netlify:deploy

OK。自動でブラウザが開きましたね。

2021-12-31 23-22-15

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のセットアップを行いましょう。

まずはブラウザの作業です。いよいよブログの下準備の第一歩です。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築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制作のご依頼は下記メールアドレスまでお送りください。