やりたかったこと
Laravel をよく使うので、Laravel Forge + Vultur を使っています（Forge + Vultr ではじめてLaravelアプリをデプロイするときにつまずいたこと)。
最近、Laravelを使わず vue.jsだけのアプリ（SPA）を作り、本番公開しようとしました。
vue.jsのアプリであればNetlify、GithubPageなどが簡単にできるようですが、せっかく有料でForgeを契約しているのだし等いろいろ事情があり、どうしてもLaravel Forgeにデプロイしたかったのです。
vue.jsアプリの概要
- vue version 2.5.2
- webpack version 3.6.0
Github にレポジトリを公開
やり方は簡単です。まずは下準備。
Laravel Forgeは、Githubからソースコードを取り込み、デプロイすることができます。
そのため、Githubレポジトリを作成し、vueアプリのソースコード一式をpush しておきます。
Laravel Forge でのディレクトリ設定
次に、いつも通りLaravel Forge で新規サイトを設定します。
この時のポイントは２つ。
１つめは、サイトの種類をStatic HTMLではなくGeneral PHP/Laravel で設定すること。Static HTML だと上手くできませんでした。
２つめは、初期ディレクトリを /dist に設定すること。これは、コンパイルされたファイルがdist フォルダに生成されるためです。
デプロイスクリプトの書き換え
Laravel Forgeにて、デプロイスクリプトを次のように書き換えます。
cd /home/forge/www.domain.com
git pull origin $FORGE_SITE_BRANCH
npm install
npm run build
( flock -w 10 9 || exit 1
echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock
npm を２行だけ、追加しています。
最初に調べていた時、Laravel Forgeでnpmするとタイムアウトする...などといった情報が出てきましたが、デプロイは普通に実行できました。
デプロイスクリプト以外でコマンドを叩くと、確かにエラーになっていました。
Nginx Configration File を編集する
最後に、Nginx の設定を変えます。画面下のFilesというメニューからEdit Nginx Configurationを選びます。
index.php となっているところを、index.html に変えます。最低限、この１箇所。
location / {
try_files $uri $uri/ /index.html?$query_string;
}
この設定でデプロイすると、vue.jsだけのアプリも公開できます。
参考
こちらの解説が大いに参考になりました。