写真ブログの画像だけMixHostから別サーバー(スターサーバー)に移してみました

JR湖西線の車窓から(和邇~蓬莱)白鬚神社と琵琶湖

2017年9月4日(月)の午後より、画像だけを別サーバーに切り替えて運用中です。写真の読み込み速度はいかがでしょうか?

 

2007年12月に開設した当ブログ、今までに4600枚を超える画像(チラシ・キャプチャー含む)を掲載しています。2017年に入ったころからサイト表示が目に見えて遅くなったため、(特に画像を)エラーなく迅速に表示させる方法を試行錯誤してきました。

画像を圧縮したり、キャッシュ系のプラグインを併用したり、6月末にはSSL化に伴ってサーバーを移転しています(ファイアバード⇒MixHost)。

ところが、写真ブログだとどうも、安定しないことがあるようです・・・(移転後は時折エラーが出ていた模様・・・大変申し訳ないです!m(_ _)m)

 

そこでもうひとつ試してみたかったのは、画像だけを別のサーバーに移すことです。Yahoo!Japanなどのサイトでも行われている方法で、検索すると個人ブログで実施されているところもあるようです。

企業サイトを中心に行われていると思われるため、手順について掲載したサイトはあまりありませんでした。何かのご参考になればと備忘録を兼ねて残しておきます。

 

写真:「比良の暮雪5(琵琶湖の西、小野から近江高島へ。JR湖西線の車窓の風景と、近江の厳島「白鬚神社」)~白洲正子「近江山河抄」の舞台を歩く(40)」(2013年9月5日朝撮影)より、「JR湖西線の車窓から(和邇~蓬莱)」「白鬚神社と琵琶湖」

 

おおまかな流れ

1.別サーバー契約

2.画像用ドメインどうする?・・・別サーバーから提供されたサブドメインを使用


3.httpではマズイ・・・(当ブログは既にSSL化している=画像を呼び出す先はSSL化されたURLでないといけない)

SSL設定できる?・・・別サーバー提供のサブドメインでも設定できた!!

4.FTPソフトの設定(別サーバー試用期間中にメールで送られてきたFTP情報を入力)

5 .htaccess作成⇒画像用サーバー(別サーバー)にUP

# BEGIN
SetEnvIf REFERER "katata.info/" OK
Order Deny,Allow
Deny from all
Allow from env=OK
# END


6.robots.txt作成⇒画像用サーバーにUP

User-agent: *
Disallow: /

7.画像用サーバーに画像を入れる

