Windows10 + heroku + github + Ruby on Rails 事始め①（2020/02版）

# 概要

Ruby on Railsプロジェクトを作成して、githubにあげて、heroku にデプロイします。

## 使用言語・フレームワーク

 - Ruby 2.6.5
 - Rails 5.2.3

## 使用サービス・ツール

 - github (git for windows)
 - heroku (heroku CLI)
 - Visual Studo Code

# 作業手順

## 作業用ディレクトリ作成

適当なパスにワークディレクトリ（作業用ディレクトリ）を作成します。
空白・2バイト文字等は使用しないで下さい。

## アカウント作成

以下サービスのアカウントを作成します。

 - github
 - heroku

## git アカウント設定

### git インストール

以下を参考に、GitをWindowsにインストールします。

https://www.granfairs.com/blog/cto/install-git-for-windows

### git bash 起動

スタートメニュー　＞ Git ＞ Git Bash を起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/21f06561-7211-192c-bb6f-3a49988fac60.png)

ワークディレクトリに移動します。

### config設定

gitアカウントを設定します。

```bash
$ git config --global user.name <gitアカウント名>
$ git config --global user.email <gitアカウントメールアドレス>
```

catコマンドで設定を確認します。

```bash
$ cat ~/.gitconfig
[user]
        name = <githubアカウント名>
        email = <githubアカウントメールアドレス>
```

### SSH接続設定

github に SSHで接続するための設定を行います。

`.ssh` ディレクトリをワークディレクトリに作成し、その中に移動します。

```bash
$ mkdir .ssh
$ cd .ssh
```

githubメールアドレスをコメントとして、SSH公開鍵を生成します。

```bash
$ ssh-keygen -t rsa -b 4096 -C <githubアカウントメールアドレス>
```

鍵の生成先を確認されるので、ワークディレクトリ以下に作成します。

```bash
Generating public/private rsa key pair.
Enter file in which to save the key (/<ユーザディレクトリ>/.ssh/id_rsa): ./id_rsa
```

パスフレーズを設定します。

```bash
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```

公開鍵が生成されます。

```bash
Your identification has been saved in ./id_rsa.
Your public key has been saved in ./id_rsa.pub.
The key fingerprint is:
<フィンガープリント> <githubアカウントメールアドレス>
The key's randomart image is:
+---[RSA 4096]----+
（略）
+----[SHA256]-----+
```

生成結果を確認します。

```bash
$ ls -la
total 8
drwxr-xr-x 1 <アカウント> 197121    0 1月  31 17:37 ./
drwxr-xr-x 1 <アカウント> 197121    0 1月  31 17:35 ../
-rw-r--r-- 1 <アカウント> 197121 3326 1月  31 17:37 id_rsa
-rw-r--r-- 1 <アカウント> 197121  751 1月  31 17:37 id_rsa.pub
```

### githubアカウントとSSH鍵を紐付ける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/2767d773-9ce4-ec29-1661-74db462124a6.png)

githubのアイコンから `Settings`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/2e119ad1-e60c-8093-8ee9-7144ddfe0ac9.png)

Settings メニューから `SSH and GPG keys` を選択し、SSH keysの「New SSH key」を選択します。

一旦、git bash に戻って、キーをクリップボードにコピーします。

```bash
$ clip < ./id_rsa.pub
```

Key欄にペーストします。
Titleは任意のキー名（半角英数がよいでしょう）を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/f5e7c38a-3cfe-c0fe-fecf-dcb6d60f9dfb.png)

「Add SSH Key」をクリックするとパスワードを求められるので入力確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8975a193-895a-5a32-cc13-1007de949f74.png)

登録が完了すると、キー名とフィンガープリントが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/c6894129-bb6d-9bcf-b5d8-d270930a8008.png)

### git bash から SSH で github に接続する

一旦 `.ssh`ディレクトリからワークディレクトリのルートに戻ります。

```bash
$ cd ../
```

github に SSH接続します。
SSH鍵を<ユーザディレクトリ>以外で作成した場合、`-i`オプションで鍵のパスを指定する必要があります。
SSH鍵のパスフレーズを求められるので、入力し、Enterでログインします。

