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

概要

• IDEとして VSCode の準備を行う
• sqlite3 のインストールを行う
• github のリポジトリからbranchを切る
• branchに対してソースコードの修正を行う
• ローカルで確認する
• github にあげる
• heroku で確認する

VSCode の設定

VSCode を以下URLからインストールします。

RoRを快適に作業するための拡張機能をインストールします。

• Ruby
• endwise
• Rails

sqlite3のインストール

sqlite3.exe と sqlite3.dll を、<ワークディレクトリ>に配置します。

dllとtoolのzipをダウンロードします。

解凍したファイルを、Rubyのインストールディレクトリ ＞ bin ディレクトリ 配下に配置します。

git bash を再起動して、sqlite3 が動くことを確認します。

<ワークディレクトリ>/ror-sample (work-create-page)
$ sqlite3 -version
3.31.1 2020-01-27 19:55:54 

github から branch を切る

①で作成したワークディレクトリ上で、branch を切ります。

<ワークディレクトリ>/ror-sample (master)
$ git checkout -b work-create-page
Switched to a new branch 'work-create-page'

<ワークディレクトリ>/ror-sample (work-create-page)
$ git branch
  master
* work-create-page

<ワークディレクトリ>/ror-sample (work-create-page)

一旦 branchをあげてしまいます。

<ワークディレクトリ>/ror-sample (work-create-page)
$ git push origin work-create-page
Enter passphrase for key '<ワークディレクトリ>/.ssh/id_rsa':
Total 0 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'work-create-page' on GitHub by visiting:
remote:      https://github.com/miu200521358/ror-sample/pull/new/work-create-page
remote:
To github:miu200521358/ror-sample.git
 * [new branch]      work-create-page -> work-create-page

push すると、branch が github 上に登録されます。

branch 上で作業をする

画面を追加する

RoR で画面を表示させるには、以下のセットが必要になります。

• routing　…　指定されたURLに対応する Controller を引き当てる
• Controller　…　どの View をどのように表示するか（Action）を決めて引き当てる（
• View　…　指定されたデータを受け取り、表示する。

上記のセットを、コマンドで作成します。

rails generate controller <コントローラー名> <アクション名>

<ワークディレクトリ>/ror-sample (work-create-page)
$ rails generate controller home top
      create  app/controllers/home_controller.rb
       route  get 'home/top'
      invoke  erb
      create    app/views/home
      create    app/views/home/top.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.coffee
      invoke    scss
      create      app/assets/stylesheets/home.scss

何やら色々ファイルが出来ました。
それだけでなく、config/routes.rb にも先ほど指定したコントローラー名とアクション名のルーティングが追加されています。

<ワークディレクトリ>/ror-sample (work-create-page)
$ git diff
warning: LF will be replaced by CRLF in config/routes.rb.
The file will have its original line endings in your working directory.
diff --git a/config/routes.rb b/config/routes.rb
index 787824f..d3f7ad6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,3 +1,4 @@
 Rails.application.routes.draw do
+  get 'home/top'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end

では、RoRサーバーの実行…の前に、データベースを作成します。
（一度そのまま起動したのですが、エラーとなったため、手戻りです。）

<ワークディレクトリ>/ror-sample (work-create-page)
$ bundle exec rake db:migrate
== 20200201042410 CreateBlogs: migrating ======================================
-- create_table(:blogs)
   -> 0.0028s
== 20200201042410 CreateBlogs: migrated (0.0028s) =============================

では、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

ログも出力されています。

Started GET "/" for ::1 at 2020-02-03 14:16:03 +0900
   (0.3ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
  ? C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/activerecord-5.2.4.1/lib/active_record/log_subscriber.rb:98
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 (11.1ms)
Completed 200 OK in 65ms (Views: 43.4ms | ActiveRecord: 0.0ms)


Started GET "/home/top" for ::1 at 2020-02-03 14:16:17 +0900
Processing by HomeController#top as HTML
  Rendering home/top.html.erb within layouts/application
  Rendered home/top.html.erb within layouts/application (2.1ms)
Completed 200 OK in 1595ms (Views: 1589.3ms | ActiveRecord: 0.0ms)

github にあげる

修正したソースをgithubにあげます。

$ git add -A
$ git commit -m "home>topページ追加"
$ git push origin work-create-page

github に追加されました。

heroku で確認する

branch名をherokuにpushして、コードをあげます。
①で作成したリポジトリと紐付いているため、miu200521358-ror-sample にリリースされます。

$ git push heroku work-create-page:master
Total 0 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.6.5
remote: -----> Vendoring libpq 5.12.1
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
(略）

/home/top パスをURLに追加すると、先ほど登録した画面が表示されました。

コードの修正と、そのデプロイまで出来るようになりました。
次回はDBを作成してみます。

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