All Articles

gatsby+S3+cloud frontでSearch Consoleに記事登録

何が起きていたか

gatsby + S3 + cloud frontでブログ公開

以前の記事( gatsby+S3でブログを始める方法 )で書きましたが、 gatsbyでブログをはじめました! せっかくやるからにはGoogle Analyticsを使って、 どのくらい見てもらえるかモニタリングしようと思っていました。

search consoleでなぜか404

gatsby-plugin-gtagを使っていたためメインページの登録はすんなりとうまくいきました。 そしてはじめからsitemap.xmlも入っているので記事の登録も送信できました。 しかし数日後search consoleを確認してみると記事ページの登録がエラーに… 記事ページの方で404エラーが出ていました。 (記事のURL例https://blog.gogomethod.be/posts/20190202/) 実際に同じURLで記事ページに行こうとすると、 確かに一瞬エラーページに飛んでから記事ページに移ってそう。。。

原因について

cloud frontの設定

原因については

  • search consoleで404
  • curlコマンドで404
  • 一瞬404に移ってから記事に行く

おそらく以下の動き方をしているようだった

  1. urlからS3を見に行こうとしてファイルがなく404
  2. cloud frontで設定した404.htmlに移動
  3. gatsbyがよしなに記事ページのところに移動させている

alias的な使い方ができない

cloud frontの設定としては対応するS3のパスが見つからない場合、 404.htmlを報時する設定になっていた。 そのためパスが見つからない場合、 https://blog.gogomethod.be/posts/20190202/から https://blog.gogomethod.be/posts/20190202/index.htmlを見る設定にできないか探したが、 cloud frontの設定上aliasのような使い方はできないようだった。

力技でsitemap編集

結局cloud frontの設定は諦め、 sitemapのURLを変更することにした。 そのためgatsby-config.jsを以下のように書き換えた
元々の状態

{
    resolve: 'gatsby-plugin-sitemap',
    options: {
        query: `{{略}}`,
        output: '/sitemap.xml',
        serialize: ({ site, allSitePage }) => allSitePage.edges.map((edge) => ({
            url: site.siteMetadata.url + edge.node.path,
            changefreq: 'daily',
            priority: 0.7
        }))
    }
}

編集後

{
    resolve: 'gatsby-plugin-sitemap',
    options: {
        query: `{{略}}`,
        output: '/sitemap.xml',
        serialize: ({site, allSitePage}) => allSitePage.edges.map((edge) => {
            if (edge.node.path.slice( -1 ) === "/") {
                return {
                    url: site.siteMetadata.url + edge.node.path + "index.html",
                    changefreq: 'daily',
                    priority: 0.7
                }
            }else{
                return {
                    url: site.siteMetadata.url + edge.node.path + "/index.html",
                    changefreq: 'daily',
                    priority: 0.7
                }
            }
        })
    }   
}

また各ページのslugindex.htmlを加えた

---
title:...
slug: "/posts/20190213/index.html"
category: ...
---