Vagrant + RailsでHerokuにHello ,World!する

vagrantローカル環境でhello world!を表示するアプリを作成しherokuにデプロイするまでの忘備録

# 環境

- Ruby 2.4.0

- Ruby on Rails 5.1.7

- rbenv 1.1.2-2-g4e92322

- Node.js v4.9.1

- bundler 2.0.2

# Vagrantローカル環境構築

https://qiita.com/karlley/items/0812bd33a3952ea40de5

上記URLを参考に環境構築

**上記URLではRails 5.1.6で進めていますが今回は5.1.7を使用**

順番に進めれば`/home/vagrant/centos67/your_workspace/your_app`にアプリが作成され「Yay! Your on Rails!」まで表示できるはずです

# まずはローカル環境でHello World!

作成されたアプリのファイルを編集し「Hello World!」が表示されるようにします

修正する使用するファイルは2つ

- app/controllers/application_controller.rb

- config/route.rb

上記のファイルを以下のように修正

```:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "Hello, World!"
  end
end
```

```:config/route.rb
Rails.application.routes.draw do
  root 'application#hello'
end
```

`http://192.168.33.10:3000`で「Hello World!」が表示されているか確認


# Git

1. 初期設定
2. Initial commit

## 1. 初期設定

HerokuのデプロイにはGitを使用するので初期設定

設定を確認

```
$ git config --list
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
```

usernameとemailが未設定の場合は下記コマンドで設定

```
$ git config --global user.name "Your Name"
$ git config --global user.email your.email@example.com
$ git congit --list
user.name=Your Name
user.email=your.email@example.com
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
```

設定を反映し、初期化

```
$ git init
Reinitialized existing Git repository in /home/vagrant/centos67/workspace/hello_app/.git/
```

上記コマンドを実行するとアプリのルートディレクトリに`.git`が作成されます

## 2. Initial commit

Git設定後、最初のコミットを作成

ファイルをリポジトリに追加、確認

```
$ git add -A
$ git status
# On branch master
#
# Initial commit
.
.
```

リポジトリにコミット、確認

```
$ git commit -m "initialize repository"
56 files changed, 1181 insertions(+), 0 deletions(-)
 create mode 100644 .gitignore
.
.
```

```
$ git log
commit 28b...
Author: Your Name <your.email@example.com>
.
.
```

最初のコミットが作成されました

# データベース

1. postgreSQL
2. sqlite3
3. 設定したGemをインストール

## 1. postgreSQL

Herokuで使用するデータベースはデフォルトでpostgreSQLなのでGemの設定

**Railsの開発環境でのデフォルトはsqlite3**

Gemfileに下記を追記

```:Gemfile
group :production do
  gem 'pg', '0.20.0'
end
```

`:production do`は本番環境のみで使用するという意味

## 2. sqlite3

既存のsqlite3の記述をコメントアウト、または削除

```:Gemfile
#gem 'sqlite3'
```

開発/テスト環境のみの仕様に変更する為、`group :development, :test do`に`gem 'sqlite3'`を追加

```:Gemfile
group :development, :test do
  # sqlite3 for development/test only ← 追記
  gem 'sqlite3'                       ← 追記
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
end
```

## 3. 設定したGemをインストール

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

**`--without producton`をオプションで付ける事で本番環境へのデプロイの失敗を防止**

>pg gemを追加したことやRubyバージョンを指定したことをGemfile.lockに反映させないと、本番環境へのデプロイで失敗してしまうためです。

引用:RailsTutorilal

Gemfileを変更したので再度コミット

```
$ git commit -a -m "Update Gemfile for Heroku"
```

`-a`オプションは変更のあったすべてのファイルという意味

# Heroku

1. Herokuとは
2. Heroku CLI インストール
3. ssh鍵を追加
4. デプロイ

## 1. Herokuとは

- webアプリ用ホスティングサービス

- Gitを使う事で簡単に本番環境にデプロイできる

- Heroku本番環境ではデータベースにpostgreSQLを使用(Railsの開発環境でのデフォルトはsqlite3)

## 2. Heroku CLI インストール

Herokuをコマンドラインで使用するために必要

下記URLを参考にしてください

https://qiita.com/karlley/items/c423d02eee2292dab1f9

## 3. Heroku SSH鍵追加

`/home/vagrant/.ssh`にSSH鍵があるか確認

```
$ cd ~/.ssh
$ ls -a
authorized_keys
```

`id_rsa`, `id_rsa.pub`が無い場合はSSH鍵が無いので下記URLを参考に生成

https://git-scm.com/book/ja/v1/Git-サーバー-SSH-公開鍵の作成

```
$ cd ~/.ssh
$ ssh-keygen
$ ls -a
authorized_keys  id_rsa  id_rsa.pub
```

SSH鍵が生成されたのでHerokuにログインし鍵を追加

Herokuアカウントが無い場合は下記URLから作成

https://jp.heroku.com

HerokuアカウントのEmail,Passwordを入力しログイン

```
$ heroku login --interactive
heroku: Enter your login credentials
Email:
Password:
```

Herokuにログイン後、SSH鍵を追加

```
$ heroku keys:add
Found an SSH public key at /home/vagrant/.ssh/id_rsa.pub
? Would you like to upload it to Heroku?
Uploading /home/vagrant/.ssh/id_rsa.pub SSH key... done
```

HerokuにSSH鍵が追加されました
HerokuのアカウントページのSSH Keysで追加された鍵を確認できます

## 4. デプロイ

Herokuにアプリケーションを作成

```
$ heroku create your-app-name
Creating app... done, ⬢ your-app-name
.
.
```

アプリ名が表示されアプリケーションが作成されます

リポジトリをプッシュ

```
$ git push heroku master
.
.
remote: Verifying deploy... done.
.
.
 * [new branch]      master -> master
```

デプロイ成功したのでブラウザで確認

```
$ heroku open
.
.
▸    Manually visit https://your-app-url/ in your browser.
```

表示されたURLをブラウザで確認

![helloworld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377207/b5b4f9fc-3b5a-b8dd-7c14-ca8b8a4b6716.png)

無事「Hello world!」できました！

あっさり進んでいるように見えますが私のようなプログラミング初心者にとってローカル環境からデプロイするのは一つの大きな壁でした汗

同じように悩んでいる方に少しでも参考になればと思います！