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ローカル環境構築

上記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

初期設定
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>
.
.

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

データベース

postgreSQL
sqlite3
設定した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

Herokuとは
Heroku CLI インストール
ssh鍵を追加
デプロイ

1. Herokuとは

webアプリ用ホスティングサービス
Gitを使う事で簡単に本番環境にデプロイできる
Heroku本番環境ではデータベースにpostgreSQLを使用(Railsの開発環境でのデフォルトはsqlite3)

2. Heroku CLI インストール

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

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

3. Heroku SSH鍵追加

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

$ cd ~/.ssh
$ ls -a
authorized_keys

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

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

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

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

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をブラウザで確認

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

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

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