Vue.jsで作ったSPAをApache2にデプロイする

はじめに

今回はVue.jsで作ったSPAをデプロイするやり方を紹介しようと思います。

.htaccessの設定で時間を割かれたのでそれの紹介もしていきます

予めVue.jsの成果物をどこかに置いておく

僕の環境では、ホーム直下にnpm buildで生成されたdistを置いています
例）/home/gn5r/dist

ここは各自の環境に合わせて、適宜パスなどを読み替えてください

ApacheのDocumentRootを変更する

まず、Vue.jsで作ったSPAをルート(example.comにアクセスしたら表示される)に設定します

sudo vim /etc/apache2/sites-enabled/000-default.conf

DocumentRoot /var/www
　　　　　↓
DocumentRoot /home/gn5r/dist

sudo vim /etc/apache2/apache2.conf

<Directory /home/gn5r/dist> ←DocumentRootにしたディレクトリ
        Options Indexes FollowSymLinks
        AllowOverride All ←今後設定する.htaccessを有効化
        Require all granted
</Directory>

RewriteEngineを有効化

規定ではRewriteEngineが無効なので有効にします。
有効にしないと後述するルーティングが機能しなくなるので注意

sudo a2enmod rewrite

再起動が促されるので再起動

SPAのルーティングを出来るようにする

既存の設定だと SPA側でルーティングを作っていても NotFound と出てしまうのでそのための設定

Vue.jsでビルドしたディレクトリには.htaccessは無いので新しく作成します

vim ./dist/.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [L,QSA]

sudo systemctl restart apache2

を実行し再起動すれば無事完了