herokuを使ってみる

#はじめに
おはようございます。こんにちは。こんばんは。
おひさしぶりです。最近投稿する機会が減ってしまいまして申し訳ありません。
今回は題名にもあるのですがheroku(ヘロク)についてのことについて書いていこうと思います。
<font color="red">※macを使用しての解説です。</font>
#herokuとは？
herokuとは、簡単に言うとクラウド上のサーバの一種です。

Webサイトを立ち上げようと思うと、自身でサーバをたてて設定しないといけませんが、
herokuを利用すると、簡単にサーバをたてられて、Webサイトを作れます。

厳密には、PaaS（Platform as a Service: アプリケーションを実行するためのプラットフォームをインターネットを介して提供するサービス）の一種です。

herokuの一番良いところは、<font color="red"> **ほぼ無料**</font>で使える点です。
*※プランによっては有料の物もありますが問題なく利用できます。*
#herokuの使い方
##登録
[https://www.heroku.com/](https://www.heroku.com/)にアクセスし、登録・ログインを行ってください。
##ログイン

```console
$ heroku login
```
上記コマンドを叩いてくとメールアドレスとパスワードを聞かれるので、入力してログイン完了。
##アプリケーションの作成
下記のコマンドを叩いてください。

```console
$ heloku create
```
上記コマンドでも作成可能ですが、アプリケーション名がランダムになります。
アプリケーション名を指定したい場合は、名前を指定しましょう。

```console
$ heroku create アプリケーション名
```
作成したアプリケーションは[ダッシュボード一覧](https://dashboard.heroku.com/apps)に載ります。
下記コマンドでも確認可能です。

```console
$ heroku apps
```
あとはherokuで稼働させたいプロジェクトに移動してgitコマンドでデプロイする。

```console
$ 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がなかったということです。

```console
$ git remote add heroku https://git.heroku.com/アプリケーション名.git
```
##アプリをブラウザで確認
このコマンドを叩くと、自動的にブラウザでアプリを表示してくれます。

```console
$ heroku open
```
また、ブラウザアプリなどをherokuに配置した際には
https://アプリケーション名.herokuapp.com
上記でアクセスできる。
#アプリを削除する

```console
$ heroku destroy --app アプリケーション名 --confirm アプリケーション名
```
#herokuDBの使い方
次はherokuDBの使い方です。
コードをheroku上に展開することはできても「あれ？DBはどうすればいいの？」ってなったので
使い方をまとめてみました。
##herokuDBを使う前に

```console
$ psql -V
```
上記を叩いてバージョン情報が表示されるか確認してみてください。
失敗する場合には、PostgreSQLがインストールされていないためインストールしてください。

- [[DB]MacにPostgreSQLをインストールする方法 - Qitta](https://qiita.com/shimadama/items/f3cab71bd22cee2b9f98)

##Heroku Postgres アドオンの追加(データベースの作成)

```console
$ heroku addons:create heroku-postgresql:hobby-dev -a アプリケーション名
```

##psqlでログインしてテーブルの作成

```console
$ heroku pg:psql -a アプリケーション名
```
``アプリケーション名::DATABASE=>``と出てきたらログイン成功なのでSQLを書くだけ。
以上。
#TIPS
##Heroku CLIからDB接続情報を取得する
Herokuのアプリケーションの管理画面からの情報取得ができるが、
HerokuのCLIを使ってheroku login済みであれば、ターミナルからでもデータベースの接続情報をチェックすることもできます。

```console
$ heroku pg:credentials:url --app アプリケーション名
```
#補足(2020/02/09)
##HerokuでVueアプリを立ち上げる設定をしよう。
Vue.jsで作ったアプリケーションをherokuにデプロイしてもherokuのデフォルトページしか表示されなかったので、
なぜかと思い調べると、ちょっとした設定が必要なことがわかったのでメモ。
###1.以下のコマンドを叩く

```console
$ npm install express --save
```
**<font color="red">※Vue.jsを簡単にサーバーにアップするnode.jsのライブラリ[(express)](http://expressjs.com/ja/)</font>をインストールします。**

###2.プロジェクトのルートディレクトリ直下に「server.js」を作成します。

```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``して下さい。
###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をいじります。
また、記事に関して間違い等があればご指摘等お願いします。