```bash
$ ssh -T git@github.com -i ./.ssh/id_rsa
Enter passphrase for key './.ssh/id_rsa': <パスフレーズ>
Hi miu200521358! You've successfully authenticated, but GitHub does not provide shell access.
```

参考：[Testing your SSH connection](https://help.github.com/en/github/authenticating-to-github/testing-your-ssh-connection)

github接続用のconfigファイルを作成し、ユーザディレクトリ＞.sshディレクトリ配下に配置します。

```bash
$ cat ~/.ssh/config
Host github
  HostName github.com
  IdentityFile <ワークディレクトリ>/.ssh/id_rsa
  User git
```

host名でのSSH接続を確認します。

```bash
$ ssh -T github
Enter passphrase for key '<ワークディレクトリ>/.ssh/id_rsa':
Hi miu200521358! You've successfully authenticated, but GitHub does not provide shell access.
```

## heroku CLI のインストール

heroku にデプロイ等を行うために、CLIをインストールします。

https://devcenter.heroku.com/articles/heroku-cli

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/ec876152-9c4e-8b57-24dd-3e44b752cc52.png)

CLIのインストールexeをDLできたら、起動します。
インストール内容すべてにチェックが入っている事を確認して、「Next」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/2b5ed8c3-e57f-513c-52ef-503f1369d356.png)

インストール先を指定（デフォルトで Program Files の下）して、「Install」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/d509604b-4f6e-4217-aa79-8bf8017abfba.png)

git bash で heroku コマンドを確認します。

```bash
$ heroku -v
heroku/7.37.0 win32-x64 node-v12.13.0
```

heroku にログインします

```bash
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/a0611f64-184e-465d-8f88-12e96b1004d7
heroku: Waiting for login...
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/f7ae517c-209e-1204-5d63-f59a87f9ef73.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/9757aa4c-4a0e-e34f-f253-49be0ead445a.png)

ログインが完了しても、コンソールに何も出ないので、`exit`で終了します。

## Ruby のインストール

RubyInstaller を使って、コンパイル済みの ruby をインストールします。

https://rubyinstaller.org/downloads/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/792cae55-0455-e5d6-204e-79bae1ad5cc5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/39737aee-1124-19a0-b1cb-c00f7f6ce5ed.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/e10a6264-838c-8942-21c2-38ec82e0d7fb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/3a57a1b1-7b1a-e907-42dc-ebe1610d4b47.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/fcc14d35-3ee6-3b49-dd72-b25583359b4c.png)

コマンドプロンプトが現れたら、3を選択してインストールを続行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8b44b083-8b83-5738-ae72-4400bda83301.png)

## Ruby on Rails のインストール

git bash を再起動し、ワークディレクトリに移動します。
Rubyのインストールが成功していることを確認します。

```bash
$ ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]
```

Railsのインストールコマンドを実行します。

```bash
$ gem install rails -v "5.2.3"
Successfully installed rails-5.2.3
Parsing documentation for rails-5.2.3
Done installing documentation for rails after 0 seconds
1 gem installed
```

インストール結果を確認します。

```bash
$ rails -v
Rails 5.2.3
```

## sqlite3 のインストール

RoRのデフォルトDBはsqlite3なので、とりあえずインストールしてしまいます。

```bash
$ gem install sqlite3
Temporarily enhancing PATH for MSYS/MINGW...
Installing required msys2 packages: mingw-w64-x86_64-sqlite3
Building native extensions. This could take a while...
Successfully installed sqlite3-1.4.2
Parsing documentation for sqlite3-1.4.2
Installing ri documentation for sqlite3-1.4.2
Done installing documentation for sqlite3 after 1 seconds
1 gem installed
```

実際にsqlite3は触らないので、exe等のインストールはスキップします。

## bundle のインストール

rbenv を使うと一緒にインストールされるが、生のrubyをそのまま入れたため、別途インストールします。

```bash
<ワークディレクトリ>/ror-sample (master)
$ gem install bundler
Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Installing ri documentation for bundler-2.1.4
Done installing documentation for bundler after 12 seconds
1 gem installed

<ワークディレクトリ>/ror-sample (master)
$ bundle -v
Bundler version 1.17.2
```


## サンプルアプリの作成

RoRアプリが扱えることを確認するため、サンプルアプリを作成します。
後ほどgithubに登録します。

```bash
$ rails new ror-sample
      create
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile
         run  git init from "."
