Vue3を用いたレンタルサーバ上でのSPA構築 #Vue.js

概要

SPAサイトの構築に際して、普段ならGitホスティングサービス(Github/Bitbucket)にpushした任意のbranchをNetlifyやAWS等にdeployするが、クライアント側のコンプラにより外部サービスが使用できず、レンタルサーバ等にdeployする必要が発生する場合が稀にある。あまり遭遇しないケースだったため30分くらいハマった...ので簡潔にメモ。意外と方策を明確に言語化してる記事が少なかった。

環境

今回はVue-CLI v4.5.0以上を用いる。routerを用いない単一ページの場合はWebpack5×Vue3の最小構成を組むが、Vue-router4やVuex4を用いる場合はCLIがやはり手軽。
それぞれVue3リリースに伴うバージョンアップにより記法も多少変わったので、そろそろ慣れたい。

# バージョン確認
node -v
v15.4.0
vue -V
@vue/cli 4.5.9 

# sampleプロジェクトを作成
vue create sample

# 各種設定。(Routerだけ忘れずに入れましょう。)
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
❯◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

~中略~

cd sample

# Compiles and hot-reloads for development
yarn serve

# Compiles and minifies for production
yarn build

yarn serveすると http://localhost:8080/ には下記のような画面が表示される。

ナビのHome/AboutがVue-routerで実装されており、ページ遷移が可能。

本題

さて、上記のようなSPAサイトを、レンタルサーバ上の任意のディレクトリで動作するようにしていく。
まず、yarn buildで生成されたdistフォルダを、レンタルサーバ上にFTP等を用いて格納してみる。
配置したdistフォルダを「sample2」にリネームし下記にアクセス。
https://your-domain-name.com/sample2

現時点だと、sample2フォルダ内の各種CSS/JSファイルへのパスが通らず、ConsoleErrorにより何も表示されない。まずはこれを修正していく。

BaseURLの調整

sampleフォルダ内のルートディレクトリに下記のvue.config.jsを追加。

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/sample2/" : "/",
};

Vue-CLIではアプリケーションのBase URLを調整する際に、所謂webpackのoutput.publicPathを修正する代わりの作業として、vue.config.jsを作成し、publicPath項目を上記のように修正することが求められる。
Vue CLI - publicPath

上記修正により本番ビルドの際にパスが問題なく解決されるようになる。
再度yarn buildし、生成されたdistをsample2にリネームしサーバ上に格納すると、無事表示されるようになる。
この時点でVue-routerも機能し、SPAサイトとして最低限の機能は満たしたように見えるが、課題がもう一つ残っている。

404NotFound対応

Vue-routerで遷移した先のsample2/about ページにてリロードを実行すると、404NotFoundになってしまう。
上記に関しては、下記のVue-router公式ドキュメントが詳しい。使用しているサーバの種類に応じて処理を追加する。
https://router.vuejs.org/ja/guide/essentials/history-mode.html

今回使用しているサーバはApacheなので、下記 .htaccessファイルをsample2フォルダのルートディレクトリ直下に配置。

.htaccess


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

以上により、下記のようなURL直打ちアクセスや、リロードにも対応したSPAサイトが完成。
https://your-domain-name.com/sample2/about

まだ実運用は始めていないので、今後の運用の中で課題が生じたら改善していく。