Docker+VueプロジェクトをHerokuにデプロイ

※自分用メモ

開発環境はDockerでフォルダをバックエンド(RailsAPI)、フロントエンド(Vue)に分けHerokuにデプロイするまでの流れです。
この記事ではフロントエンドフォルダをHerokuにデプロイするまでの行程を紹介します。

前回の記事ではバックエンドフォルダをHerokuにデプロイする行程を紹介しました。
https://qiita.com/ryota-0906/items/fdbc6e08e46ede0a3d43

1 WEBサーバーを用意する

Herokuで動作させるためにExpressを導入します。package.jsonにも自動的に記載されます。

$ cd <フロントエンドディレクトリ>
$ npm install express --save

フロントディレクトリ直下にserver.jsファイルを作成します。
server.jsには以下のように記述します。

server.js

const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + "/dist/"));
app.listen(port);

package.jsonに以下を追記します。
start はHerokuがにアプリケーション起動時に実行するコマンドです。
build は startの前にビルドしてもらうために記載します。

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js"
  }

2 Herokuにログイン&アプリ作成

Herokuにログインしてアプリ作成

$ Heroku login --interactive
$ heroku create <フロントエンドアプリ>

Herokuにデプロイ

$ cd <フロントエンドディレクトリ>
$ git init
$ git add -A
$ git commit -m "first commit"
$ git remote add heroku https://git.heroku.com/フロントエンドアプリ.git
$ git push heroku master