Initialized empty Git repository in D:/Project/20200201_heroku_ror/ror-sample/.git/
      create  package.json
      create  app
(略)
         run  bundle install
Fetching gem metadata from https://rubygems.org/.............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies.....
Using rake 13.0.1
(略)
Bundle complete! 16 Gemfile dependencies, 76 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
```

Railsサーバーを起動します。
※これは git bashではなく、コマンドプロンプトで実行すること。

```bash
D:\Project\20200201_heroku_ror>cd ror-sample

D:\Project\20200201_heroku_ror\ror-sample>rails server
=> Booting Puma
=> Rails 5.2.4.1 application starting in development
=> Run `rails server -h` for more startup options
*** SIGUSR2 not implemented, signal based restart unavailable!
*** SIGUSR1 not implemented, signal based restart unavailable!
*** SIGHUP not implemented, signal based logs reopening unavailable!
Puma starting in single mode...
* Version 3.12.2 (ruby 2.6.5-p114), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```

localhost サーバーにアクセスします。

```
http://localhost:3000/
```

```bash
Started GET "/" for ::1 at 2020-02-01 11:40:38 +0900
Processing by Rails::WelcomeController#index as HTML
  Rendering C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-5.2.4.1/lib/rails/templates/rails/welcome/index.html.erb
  Rendered C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-5.2.4.1/lib/rails/templates/rails/welcome/index.html.erb (7.0ms)
Completed 200 OK in 49ms (Views: 33.1ms | ActiveRecord: 0.0ms)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/b2b87320-2033-a995-984d-86416da32d73.png)

とりあえずここまで出来たらOKです。
Ctrl+C でRailsサーバーを止めます。

```bash
- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2020-02-01 11:40:45 +0900 ===
- Goodbye!
Exiting
バッチ ジョブを終了しますか (Y/N)? y

D:\Project\20200201_heroku_ror\ror-sample>
```

## github に登録

githubにリポジトリを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/10e91675-ead3-08f0-87ee-658ac0aff818.png)

git bash でpushします。

先ほど作成したサンプルアプリの下に入ります。

```bash
<ワークディレクトリ>
$ cd ror-sample/
```
add して、全ファイルを登録対象とします。

```bash
<ワークディレクトリ>/ror-sample (master)
$ git add -A
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory.
(略)
```
コメントを入れて、commitします。

```bash
<ワークディレクトリ>/ror-sample (master)
$ git commit -m "first commit"
[master (root-commit) 3ff8be7] first commit
 78 files changed, 1215 insertions(+)
 create mode 100644 .gitignore
(略)
```

ローカルのアプリディレクトリとgithubのリポジトリを紐付けます。

```bash
<ワークディレクトリ>/ror-sample (master)
$ git remote add origin github:miu200521358/ror-sample.git
```

リポジトリにpushします。

```bash
<ワークディレクトリ>/ror-sample (master)
$ git push -u origin master
Enter passphrase for key '/d/Project/20200201_heroku_ror/.ssh/id_rsa':
Counting objects: 85, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (70/70), done.
Writing objects: 100% (85/85), 20.96 KiB | 499.00 KiB/s, done.
Total 85 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
To github:miu200521358/ror-sample.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.
```

ひとまずこれでgithubに登録できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/fd93a24d-6744-a397-5e0b-cfd603e0a4b2.png)

## herokuへデプロイ

git bash から heroku CLI を通じて、herokuにデプロイを行います。

まず、herokuアプリを作成します。
アプリ名はそのままURLとなるため、他のユーザーやアプリと被らない名前を指定して下さい。

```bash
$ heroku create miu200521358-ror-sample
Creating miu200521358-ror-sample... done
https://miu200521358-ror-sample.herokuapp.com/ | https://git.heroku.com/miu200521358-ror-sample.git
```

アプリの作成が完了すると、herokuのダッシュボードにアプリが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/7ca3a413-04de-7eba-1170-5179e49ac21e.png)

### Railsの設定変更

heroku にデプロイする前に、RoRの設定を変更しておきます。
これは、IDEもしくはテキストエディタで修正して下さい。

