備忘録になりますので、参考にならないかもしれません
前提条件
以前デプロイしたことがあるので、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を作成。
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を編集。
{
"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から外す。
.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