本番環境へデプロイする前にチェックしておきたい3つのこと

  • Web
  • NuxtJS

はじめに

Nuxt.js製サイトをデプロイする前にチェックしておいた方がよい点を3つ挙げてみようと思います。(内2つはWebサイト全般で言えることです)

内容はかなり基本的なことなのですが、ちゃんと設定していない方は面倒臭がらずに、設定・考慮しておきましょうといったものです。

  • sitemap.xml作ってる?
  • robots.txt作ってる?
  • generateプロパティの記述が動的ルーティングに対応している?

sitemap.xml

サイト内のページのURL一覧が記されたファイルです。(そのサイトのタウンページみたいなものと勝手に思っています😅)ユーザー向けではなく、クローラー向けのものです。必須ではないですが、SEO対策をする上では必要だと思います。

Nuxt.jsでは、nuxt generateコマンド実行時にファイルを生成してくれる@nuxtjs/sitemapモジュールがあります。これを利用しましょう!

まずはモジュールをインストールしましょう。

npm install @nuxtjs/sitemap

その後、nuxt.config.jsファイルに設定等を記述します。

// nuxt.config.js
export default {
  modules: ['@nuxtjs/sitemap'],
  // @nuxtjs/sitemap のカスタム設定
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    // 例えば、管理画面があるような場合は下記のように除外するのがベター(内容は仮です)
    exclude: ['/admin', '/user'],
    // ルートを設定
    // ルートが固定ならば、下記のように配列で定義すればよいです
    routes: ['/about', '/contact'],
    // 動的なルートが存在する場合は、APIで記事データを取得してパスを設定する方法を採りましょう
  }
}

nuxt generateコマンドを実行して、sitemap.xmlが生成されているか確認してみてください。

robots.txt

sitemap.xmlと同様にクローラー向けのファイルです。クローラーがアクセスしないURLを記述することができます。すなわち、検索エンジンのインデックスに登録するか否かを制御することができます。

robots.txt以外の制御方法としてはrobotsメタタグをページに含めることが挙げられます。詳細はrobots メタタグ、data-nosnippet、X-Robots-Tag の仕様をご覧ください。

こちらも必須ではないですが、Webサイトを運用する際には留意しておく必要があるので確認しておきましょう。

@nuxtjs/sitemapモジュールと同じようにrobots.txtを生成する@nuxtjs/robotsモジュールがありますので、こちらを利用してみましょう。

(モジュール使わずにrobots.txtを作って配置しても良い気もしますが...)

npm install @nuxtjs/robots

その後、nuxt.config.jsファイルに設定等を記述します。

// nuxt.config.js
export default {
  modules: ['@nuxtjs/robots'],
  // @nuxtjs/robots のカスタム設定
  robots: {
    UserAgent: '*',
    // クローリングしないパスを記述
    Disallow: '/preview',
    // sitemap.xmlのURLを記述
    Sitemap: 'https://example.com/sitemap.xml',
  }
}

いや〜、Webサイトを作ればOKってだけの話では無いですね。実装以外に、こういったクローラー向けの設定も考慮しないといけない点は少し面倒ですよね。業務では意識はしているんですが、個人用サイトとなると手を抜きがちなところでしょうか。

generateプロパティの記述が動的ルーティングに対応している?

何を言いたいかというと... Nuxt.jsのgenerateプロパティに動的なルーティングを追加するをご覧ください。丁寧に書かれており、自分が困った際は参考にさせていただきました。

Nuxt.jsのドキュメント(generate プロパティ)をちゃんと読んでいないのが悪かったです。公式のドキュメントに例も示してあるので参考になりました。

動的ルーティングのページ(本サイトで言えばブログ記事 /blog/{id})については、APIで記事データを取得してページ生成するように書き直すことで解決しました。🙌

おわりに

いかがでしたでしょうか。もしかしたら、本サイトが本番環境へデプロイした際はだいぶバタバタしたんじゃないかと思われるかもしれませんが.... それは半分正解です。😅クローラー向けの設定はバッチリでしたが、generateプロパティの件は盲点でした。よい経験にもなりました。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