#### <root>/Gemfile

 - sqlite3 を開発環境・テスト環境に限定する（sqlite3をコメントアウト）
 - postgresql をリリース環境に設定する（pg をリリース用に追記）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/e769bb55-0641-f6a8-f7f3-11f8348dbc34.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8ea5bff3-c7ce-0952-ab77-7fc9c5b8115f.png)

参考: [Gemfileの設定](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39#gemfileの設定)

設定の変更が終わったら、一旦インストールします。
これは、コードのルートディレクトリで実行してください。
（今回の場合、`<ワークディレクトリ>/ror-sample`になります）

```bash
$ bundle install --without production
```

#### config/datebase.yml

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/6fa87c97-7196-92bb-7e7c-ea2f87f9ff8e.png)

参考: [config/datebase.ymlの設定](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39#configdatebaseyml%E3%81%AE%E8%A8%AD%E5%AE%9A)

設定変更が完了したら、github へ commit → push します。

```bash
$ git add -A
```

```bash
$ git commit -m "config postgresql"
```

```bash
$ git push
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/bf6eeadd-b905-30aa-e898-b1cb2eca0ef2.png)

### github から heroku へデプロイ

git bash を通じて、github から heroku へデプロイします。

```bash
$ git push heroku master
Counting objects: 91, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (76/76), done.
(略)
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> console, rake, web
remote:
remote: -----> Compressing...
remote:        Done: 47.9M
remote: -----> Launching...
remote:        Released v6
remote:        https://miu200521358-ror-sample.herokuapp.com/ deployed to Herok
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/miu200521358-ror-sample.git
 * [new branch]      master -> master
```

deploy が完了すると、herokuのダッシュボードにも表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/05955cdc-98bb-c387-e7d4-1aa18d8461cd.png)

## DBのマイグレーション（作成）

```bash
$ heroku run rails db:migrate
Running rails db:migrate on miu200521358-ror-sample... starting, run.2971 (Free)
Running rails db:migrate on miu200521358-ror-sample... connecting, run.2971 (Free)
Running rails db:migrate on miu200521358-ror-sample... up, run.2971 (Free)
D, [2020-02-01T04:16:25.695959 #4] DEBUG -- :    (19.0ms)  CREATE TABLE "schema_migrations" ("version" character varying NOT NULL PRIMARY KEY)
D, [2020-02-01T04:16:25.711056 #4] DEBUG -- :    (12.0ms)  CREATE TABLE "ar_internal_metadata" ("key" character varying NOT NULL PRIMARY KEY, "value" character varying, "created_at" timestamp NOT NULL, "updated_at" timestamp NOT NULL)
D, [2020-02-01T04:16:25.713087 #4] DEBUG -- :    (0.9ms)  SELECT pg_try_advisory_lock(217714722442632450)
D, [2020-02-01T04:16:25.730358 #4] DEBUG -- :    (1.3ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
D, [2020-02-01T04:16:25.739049 #4] DEBUG -- :   ActiveRecord::InternalMetadata Load (1.0ms)  SELECT  "ar_internal_metadata".* FROM "ar_internal_metadata" WHERE "ar_internal_metadata"."key" = $1 LIMIT $2  [["key", "environment"], ["LIMIT", 1]]
D, [2020-02-01T04:16:25.746421 #4] DEBUG -- :    (0.9ms)  BEGIN
D, [2020-02-01T04:16:25.748508 #4] DEBUG -- :   ActiveRecord::InternalMetadata Create (1.1ms)  INSERT INTO "ar_internal_metadata" ("key", "value", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "key"  [["key", "environment"], ["value", "production"], ["created_at", "2020-02-01 04:16:25.746822"], ["updated_at", "2020-02-01 04:16:25.746822"]]
D, [2020-02-01T04:16:25.750384 #4] DEBUG -- :    (1.6ms)  COMMIT
D, [2020-02-01T04:16:25.751404 #4] DEBUG -- :    (0.8ms)  SELECT pg_advisory_unlock(217714722442632450)
```

ひとまず500エラーページを表示してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8f8d1aa2-e882-e5eb-4936-4f762ddd5850.png)

これで、デプロイまで出来るようになりました。
次は、htmlページを実際に作って、デプロイしてみようと思います。

[Windows10 + heroku + github + Ruby on Rails 事始め②（2020/02版）](https://qiita.com/miu200521358/items/9d2b82da8f276b822b23)