vueプロジェクトをherokuへデプロイする

はじめに

vueプロジェクトをherokuへデプロイする手順を備忘録として残します。

手順

1. vueプロジェクト作成
2. herokuプロジェクト作成
3. express追加
4. server.js追加
5. git push heroku main

プロジェクト作成

vueプロジェクトはvue-cliを使って作成しました。

vue create xxx

herokuのプロジェクトも作成します。
https://dashboard.heroku.com/new-app

express追加

vueプロジェクトをサーブするためにexpressをプロジェクトに追加します。

npm install express

server.js

expressをインストールしたらvueプロジェクトをサーブするためのjsを記述します。

server.js

const express = require('express');
const serveStatic = require('serve-static');

const app = express();
app.use(serveStatic(__dirname + "/dist"));
app.get(/.*/, (_, res) => {
  res.sendFile(__dirname + "/dist/index.html")
})

const port = process.env.PORT || 5001;
app.listen(port);
console.log('server started '+ port);

最後は下記コマンドを実行することでherokuへのデプロイが完了します。

git push heroku main

参考記事