8.現在のドメインから転送(現サーバーからリダイレクト

 

1.別サーバー契約

スターサーバー(スタンダードプラン)にしました。

当ブログは、WordPressに移行した2015年夏から約2年間、ネットオウルのファイアバードを使っていました(契約更新時を機に解約、MixHostへ)。

2017年8月にファイアバードが「スターサーバー(スタンダードプラン)」にリニューアルされ、無料SSL化対応・高速化したというので、申し込んでみました。

 

ちなみに当ブログは、WordPressフォルダの外に画像を置いています。画像用のサブドメイン(picture.example.info)を同じサーバーに置いて、そこから画像を読み込む形にしています。

当ブログの画像は全部で2GB程度ですが、一月当たりの画像転送量は30GB以上になります。全体で見ても、転送量の大半はご覧の通り画像です。これが9月末にはどうなるか、様子をみてみたいと思います。

tensoryo-201707-201709-1

当記事は「画像だけ別サーバー」にした話ですが・・・

場合によっては、今後スターサーバーに全部移行するかもしれません。7月にも書いたように、MixHostは時折不安定なので・・・画像中心のサイトの安定性はネットオウルが安心できるなあ・・・というのが、正直な感想です。(あくまで個人の感想です。)

※画像を多用するサイトとMixHostの相性については、2017年6月と8月の「もりべや」さんの記事でも言及されています。私も同じような感想を持っています。「もりべや」さんはエックスサーバーから移行されたようですね。

MixHost辛い・・・。サーバーがけっこう落ちますね|もりべや
稼働率99.99%を謳うMixHost。実際は想像以上にトラブルが多いです|もりべや

 

MixHostとスターサーバーは、ある意味対照的・補完的なサーバーです。費用・容量・CPUを考慮するならスターサーバーになるし、速さ(SSD)を考慮するならMixHostなので、今回は双方のサーバーの得意な分野を活かす構成です。

  • MixHost(エコノミー):6ヶ月契約 530円/月(税抜)・SSD ・容量10GB・仮想1コアCPU
  • MixHost(スタンダード):6ヶ月契約 1,080円/月(税抜)・SSD ・容量30GB・仮想2コアCPU
  • スターサーバー(スタンダード):6ヶ月契約 500円/月(税抜)・HDD・容量100GB・仮想2コア CPU→仮想 3コアCPU(2017/9/6~)

どちらのサーバーも、解約することなくコースを上げられる点(クラウド型)で共通しています。だからこの2つのサーバーを使っているんですけどね。

 

2.写真用ドメイン

ドメインを分ける話。参考になったのは、こちらの記事でした。

ヤフーでは、ページはyahoo.comやyahoo.co.jpのドメイン名に置いてありますが、画像ファイルはyimg.comやyimg.jpのドメイン名に置いてあります。これはなぜでしょうか?

それは、複数のドメイン名を使ったほうが、ブラウザが平行してデータをダウンロードできるからというのが1つの理由です。Webサーバーとブラウザの間の通信のルールで、同じサーバーに対する持続的な接続は同時に2つまでにすることが望ましいとされているのです。

もう1つの理由は不必要なクッキーによる通信量の増加を避けるためです。

ヤフーの画像はなぜyimg.jpドメインなのか? サイト高速化の手法とヤフーの失敗例|Web担当者フォーラム通信

じゃあ別ドメインを取得するかというと、今回は実験(トライアル)なので、どうしたものかな・・・と思っていたら、サーバー側でサブドメインを5つも提供してくれることに気が付き、利用することにしました。↓使ったサブドメインはこれです。
netowl-domein

 

3.httpではマズイ・・・⇒SSL設定できる?⇒できた!!

当ブログは既にSSL化しているため(https://で始まるサイト)、画像を呼び出す先はSSL化されたURLでないと画像が一切表示されません。・・・写真サイトではこれが一番恐ろしいのです。

そこで、ネットオウル提供のサブドメインでもSSL化できるか試してみました。

結論:ネットオウル提供のサブドメインでもSSL化できます。設定後約1時間以内にSSLが反映されました。⇒スターサーバーで無料の独自SSLを設定した手順(ネットオウル提供のサブドメインでも可能)

 

4.FTPソフトの設定

試用期間中にメールで送られてきたFTP情報を、FFFTP(FTPソフト)に入力するだけで設定終了です。

FTPソフトの設定等については、下記記事に掲載しています。
インストール方法(FFFTP、FileZilla)
設定方法(レンタルサーバー会社毎の情報)

 

5 .htaccess作成⇒画像用サーバーにUP

example.com(自分のサイト名)からの転送(リダイレクト)は許可し、それ以外のアクセスを禁じる設定です。以下の内容で.htaccessファイルを作成し、FTPソフトで画像用サーバーにアップロードします。

# BEGIN
SetEnvIf REFERER "example.com/" OK
Order Deny,Allow
Deny from all
Allow from env=OK
# END 

.htaccessの作成方法・FTPソフトの使い方については下記記事に掲載しています。
「.htaccess」とは
作成編集にはテキストエディタTeraPad
FFFTPの使い方(基本の使い方)

 

6.robots.txt作成⇒画像用サーバーにUP

以下の内容でrobots.txtを作成し、FTPソフトで画像用サーバーにアップロードします。他からの直リンクを禁止する設定です。

User-agent: *
Disallow: /

robots.txtの作成・設置方法については下記記事に掲載しています。
1.robots.txtの作成
2.robots.txtの設置方法

 

7.画像用サーバーに画像を入れる

筆者の場合は、現サーバーに画像用のサブドメイン(picture.example.info)を作って画像を入れていたので、画像用サーバーの画像用ドメイン(photo.example.com)には、まったく同じ階層構造でフォルダを作って、FTPソフトで画像を入れていきました。

2017という年別フォルダを作り、その中に月別で01というフォルダ、02というフォルダ・・・を作り、各フォルダの中に画像(***.jpg)を次々に入れていきます。

後はpicture.example.infoからphoto.example.comへ転送(リダイレクト)してやればいいだけです。

https://picture.example.info/2017/09/***.jpg

https://photo.example.com/2017/09/***.jpg

 

8.現在のドメインから転送

現ドメインから、画像用サーバーのドメイン(https://photo.example.com)へ転送(リダイレクト)しました。

◆MixHostの場合:cPanel⇒リダイレクト

転送元のURLを選択、転送先のURLを記載し、「ワイルドカードリダイレクト」にチェックを入れ、リダイレクトを「追加」。

※種類は一時的(302)ではなく、永続(301)を選択しました。Kenichi Suzukiさんの海外SEO情報ブログ「302リダイレクトって、いつ使うの?」によれば、

期間が1,2週間以内と決まっていれば302、それよりも長期に及ぶ可能性があるのならば301と考えてよさそうです。(中略) リダイレクトを使った不正が行われていることを考慮すると、301を利用した方がいいともtedster氏は付け加えています。

redirect-cpanel

転送元である現サーバーの.htaccessを見ると、以下のコードが追加されていました。
RewriteCond %{HTTP_HOST} ^picture\.example\.info$ [OR]
RewriteCond %{HTTP_HOST} ^www\.picture\.example\.info$
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^(.*)$ "https\:\/\/photo\.example\.com\/$1" [R=301,L]

海外サイトComodo entries added to htaccess | cPanel Forumsによれば、3行目から5行目はcPanel利用者特有のコードなので、必須ではないようです。また1行目と2行目はwwwの有る無しに関わらずリダイレクトさせる設定で、これも必須ではありません。

必要なのは最終行のRewriteRule ^(.*)$ "https\:\/\/photo\.example\.com\/$1" [R=301,L]です。

 

なお、技術者の方の記事「サーバーの負荷を下げるために.htaccessで画像ファイルを別サーバーへリダイレクトしてみる」によれば、現サーバーの.htaccessに次のように記述すればいいとあります。

例えば、
http://www.example.com/images/….jpgのように/images/のディレクトリに画像ファイルを集めている場合って多いですよね。

以下は、その/images/のディレクトリを丸ごとリダイレクトしてみましょう。
RewriteRule ^images/(.*)$ http://image.example.com/images/$1 [R=301,L]

 

WordPressメディアライブラリ画像の別サーバー化

海外のサイトを検索すると、この手の話がたくさん出てきます。https://gist.github.com/cyberhobo/8463033には次の記述がありました。

Redirect requests for WordPress uploads to the staging server (WP Engine or otherwise).

.htaccess

RewriteEngine on
RewriteRule ^wp-content/uploads/(.*)$ http://x.staging.wpengine.com/wp-content/uploads/$1 [L,R=301]

↑これってWordPressメディアライブラリのURLだよね?ということで、別サイトで試してみましたが、画像表示されませんでした。

通常WordPressの場合、画像が入っているURLは「メディアライブラリ」で確認するとこんな感じのはずです。

https://example.info/(WordPressをインストールしたフォルダ名)/wp-content/uploads/2017/09/***.jpg

ところがメディアライブラリの中の画像は、WordPressのデータベースに紐づけされているので、画像用サーバーに元々のサーバーと同じ階層構造でフォルダを作るだけではダメなようです。

これを解消すべく、色々な方法や専門的なやり方があるようです。参考になりそうな記事を最後に挙げておきますね。

◆Googleフォト(外部サービス)を使う方法
WordPressのブログの全画像をGoogleフォトから配信させるようにした|やわなべ.net

◆AmazonS3とプラグインを使う方法
S3 にメディアを自動アップロードするプラグイン「絡新婦」|dogmap.jp

◆画像専用サーバーにもWordPressをインストールして、プラグインで紐づけするという方法(Mac環境)
WordPressなどブログのサーバ負荷分散には、別に画像専用サーバを立てるのがオススメ。wayohoo.com

にほんブログ村 写真ブログ 地域の歴史文化写真へ にほんブログ村

滋賀県ランキング



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)