【備忘】Vue.jsのプロジェクトをHerokuで動作させるまでのアレコレ

はじめに

最近Webアプリに挑戦してみたくなり、「まずはフロントエンドから」とVue.jsに手を付けました。

Webアプリには１ミリも触れていなかったので、書籍などを読みようやっと"Hello, world"プログラムを完成されることができました。

この喜びの勢いでローカル環境外で動作させたくなってきたんですよね。
とはいえ、何の知識もないやつが環境づくりなど出来るわけがありませんので界隈では人気のありそうなHerokuというサービスを利用することにしました。

これで簡単にインターネット上で自作アプリ(Hello, World)が公開される！
と思ったのも束の間、まったくそんなことはなく、動作を確認出来るまで四苦八苦する羽目になってしまいました。

ここではその四苦八苦の末に動作するまでのアレコレを書き記そうと思います。

Vue.jsプロジェクトの作成

私は開発ツールとしてWebStormを使用していますので、プロジェクトはこのツールより作成しています。
多分ですが、ここらへんはコマンドを実行して作成するのと差はないと思います。

作成したプロジェクトを使用して"Hello, world"を表示させるだけの簡単なアプリを実装します。

実装したプロジェクトをGitHubに公開します。

Heroku側の設定

新規にアプリを作成します。

GitHubと連携して先ほど公開したプロジェクトを使ってデプロイします。

これで上手くいくと思ったのですが、なんか上手く動作してくれませんでした……。
詳細なログがあればよかったのですが、残していなかったというか、この時はログの見方がわかっていませんでした。
(四苦八苦している途中でログを参照できる導線を見つけたんですよね……)

解決方法

色々と調べた結果、express.jsを使用すると解決できるかも、という情報をキャッチ、早速試してみることにしました。

まずはプロジェクトにexpress.isをインストールします。

npm install express

package.jsonを以下のように修正します。

package.json

{
  "name": "hello-vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "node server.js"
  },
  "keywords": [
    "heroku"
  ],
  "author": "sanebow",
  "dependencies": {
    "express": "^4.18.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.4",
    "vite": "^4.4.9"
  },
  "engines": {
    "node": "18.x"
  }
}

以下の内容でserver.jsを用意します。

server.js

const express = require('express');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + "/dist/"));

app.get(/.*/, function(req, res) {
    res.sendfile(__dirname + "/dist/index.html");
});

app.listen(port);

これらの処置をし、再度プロジェクトをデプロイしたところ、見事動作を確認することができました。

なんだかんだ１日作業だった気がします……。