XHack勉強会　第3回『Ruby「ゼロから」画像共有サービスを作る』で学んだこと【Herokuアップロード編】

まちゃあき

今回はHerokuというサービスにsinatraをアップロードし、
データベースを作成・編集・接続することを学んだので

その情報を深掘りしつつまとめてみます。

ただデータベースの操作を自分が分かるようにまとめた結果、
とてつもなく長くなってしまったのと
「これは別に分けたほうがいい」と思ったので

別ノートに分けていますので、
こちらをご覧ください。

このノートでざっくり分かること。

【bundle install時の作成ファイル解説】

・前回の補完な感じですが、gemfileに必要なgemfileを記述した後に、

$ bundle install --path vendor/bundle

のコマンドでgemファイルをインストールしたが、
その時に出来たファイルの補足説明。

■「.bundle/config」ファイルについて]
このconfigファイルがbundlerの設定読み込み先になる。

今回はオプションで"--path vendor/bundle"と入れたので、
[BUNDLE_PATH: "vendor/bundle"]と書かれているはず。

ちなみにbundlerが設定を読みに行く場所は３つあり、

１．Railsアプリのルートディレクトリ直下の「.bundle/config」
２．環境変数内
３．ユーザーのホームディレクトリ直下の「.bundle/config」

の順番で先に見つけた設定ファイルを読み込むみたい。

■「Gemfile.lock」について
インストールされたGemの名前とバージョンが記録されたファイル。

他の環境で同じアプリケーションをインストールして開発する場合は、
プログラムファイルに加えてこの「Gemfile.lock」ファイルを配布する。

そして他の環境で"bundle install"を実行すると、
今度は「Gemfile.lock」ファイルが参照され、
指定されたバージョンのGemパッケージがインストールされるようになる。

■「vendor/bundle」以下のファイルについて
bundle内に、gemファイルを含むたくさんのファイルが有る。

vendorとは直訳だと”行商人”となる。bundleは束や包み。
ざっくり言うと色んなデータを提供する者、ということ。

【Herokuへのアップロード方法】

■Herokuとは
WEBアプリの公開を簡単にしてくれる画期的なサービス。
レンタルサーバーの進化版みたいなもの。

通常アプリケーションを公開しようとしたら、

自前のサーバーPCを用意したり、ネットワークを構築したり
データベースやアプリケーションの環境をセットアップしたりする必要がありましたが

その環境をすでに用意してくれてて、
ユーザーはその環境を使わせてもらう。みたいな感じ。

■Herokuへのアップロード方法
１．Herokuへユーザー登録し、ログイン後[Create new app]。

２．herokuに接続するためのCLIをインストール

Homebrew使える場合
$ brew install heroku/brew/heroku

npmの場合
npm install -g heroku

yarnの場合
$ yarn global add heroku

３．Procfileの作成
Heroku を利用するにあたって必要な特別なファイル。

アプリケーションのルートディレクトリに「Procfile」を作成し、
内容に下記を記載する。

web: bundle exec ruby app.rb -p $PORT

「web:」：webアプリケーション
「bundle exec ruby app.rb」：起動コマンド
「-p $PORT」：ポートの指定（$PORTだとHerokuが自動で設定する）

４．ここからはHerokuに書いてる通りターミナルにて操作。
（今回プロジェクトディレクトリは作ってるので、"$ cd my-project/"は
要らない）

５．アップロードされたら、Heroku上のアプリ名をクリックして
右上に表示されてる「open app」でブラウザが起動しアプリケーションが立ち上がる。

もしくはターミナルで下記コマンドを使用しても、
ブラウザが起動してアプリケーションが立ち上がる。

$ heroku open



【データベースの操作（PostgreSQL）】

こちら


【Herokuのデータベース接続】

Herokuは標準でPostgreSQLが搭載されている。

Herokuホームページ上の「Resources」タブ内の
ADD-ons検索フォームにて「Heroku Postgres」を検索しアドオン追加。
（無料の「Hobby Dev - Free」を選択）

作成したデータベースを選択し、
「Settings」→「View Credentials...」を開く。

その「Heroku CLI」に書いてあるコマンドを
ターミナルにて実行すると、データベースに接続されるので
データベース名やテーブルを作成。

【PGcommanderのインストール】

ただターミナルでデータベース操作が難しく、視覚的にも分かりにくいので
エクセルみたいに表示してくれたり、変更を容易にしてくれるソフトを
「PGcommander」という。

https://eggerapps.at/pgcommander/
ページからインストールして、起動。

「New Favorite」を押して各項目にHeroku CLIが書いていたページの情報を入力していく。

左下の「New Row」でレコードの追加がすぐ出来て、
フィールドをクリックすれば、内部データも容易に変更可能。

ただカラムの追加などは出来ないので、その場合は「SQL Terminal」
を開いてSQLコマンドにて実行すること。


【sinatraにてデータベース接続】

まずGemファイルのインストールをするため、「Gemfile」に下記を追記。

gem 'pg'

その後に

$ bundle install --path vendor/bundle

にてインストールしてアプリケーションファイルに下記を追記。
（今回は「app.rb」）

require "sinatra"
require "sinatra/reloader"
require "pg"     ## ここ以降全て ##


get "/" do

 connect = PG::connect(
   host: "hoge",
   user: "hoge",
   password: "hoge",
   dbname: "hoge",
   port: "hoge"
 )
 results = connect.exec("SELECT * from item;")

 @message = []

 results.each do |result|
   @message << result
 end
 connect.finish
 erb :index
end

※host〜portに関しては、PGcommanderで入力した値と同じ。

そしてルートディレクトリ直下に「Views/index.erb」を作成し、
下記を記入。

<% @message.each do |item| %>
<%= item["name"] %>
<% end %>

そしてデータベースは下記のように作成。

そして下記コマンドにてアプリケーションの実行。

$ bundle exec ruby app.rb

もしくはGitでHerokuにあげてから、起動してもOK

実行結果が

hayatosayakaakira

となっていれば完了。

いいなと思ったら応援しよう！