.htaccessのできることについてまとめる。WordPressのサンプルも有

サーバーを触っているとなんども.htaccessの設定を行うのですが、毎回いろんなところから調べて設定をしなければならないので、自分なりに一度しっかりとまとめなければと思いました。

何ができるのかと、どんな設定があるのかをまとめていきます。またそれぞれのサンプルを載せておきます。最後にWordPressの設定も載せておきます。

とりあえず何ができるのか？

すごいざっくり書くとこんな感じです。

リダイレクト
デバイスの指定のリダイレクト
wwwの統一(URLの正規化)
ブラウザキャッシュ
404ページ設定
ベーシック認証
アクセス制限

もちろん他にもたくさんできることはあります。これらを解説していきます。

リダイレクト

301リダイレクトを行います。例えば、ブログを移転した際に、urlを新しくすると、seoなどはリセットされてしまいます。そのため、以前のURLが持っているSEOを引き継いで転送を行うことができます。

301とはこのアドレスは違うアドレスに移動しましたというエラーのことで、つまり違うアドレスだったので他のアドレスにリダイレクトさせますっていうのが301リダイレクトです。

「old.html」にアクセスがあった際に「http://sample.com/new.html」へ301リダイレクトさせる記述です。

RewriteEngine on
RewriteRule ^old.html$ http://sample.com/new.html [L,R=301]

新しいサイトと古いサイトの違いがドメインだけという場合は、

Redirect permanent / https://new.com/

こちらの設定でOKです。permanent(恒久的に)　、リダイレクトさせるという意味です。

デバイスの指定のリダイレクト

レスポンシブではなく、スマホとpcでサイトを分けている場合、

iPod|iPhone|iPad|Android|Windowsで閲覧した場合、ファイル名の前にsp/を付与するという場合。

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

spを含むURLをiPod|iPhone|iPad|Android|Windows以外で閲覧した場合は、URLからsp/を取り除くという設定です。

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

スマホからのアクセスを全てトップページにリダイレクトさせる場合。

RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/ [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ / [R]
RewriteBase /

wwwの統一(URLの正規化)

Google では同じドメインでも www の有無よってそれぞれを異なる Web サイトと認識してしまうため、両方の URL で同じコンテンツにアクセスすることができる場合は URL の正規化を行う必要があります。

wwwが有から無へ変更

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.sample\.com
RewriteRule ^(.*)$ https://smaple.com/$1 [R=301,L]

wwwが無から有へ変更

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(sample\.com)
RewriteRule ^(.*)$ http://www.sample.com/$1 [R=301,L]

ブラウザキャッシュ

Webサイトの高速化でよく使われます。表示スピードは SEO にも結構影響を与えるので、.htaccessでしっかり設定しておくのが大事です。

ExpiresDefaultで、デフォルトの期限切れ期日の計算アルゴリズムを設定することができます。以下はキャッシュの初期化、デフォルトの設定を1秒に設定した場合の例です。

ExpiresDefault "access plus 1 seconds"

個別の設定

png ファイルに対してキャッシュが破棄されるまで 1 週間の期限を設けた場合。以下のようになります。

ExpiresActive On
ExpiresByType image/png "access plus 1 weeks"

最初の"ExpiresActive On"というのはExpiresActiveを使います。ということなのでおまじなだと思っておきましょう。

上記の書き方は代替期間指定構文と呼ばれ、ExpiresByTypeとExpiresDefaultは、より読み易い構文を使って定義することができます。

本来は以下のような書き方をします。しかし、簡単に書くことができるので、一般的に使われているのは上記の書き方です。

ExpiresByType MIME-type <code>seconds

secondsには、期限切れの日時を秒数で設定します。

Cache-Control: max-age は期限切れの日時からリクエスト日時を引いたものを秒で表すことで生成されます。

期限切れの基準となる日時は、ファイルの最終更新日時か、ドキュメントへのアクセス日時です。どちらを使うかは<code>によって指定します。<code>には、MかAを指定できます。M はファイルの最終更新日時。Aはドキュメントへのアクセス日時になります。

ExpiresActive On
# gif 画像はアクセス日時から 1 ヶ月間有効にする
ExpiresByType image/gif A2592000
# HTML ドキュメントは最終更新日時から 1 週間有効にする
ExpiresByType text/html M604800

404ページ

エラーページをカスタマイズは"ErrorDocument" を利用することで、HTTPステータスコードに応じたページを返すことができます。httpステータスコードはこちらをご覧ください。

ErrorDocument 403 /403.html
ErrorDocument 404 /404.html
ErrorDocument 503 /503.html

このように設定することができます。

Basic認証

こちらのサイトを参考にしました。webサイトに必要最低限の認証設定をかける時に使うBasic認証にもhtaccessを使用します。

AuthUserfile /フルパス/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

AuthUserfile：認証に使用するユーザとパスワードの一覧が格納されている、テキストファイル名のこと。そのファイルまでの相対パスでも絶対パスを記載します。

AuthGroupfile：証認に使用するユーザグループの一覧が格納されている、テキストファイルの名のことで、そのファイルまでの相対パスまたは絶対パスを記載します。

AuthName：Basic認証などを行う際に出力される、ダイアログに表示されるメッセージを指定することができます。利用者がどのユーザ名とパスワードを入力すれば良いかを教えるために利用します。日本語も設定可能ですが、サーバやブラウザによって文字化けを起こす可能性があるため、半角英字で設定した方が無難です。また、メッセージにスペースが含まれる場合は " で囲む必要があります。

AuthType：ユーザー認証の種類を指定。Basic または Digest が使用可能。

require：認証されたユーザがリソースに対してアクセスできるかを制御。

アクセス制限

不正なアクセスを遮断したり海外からのアクセスを制限したりします。

DDos攻撃への対策でもアクセス制限が設定されています。

ドメイン：sample.com、IPアドレス：192.168.1.1 とします。

アクセスを制限する場合

order allow,deny
allow from all
deny from sample.com
deny from 192.168.1.1

アクセスを許可する場合

order deny,allow
deny from all
allow from sample.com
allow from 192.168.1.1

また、ファイル単体に対して指定することもできます。

sample.htmlというファイルにアクセスを許可する場合は、以下のようになります。

<files sample.html>
    order deny,allow
    deny from all
    allow from sample.com
    allow from 192.168.1.1
</files>

500エラーになったら

.htaccessを編集していて、500 Internal Server Errorになったらおそらく記述が間違っているので見直しましょう。.htaccessはサイトの閲覧全体に影響するので、必ずバックアップを取りましょう。その上で素早く対応することが必要です。

WordPressの.htaccessの設定

また設定を間違えると、理解していない場合、復旧が難しくなってしまうので、.htaccessの設定は必ずバックアップを取ってから行いましょう。一般向けと、上級者向けに分けて書きます。上級者向けはセキュリティに関しての設定です。

一般向け

以下を.htaccessの一番下にコピペしてください。

# gzipで圧縮して転送する
<ifModule mod_deflate.c>
<IfModule mod_filter.c>
# Mozilla4、IE7-8は正しく動作しないので制限をかける
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

#圧縮するコンテンツタイプを指定
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>
</ifModule>


<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

    # CSS
    ExpiresByType text/css                              "access plus 1 year"

    # RSS
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    # データはキャッシュさせない
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

    # Favicon
    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

    # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

    # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"

    # マニフェスト
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

    # 画像や動画
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    # Webフォント

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"

    # Other
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

</IfModule>

上級者向け

wordpressのセキュリティ的に、度々脆弱性が見つかることがあります。

よくある設定としては「サイトの管理画面へのアクセスを"自分"のみに限定し、それ以外は全て遮断する事」です。これにより、不正ログイン、改ざんなどを防ぐことができます。

your_global_IP_addressはアクセスを許可するグローバルIPアドレスです。適宜設定してください。

グローバルIPアドレスの調べ方

ルートディレクトリ直下の.htaccess

<Files wp-login.php>
Order deny,allow
Deny  from all
Allow from your_global_IP_address_1
Allow from your_global_IP_address_2
</Files>

wp-admin/以下の.htaccess

Order deny,allow
Deny  from all
Allow from your_global_IP_address_1
Allow from your_global_IP_address_2

サイトが国内のみを対象としている場合

自分のサイトが国内のみを対象としている場合、海外からのアクセスは必要ありません。

こちらにアクセスを制限する対象のIPアドレスがまとめっているhtaccessをダウンロードできるサイトがあります。そして、ダウンロードを行い設置してください。

以上です。

とりあえず何ができるのか？

リダイレクト

デバイスの指定のリダイレクト

wwwの統一(URLの正規化)

ブラウザキャッシュ

個別の設定

404ページ

Basic認証

アクセス制限

500エラーになったら

WordPressの.htaccessの設定

一般向け

上級者向け

サイトが国内のみを対象としている場合

関連記事

【レイアウト】React Native と Vue Native のスタイルを詳しく説明

【SPA】Laravel + Vue.js + JWT認証でメールアドレス送信を行い登録するまで part.1

【SPA】Laravel + Vue.js + JWT認証でメールアドレス送信を行い登録するまで part.2

【Service Worker】Laravel + vue のSPAサイトをPWA化させてWebPushまで実装

【サンプル付】Vue.jsでComponentを作成する！ 正しくpropsを使おう！

【10分】Vue Nativeでアプリにマップを表示させてマーカーを設置するまで。コピペで簡単

React Native ElementsをVue Nativeで使う場合に気をつけること

【サンプル付き】Vuetifyでログイン画面のテンプレートを作る

【サンプル付】Vue.jsでComponentを作成する！正しくpropsを使おう！