WordPressのサブディレクトリでVueアプリを動かす

このサイト(chmono.com)ではメルカリ計算機というVueアプリを公開しています。このVueアプリはVue Routerを使い、Vue Routerはhistoryモードで動作しており、WordPress以下に配置しています。

メルカリ計算機

メルカリやラクマでの利益を計算します。配送サービスの検索もできます。

この記事ではWordPress以下にhistoryモードのVueアプリを配置するために必要な作業をまとめました。

ディレクトリの作成
Vueアプリをhistoryモードに
404 NOT FOUNDの解決

ディレクトリの作成

FTPソフトなどでWordPressのディレクトリの中にアプリ用のディレクトリを作ります。

作成したディレクトリの名前がURLの一部になります。ディレクトリの名前をmercari_calcにした場合は https://chmono.com/mercari_calc/ になります。

以下、作成するディレクトリ名を上記のアプリと同じ mercari_calc として説明を進めていきます。実際に作業するときは作成したディレクトリ名を指定してください。

hashモードで動かすにはこの作成したディレクトリにファイルをアップロードするだけです。

Vueアプリをhistoryモードに

Vue Routerにはhistoryモードとhashモードがあり、パスが以下のように違ってきます。historyモードの方が自然な感じでSEO的にも良いらしいです。

historyモード: /mercari_calc/pathname
hashモード: /mercari_calc/#/pathname

Vueをhistoryモードで動かすにはアプリに以下のコードを追加します。

const router = new VueRouter({
  mode: 'history',
  base: '/mercari_calc/',
  routes: routes
})

base の値は作成したディレクトリ名と同じ値にします。

404 NOT FOUNDの解決

アプリ内のパス(routesで指定したパス)はファイルとして存在しないため、そのURLに直接アクセスすると404 NOT FOUNDが表示されてしまいます。

この問題を解決するために.htaccessを使って/mercari_calc/以下の存在しないファイルへのアクセスは/mercari_calc/index.htmlを表示するようにします。

WordPress以下に配置したアプリでこれを実現するには、アプリのディレクトリの.htaccessの他に、WordPressが作成した.htaccessを編集する必要があります。

アプリをPWA化してキャッシュの設定をしていると、アプリ内のパスを開いても正常に表示されることがありますが、シークレットウィンドウなどで開くと404 NOT FOUNDになるのを確認できます。

.htaccessの改行コードはLFにしないとエラーになります。メモ帳での編集はダメです。またパーミッションは604にしましょう。

アプリディレクトリの.htaccess

作成したディレクトリに.htaccessを作成し、以下の記述をします。この.htaccessは/mercari_calc/以下の存在しないファイル、ディレクトリにアクセスされたときは /mercari_calc/を開けという意味です。ファイルとして存在する画像などはそのまま表示されます。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /mercari_calc/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

WordPressディレクトリの.htaccess

次にWordPressのディレクトリの.htaccessを編集し以下の行を追加します。

RewriteCond %{REQUEST_URI} !(^/mercari_calc/)

追加する場所は以下を参考にして下さい。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(^/mercari_calc/)
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

これは「存在しないファイル、ディレクトリにアクセスされたときWordPressで処理するよ」という設定から/mercari_calc/以下のアクセスを除外しています。

Vueの404 NOT FOUND設定

上記の設定を終えると、アプリのパスとしても存在しないパスにアクセスされてもアプリのトップが表示されてしまいます。そこで、Vueで404 NOT FOUNDを表示する必要があります。

routes にパスを追加し、コンポネントを作成して下さい。

const routes = [
  ...
  { path: '*', component: NotFoundComponent }
]

以上で完了です。お疲れ様でした。