ブログトップ

公開日:

更新日:

14 min read

技術革新

リダイレクト設定との死闘：Astroサイト移行の長い道のり

Astro リダイレクト設定 ウェブ開発 Cloudflare Pages トラブルシューティング SEO Google Search Console AI
リダイレクト設定との死闘：Astroサイト移行の長い道のりのイメージ

ウェブサイトを乱構築しました

ウェブサイトの構成を大きく変更した、つまり作り直した。それも4回くらい作り直した。冠動脈のダイレクトアナストモーシスに使う血管を全部使いきったような状況であった。

そもそも放置同様のウェブサイトを、サーバー代がもったいないので、コスト削減にサーバーを閉じた。数台の契約だったので、月々数千円になる。さらにドメインも手放した。

ウェブサイトの中にはコンテンツが1000件以上のものもあったが、4年以上新規の記事が無い。今は書く暇もない。そもそも以前は仕事で出張がなまら多かったので、その先々で食べたものを記事にしていたら3年で1000件くらい店を訪れていただけなのだ。それがコロナで旅行禁止、仕事を失って外食もできない。ハローワークに通ってもシニアには仕事もない。若い採用担当者の元へ時給800円の仕事を求めて面接に行くが、不採用。10件以上は応募した気がするが、いずれも書類選考で不採用だ。

いや、いろんな記事で厳しいきつい心が折れると知識としては知っていたが、実際に体験すると、自分が世界から拒絶されていると実感した。少なくとも地元に私は必要とされていないことは明白だ。

だからネットで東京に、海外に仕事を求めた。それが大正解だ。以後、地元では一切の経済活動をしないことを決意した。

シニアの就職活動は、この際どうでもいい。

構築して放置していたウェブサイトを、一度はGoogleサイトで作り直した。無料だし、目的は「ウェブサイトを閉じた」ことを知らせる1ページのみだからだ。しかしGoogleサイトではカスタムドメインの使用に制限がある。面倒くさいので再放置。

それを最近になってきっちりと構築した。

以前はWordPressを使っていた。この4年ほど仕事ではWordPressを使うのがメインだったが、日に日に不満が増してきた。プラグインや本体がバージョンアップすることで、思いがけない大問題が起きる。更新を忘れると、すぐさまにサイバー攻撃を受けて、システムが死んだり、サーバーが凍結されたりする。

いいところよりも悪いところばかりが目につき始めて、嫌気がさしていた。ホームページやブログ程度に動的サイトを使うのもどうなのかと思い始め、静的サイトジェネレーターを探し始めた。いろいろ試して性にあったのがAstroだったというわけさ、えへん。

ぐちゃぐちゃになったGoogle Search Console

そんな状況なので、サイトマップは何度も変わり、Google Search Consoleにはエラーが山積みだ。それを解消するために、リダイレクト設定を行った。 astroではルートディレクトリに_redirectsファイルを作成し、リダイレクト設定を行う。以下はそのファイルの内容だ。

   # 特定のディレクトリの404エラーをトップページに301リダイレクト
/adobexd/*  /  301
/author/*  /  301
/essay/*  /  301
/fx-ea/*  /  301
/it/*  /  301
/memories/*  /  301
/phishing-mails/*  /  301
/wordpress/*  /  301

# 特定の古いURLのリダイレクト
/blog/feeds/1647444686066217342/comments/default  /  301
/category/phishing-scams/  /  301
/category/memories/  /  301

しかし、さらにやっちまったのが、astroで構築したサイトも一度Google Search Consoleに登録してから、大きなディレクトリ構成の変更を行ってしまった。不慣れな頃はこんなことが起きる。また素直にテーマを使わずに、すぐにカスタマイズしようとする私の悪い性格が生産性を落としたと言えるだろう。

マニュアルを読む前に触ってしまう。それが私の悪い癖だ。そして、やっちまってからマニュアルを読むんだ。「最初にお読みください。」 うん、その通りだ。読んでおけばよかった。50歳を過ぎて理解した、人の話は素直に聞くものだ。

そんなわけでGoogle Search Consoleにはエラーが山積みだ。 リダイレクト設定で問題解決を図ることにする。問題なのは/blog/post/が/post/に移動している件だ。

リダイレクト設定の深淵

リダイレクト設定を行う方法をAIに問う。

Astroで_redirectsファイルを使用して指定のリダイレクトを設定する方法を説明します。

リダイレクトの設定方法

  1. プロジェクトのルートディレクトリに_redirectsファイルを作成します。

  2. _redirectsファイルに以下の内容を追加します:

   /blog/post/*  /post/:splat  301

この設定の説明:

  • /blog/post/*: リダイレクト元のパターン
  • /post/:splat: リダイレクト先のパターン
  • 301: HTTPステータスコード（恒久的リダイレクト）
  1. astro.config.mjsファイルで、_redirectsファイルが正しく公開ディレクトリにコピーされるように設定します:
   import { defineConfig } from 'astro/config'

export default defineConfig({
	// 他の設定...
	outDir: './dist',
	publicDir: './public'
})
  1. publicディレクトリに_redirectsファイルを配置します。

注意点

  • ワイルドカード*は、パスの任意の部分にマッチします。
  • :splatは、マッチした部分を新しいURLに転送します。
  • この設定により、https://flayd.jp/blog/post/any-pathはhttps://flayd.jp/post/any-pathにリダイレクトされます。

リダイレクトの動作を確認するには、サイトをデプロイして実際のホスティング環境でテストすることをお勧めします。

ふむ。言われた通りに設定する。だがしかし、/blog/post/005は/post/*/にリダイレクトされた上に404エラーになる。

