Home JavaScript Greasemonkey PHP

このドメインで使っている静的ファイルのホスト先を別ドメインに移行した話2016-08-05


1つ前のポスト、このブログを CentOS + apache + mod_php + MySQL から GAE/php に移行した話の続きの話です。

静的ファイルを別サーバでホストする

前回まででいったん新しい WP で元々のデータが表示できるようになったものの、静的ファイルのリンクがことごとく切れている状況でした。というのも、元々 WP でブログを作っている時に、WP の作法でファイルをアップロードする代わりに、好き勝手に色んなファイルをアップロードし、好き勝手に色々読み込むというのをやっていたのが主だった理由でした。簡単に言うと、/js/ とか /css/ とか以下に色々静的ファイルを置いて、それを適当に読んでた、という事です。

この自由度 -- 好き勝手にアップロードして好き勝手に読み込む -- はキープしたまま、WP の移行をしたかったのと、いつか静的ファイルだけ別のホストに置いてサイトの表示スピードを向上させたいと思い続けていたのとがあったので、これを機に静的ファイル用に別ドメインを用意することにしました。そこで移行手順として下記の手順を実施しました。
  • 新しいドメイン (s.otchy.net) を用意する
    • ご多分に漏れずこれも GAE
  • 既存のサーバにある静的ファイルを同じパスで s.otchy.net にコピーする
  • 既存のサイトで例えば /js/script.js となっている HTML 内の記述を /wp/js/script.js という風に書き換える
    • ほぼほぼマニュアル操作 (面倒!)
  • これだけで (旧サーバ上の) サイトの表示速度が改善したのを確認しニンマリする
    • 主要なページなど見て回り、致命的な問題がないことを確認
  • 既存サイトで js だったディレクトリを deprecated-js にリネームする (その他 css 等も同様)
  • 数日間ログを監視し、404 が頻発してないか見てみる
    • 見つけた問題は都度解消
  • 旧 WP から新 WP への移行 (前回ポスト参照) をもう1回やる
この作業が終わった時点で、新 WP でも手動で静的にアップしてたファイルのリンク切れはなくなって、新 WP の状況はだいぶ改善しました。ところが、WP のお作法に沿ってアップした画像ファイルなども、実はブログ開始当初の数年間分存在していて、そっちは相変わらずリンク切れのままでした。

このファイル、通常ですと WP をインストールしたディレクトリ以下の決まった場所に保存されるのですが、実際にその場所にファイルを手動でアップしたとしても正しく表示することが出来ません。というのも、WP を GAE 上で動かすようにしているプラグインが、そのディレクトリへのアクセスをフックして、本来のパスとは異なる場所にあるファイルを探しに行くからです。前述のように、GAE ではウェブサーバインスタンスからその同じインスタンス内にファイルを保存することが出来ず、代わりに何らか別のストレージに保存する必要があるためです。

結局元々 WP のディレクトリ以下に保存されていたファイルも、s.otchy.net 以下の特定のディレクトリに保存し直して、MySQL 上に保存されているパスの置換をする事でこの問題も解決しました。今後 WP 内にファイルをアップすることをせず、全部 s.otchy.net に寄せていくことでスッキリした世界観になるかなと思っています。

GAE/py をただの静的ファイルのホスト先として利用する

ところで、s.otchy.net の実際の構成はどのようになっているのでしょう。単に静的ファイルがホストできればいいので、究極ウェブサーバを名乗れるようなものなら何でも良かったのですが、うちみたいな弱小サイトだったら、メンテナンスフリーだし、タダだし、無料だし、お金がかからないので、GAE 一択ですね、そうですね。

とは言えウェブ "アプリケーション" サーバではあるわけで、GAE/py を以下のように設定して使ってます。

app.yaml
application: ********
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /img
  static_dir: img
- url: /css
  static_dir: css
- url: /js
  static_dir: js
:
:
:
- url: .*
  script: main.app

libraries:
- name: webapp2
  version: latest
- name: jinja2
  version: latest
main.py
import webapp2
import handler
from webapp2_extras import routes

app = webapp2.WSGIApplication([
    routes.DomainRoute('********.appspot.com', [
        routes.RedirectRoute('/', redirect_to='http://s.otchy.net', schemes=['http'])
    ]),
    ('/', handler.IndexHandler)
], debug=True)
app.yaml に関しては、特定のディレクトリ以下で静的ファイルをそのまま返せ、と言っているだけなので特に面白いところはありませんが、ポイントは main.py の方です。全ての GAE アプリは自動的に <application-id>.appspot.com というドメインを持つのですが、s.otchy.net でも appspot.com でもアクセス可能なままにしてしまうと、論理的には重複コンテンツになってしまい望ましくないので、そういったときはリダイレクトするようにしています。またこのリダイレクト自体は GAE/py 標準ウェブフレームワークの webapp2 でルーティングを記述して実現しています。

ただし、現状、css とか js には適用されてません。というか、SEO 目的とか考えても css/js が重複したところでさしたるデメリットはありません。実はこれ、元々はちゃんと HTML を動的に返す何かを書くときのために用意していたものになります。後述しますが、今回のサーバ移行作業で新しく立ち上げたドメインは s.otchy.net だけでなく、他にも複数立ち上げています。複数回同じ事をする時は、当然何かしら自動化しますよね?そうですよね?

何度も GAE/py のサイトを立ち上げるのに、マニュアル作業は極力減らしたかったので、そういうスクリプトを用意しました。自分用テンプレから簡単なスクリプトでスケルトンを作ってくれるようなやつです。テンプレの中には app.yaml や main.py を含む複数のファイルが入っていて、GAE のアプリケーション ID や動かす予定のドメイン名がプレースホルダになってます。そして、その初期化スクリプトを叩くときに今から作りたいドメインを引数として渡すと、いい感じにプレースホルダを置換しつつ、新しいディレクトリにファイルをコピーしてくれます。いいですね。楽をするための努力は惜しまない姿勢は忘れずにいたいです。

さて、このスクリプトが大活躍する話は、また次のポストにまとめます。

カテゴリ: Development タグ: gae