Vue.jsでの制作物をHerokuへデプロイする

備忘録になりますので、参考にならないかもしれません

前提条件

以前デプロイしたことがあるので、Herokuのアカウントは既に持っている

デプロイ前準備

※cd <アプリ名>で移動した状態
①まずはHerokuをインストール（Mac）

ターミナル

$ brew tap heroku/brew && brew install heroku

②Herokuへアカウント情報(メール、パスワード)を使ってログイン

ターミナル

$ heroku login

何かキーを押してとターミナルに出てくるので、適当なキーを押す。
その後、ブラウザにログイン画面が表示されるので、Loginボタンを押す。

③Herokuにプロジェクトを作成

ターミナル

$ heroku create <プロジェクト名>

※結構プロジェクト名が既に使用されていることが多いので注意！
使用されていると以下の文がターミナルに表示される

ターミナル

Creating ⬢ vue-project... !  
 ▸    Name vue-project is already taken

成功すると、新しいアプリのURLが生成されます！

ターミナル

https://vuetang.herokuapp.com/ | https://git.heroku.com/vuetang.git

④Herokuでデプロイする際に環境依存を防ぐためにNODE_ENVのproductionを設定しておく。

ターミナル

$ heroku config:set NODE_ENV=production --app <プロジェクト名>

⑤フロントエンドのVue.jsを簡単にサーバーにアップするにはExpressというNode.jsのフレームワークが便利なので、Expressをインストール

ターミナル

$ npm install express --save

⑥プロジェクトのルートディレクトリ直下にserver.jsを作成。

server.js

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

⑦ビルドする

ターミナル

$ npm run build

⑧下記コマンドでserver.jsを実行。

ターミナル

$ node server.js

⑨package.jsonを編集。

package.json

{
  "name": "<プロジェクト名>",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "node server.js"  <--- ここを書き換え
  },
...

デプロイ

①Gitリポジトリの初期化

ターミナル

$ git init

②Herokuリモートリポジトリを設定。

ターミナル

$ heroku git:remote --app <プロジェクト名>

③Herokuへデプロイしたdistディレクトリを保持しておくために.gitignoreから外す。

gitignore

.DS_Store
node_modules
dist/  <--- 削除

# local env files
.env.local
.env.*.local
...

④Gitにステージング&コミット

ターミナル

$ git add . && git commit -a -m "Herokuセットアップ"

⑤Herokuのリモートリポジトリにpush

ターミナル

$ git push heroku master

これでOKの筈ですが、私の場合はエラーが出てきました。
↓こんな感じ

ターミナル

Enumerating objects: 73, done.
Counting objects: 100% (73/73), done.
Delta compression using up to 4 threads
Compressing objects: 100% (66/66), done.
Writing objects: 100% (73/73), 319.19 KiB | 4.99 MiB/s, done.
Total 73 (delta 24), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: parse error: Invalid numeric literal at line 2, column 5
remote:  !     Unable to parse package.json
remote: 
remote: 
remote: -----> Build failed
remote: 
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote: 
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote: 
remote: Love,
remote: Heroku
remote: 
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to vuetang.
remote: 
To https://git.heroku.com/vuetang.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vuetang.git'

エラー解消の記事を見つけたので、それを参考にしやってみました。

ターミナル

$ touch index.php
$ git add index.php
$ git commit -m "add index.php"
$ git push heroku master

無事デプロイできました！！

参考記事

https://qiita.com/kottyan/items/dbc1edb82e8562235fac
https://gist.github.com/konitter/5370904