#はじめに
おはようございます。こんにちは。こんばんは。
おひさしぶりです。最近投稿する機会が減ってしまいまして申し訳ありません。
今回は題名にもあるのですがheroku(ヘロク)についてのことについて書いていこうと思います。
※macを使用しての解説です。
#herokuとは？
herokuとは、簡単に言うとクラウド上のサーバの一種です。
Webサイトを立ち上げようと思うと、自身でサーバをたてて設定しないといけませんが、
herokuを利用すると、簡単にサーバをたてられて、Webサイトを作れます。
厳密には、PaaS（Platform as a Service: アプリケーションを実行するためのプラットフォームをインターネットを介して提供するサービス）の一種です。
herokuの一番良いところは、 ほぼ無料で使える点です。
※プランによっては有料の物もありますが問題なく利用できます。
#herokuの使い方
##登録
https://www.heroku.com/にアクセスし、登録・ログインを行ってください。
##ログイン
$ heroku login
上記コマンドを叩いてくとメールアドレスとパスワードを聞かれるので、入力してログイン完了。
##アプリケーションの作成
下記のコマンドを叩いてください。
$ heloku create
上記コマンドでも作成可能ですが、アプリケーション名がランダムになります。
アプリケーション名を指定したい場合は、名前を指定しましょう。
$ heroku create アプリケーション名
作成したアプリケーションはダッシュボード一覧に載ります。
下記コマンドでも確認可能です。
$ heroku apps
あとはherokuで稼働させたいプロジェクトに移動してgitコマンドでデプロイする。
$ git init
$ git add .
$ git commit -m 'first commit'
# デプロイ
$ git push -u heroku master
以上でアプリケーション稼働が行われる。
#TIPS
##Herokuにpush時にdoes not appear to be a git repository出た時の対処
remoteの参照先にherokuがなかったということです。
$ git remote add heroku https://git.heroku.com/アプリケーション名.git
##アプリをブラウザで確認
このコマンドを叩くと、自動的にブラウザでアプリを表示してくれます。
$ heroku open
また、ブラウザアプリなどをherokuに配置した際には
https://アプリケーション名.herokuapp.com
上記でアクセスできる。
#アプリを削除する
$ heroku destroy --app アプリケーション名 --confirm アプリケーション名
#herokuDBの使い方
次はherokuDBの使い方です。
コードをheroku上に展開することはできても「あれ？DBはどうすればいいの？」ってなったので
使い方をまとめてみました。
##herokuDBを使う前に
$ psql -V
上記を叩いてバージョン情報が表示されるか確認してみてください。
失敗する場合には、PostgreSQLがインストールされていないためインストールしてください。
##Heroku Postgres アドオンの追加(データベースの作成)
$ heroku addons:create heroku-postgresql:hobby-dev -a アプリケーション名
##psqlでログインしてテーブルの作成
$ heroku pg:psql -a アプリケーション名
アプリケーション名::DATABASE=>と出てきたらログイン成功なのでSQLを書くだけ。
以上。
#TIPS
##Heroku CLIからDB接続情報を取得する
Herokuのアプリケーションの管理画面からの情報取得ができるが、
HerokuのCLIを使ってheroku login済みであれば、ターミナルからでもデータベースの接続情報をチェックすることもできます。
$ heroku pg:credentials:url --app アプリケーション名
#補足(2020/02/09)
##HerokuでVueアプリを立ち上げる設定をしよう。
Vue.jsで作ったアプリケーションをherokuにデプロイしてもherokuのデフォルトページしか表示されなかったので、
なぜかと思い調べると、ちょっとした設定が必要なことがわかったのでメモ。
###1.以下のコマンドを叩く
$ npm install express --save
※Vue.jsを簡単にサーバーにアップするnode.jsのライブラリ(express)をインストールします。
###2.プロジェクトのルートディレクトリ直下に「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して下さい。
###3.package.jsonの編集
// package.json
{
"name": "<プロジェクト名>",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"start": "node server.js", <--- ここを編集します
...
###4. .gitignoreの編集
// .gitignore
.DS_Store
node_modules/
dist/ <--- 削除します
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
これでpackage.jsonのstartで定義したコマンドが走り、最新のdistディレクトリがサーバーへアップされます！
#最後に
以上がherokuの扱い方でした。
最後まで読んでいただきありがとうございました。
次回はFirebaseをいじります。
また、記事に関して間違い等があればご指摘等お願いします。