なーぜーだー？？？？

AIの限界

AIとやり取りが続く。あれこれ試すが、全く効果が無い。そもそもAIの回答がおかしくなり始めた。 もうAIには頼れない。自分で解決するしかない。オーソドックスにGoogle検索をする。

え？

*は一度しか使えない？ _redirectsの最初に/*/を連発してるから、変数を使わないとダメなのか？

   /blog/post/:slug  /post/:slug  301

:の後は変数名になるようだ。これでリダイレクトが正常に動作するのか？_redirectsファイルを修正してデプロイしてみる。

変わらない…なぜだ？？？

しつこくAIに聞いてみる。

ご指摘ありがとうございます。おっしゃる通り、_redirectsファイルで複数のワイルドカード（*）を使用する場合、リダイレクトの順序と優先順位に注意する必要があります。以下のように設定を調整することで、より確実にリダイレクトを制御できます。 リダイレクト設定の改善

   # より具体的なリダイレクトを先に記述
/blog/post/*  /post/:splat  301

# より一般的なリダイレクトを後に記述
/pages/*  /  301

この設定では： /blog/post/_ のリダイレクトが先に評価されるため、このパターンにマッチするURLは正しく /post/ にリダイレクトされます。 その後、より一般的な /pages/_ のリダイレクトが評価されます。

先頭行に移動してみた。

まだダメだ。

もうAIには頼れない。自分で解決するしかないな、これは。私は毎日何度か、このようなAIの限界を感じる日々を送りながら、わびしい日々を過ごすのだった。こんな日々を積み重ねて死んでいくのかと思うと、目頭が熱くなる。

Cloudflareの謀略

Cloudflareのキャッシュが悪さをしているのか？Cloudflareのキャッシュをクリアしてみる…そんなものはない。Cloudflareのキャッシュは問題ない。ダッシュボードからClouflare Pagesを選択し、デプロイの”詳細を表示”をクリック、リダイレクトタブを選択すると、リダイレクト設定が表示される。_redirectsファイルの内容が正しく反映されている。

原点に戻ろう。そう、マニュアルを読むのだ！

Redirects https://developers.cloudflare.com/pages/configuration/redirects/

書いてあった。

FeatureSupportExampleNotes
SplatsYes/blog/* /posts/:splatRefer to Splats.

301がない！301がない！301がない！削除してデプロイ！

まだダメだ。

リダイレクト一つでこんなにも複雑なシステムが、この21世紀にあってよいものか？AIも役に立たない、この混とんとしたカオスな世界は、いったい俺に何をさせたいのか？世界中のエンジニアをどん底に落とすだけの、魔王の策略か？

落ち着け、深呼吸をしてアングリーコントロールだ。

原点に戻ろう。そう、マニュアルを読むのだ！

On matching, a splat (asterisk, *) will greedily match all characters. You may only include a single splat in the URL.

The matched value can be used in the redirect location with :splat.

うーん、特に問題なさそうである。プレースホルダーが使えるともかいてあるので、悪あがきでやってみる。

   /blog/post/:slug  /post/:slug

デプロイしてみる。

できない…orz

あきらめよう…

まとめ

数分後、ダメもとで試してみたら、見事に転送された！

？？？

何度か試して分かったこと。

  • /blog/post/005 は /post/005/ にリダイレクトされる。
  • /blog/post/005/ は /post/*/ にリダイレクトされて404エラーになる。

そこで、次のようにしてみた。

   # ブログをリダイレクト
/blog/post/:slug /post/:slug
/blog/post/:slug/:page /post/:slug/:page

デプロイしてみる。

できない…orz

今度こそ、あきらめよう…（涙）

Cloudflareのキャッシュクリア

ネットで散々検索したが、私のダッシュボード画面とネットの説明記事では、メニューが異なっていたので、あきらめていた。しかし、なにげにページを眺めていて見つけてしまった！！！

  • ダッシュボードの左側からWebサイト>Homeでウェブサイトを選択
  • 右側の「キャッシュの構成」をクリック
  • 「キャッシュをパージ」で「すべてパージ」を迷わずクリック

さらに「開発者モード」にしてみる。

だめだ…

ここでまた一つ、気づいた。

  • /blog/post/005 は /post/005/ にリダイレクトされる。
  • /blog/post/005/ は /post/*/ にリダイレクトされて404エラーになる。
  • /blog/post/005/index.html は /post/005/ にリダイレクトされる。

そこで、次のようにしてみた。

   # ブログをリダイレクト
/blog/post/:slug /post/:slug
/blog/post/:slug/:page /post/:slug/:page
/blog/post/* /post/:splats

だめだ。本当にあきらめた。それでも、なんとしてでも、エラーは直さなければならない。

原点回帰

結局、Google Search ConsoleからエラーになっているURLをエクスポートし、すべて一つずつredirectsファイルに記述した。昔なら秀丸マクロに頼るところだが、指示を書けばAIがきれいに処理してくれるので、己の手を汚す必要すらない。

テストする。うん、リダイレクトされた。Google Search Consoleで検査する。

Google Search Consoleの合格通知

疲れた。

急がば回れとは、言ったものだ…