【初心者向け】Railsアプリの作り方2｜GitHub連携からrenderデプロイまで解説

※ 今回の記事はRailsアプリの作り方【環境構築編】の続編となります

※ 作成したアプリケーションをインターネット上に公開することをデプロイといいます。

できる限りわかりやすく最低限のやり方で説明しますが初心者の方にとっては難易度は高いところもあると思います。

わからないところがあっても読み進めてイメージだけでも持って返っていただきたいと思っております。

Railsウェルカムページにいることを確認する

ブラウザで

http://localhost:3000/

にアクセスして以下の状態になっていることを確認してください。

testapp以下のファイルをGitの管理下に置く

現在いるディレクトリを確認する

ターミナルで pwd と入力し現在自分がいるディレクトリ(フォルダ)を確認してください。

testappディレクトリにいれば正解です。

それ以外のディレクトリにいる場合 lsで階層を確認しながら cd コマンドなどを使い testappディレクトリに来てください。

testappディレクトリ以下のディレクトリ(フォルダ)とファイルをgitの管理下に置く

testappディレクトリにいる状態で

git init

と入力すると、testappディレクトリにGitリポジトリが作成されます。

これを「リポジトリの初期化」と呼びこの操作によりtestapp以下のディレクトリやファイルのバージョンを管理しながら開発できるようになります。

補足

• 初期化を行うと、testapp/.gitディレクトリが作成されます（.gitは隠しディレクトリのため、VSCodeの標準のファイルツリーには表示されません。）
• ターミナルで「 ls -a 」コマンドを実行すると、.gitディレクトリの存在を確認できます。
• .git ディレクトリとは
  プロジェクトのすべてのバージョン管理情報（コミット履歴、リモートリポジトリ情報など）を格納する特別なディレクトリ
• ls -a とは
  隠しファイル/ディレクトリも含め、現在のディレクトリの内容をすべて表示するコマンド

Gitのブランチを確認する

ターミナルで

git branch

と入力することで現在自分がいるブランチを確認することができます。

Gitのブランチってなに？

Gitでは通常、メインとなるブランチ（main）を中心に開発を行います。

新しい機能を作るときは、mainブランチから作業用ブランチを作成して開発します。

機能ごとにブランチ(枝)を作り完成したコードに問題がなければmainブランチに取り込むという使い方をします。

testapp以下のディレクトリ、ファイルをステージングエリアに追加する

gitには、ワーキングツリー、ステージングエリア、リポジトリと3つのステージがあります。

ワーキングツリーで作業して、下書きができたら、ステージングエリアに送って、完成したらリポジトリに送るというイメージです。

git add .

というコマンドを入力すると.gitignoreに指定したファイルを除く、現在のディレクトリ以下のすべてのファイルをステージングエリアに送ります。

.gitignoreとは

Gitで管理したくないファイルを指定するための設定ファイルです。

このファイルに記載したファイルやディレクトリはGitの管理対象から除外されます。
（ログファイル/一時ファイルなど）外部に流出させたくないファイルを指定する。

※Railsアプリでは .gitignoreファイル は最初から作成されています。必要に応じて内容を追加していきます。

testapp以下のディレクトリ、ファイルをリポジトリに追加する

git commit -m “初期コミット”

と入力することで、ステージングエリアに追加されているファイルの変更内容をリポジトリに記録することができます。

“初期コミット”の部分はメッセージなので他の文章でも問題ないです。

例 )

git commit -m “プロジェクト開始”　など

Railsアプリ(testapp)にUser機能を追加する

ターミナルで以下のコマンドを入力しRailsアプリ(testapp)にUser機能を追加します。

rails generate scaffold User name:string age:integer

このコマンドは、Userモデルと、それに関連するコントローラー、ビュー、ルーティング、マイグレーションファイルなどを自動で生成します。

string(文字列)型のname属性とinteger(整数)型のage属性を持つUserモデルが作成されます。

補足 | scaffoldコマンドについて

コントローラー(controller)とは

ユーザーからのリクエストを受け取り、どの処理を実行するかを決めるファイルです。

ここでデータの取得や保存などを行い、どの画面（ビュー）を表示するかを決めます。

※ 今回はアプリをインターネット上に公開するまでの手順を理解してもらうことを目的としておりますのでコントローラーの実装は行いません。

ビュー(view)とは

画面を表示するためのファイル。今あなたが見ているこの画面もビューファイルです😄

ルーティング(routing)とは

URLにアクセスがあったときに、どのコントローラーのどのアクションを実行するかを決める仕組みです。

マイグレーションファイルとは

データベースの構造を変更するためのファイルです。

例えば

・Userテーブルを作る
・nameカラムを追加する
・ageカラムを追加する

といったデータベースの変更内容を記録します。

マイグレーションを実行すると、その内容に従ってデータベースの構造が更新されます。

簡単に言うと
「データベースの設計図を変更するファイル」
です。

マイグレーションファイルの内容をデータベースに反映させる

マイグレーションファイルを作っただけではデータベースに反映されません。

rails db:migrate

というコマンドを実行することでマイグレーションファイルの内容がデータベースに変更が反映されます。

Railsサーバーを起動する

その後、ブラウザで localhost:3000 にアクセスします。

ここではまだ、Railsウェルカムページのままです。

ルーティング(routing)を設定する

ルーティングを追記する

config/routes.rbに

root “users#index”

と追記する。

これによりトップページにアクセスが来た場合、usersコントローラーのindexアクションが実行されます。

補足 | rootとは

アプリケーションのトップページ（/）にアクセスがあったときに表示するページのことです。

トップページの表示を確認する

GihHubにリモートリポジトリを作成する

GitHubってなにもの？

Gitで管理しているコードをインターネット上に保存・共有できるサービスがGitHubです。

自分のPCだけでなくオンライン上にもコードを保存できるため、バックアップを取ったり、他の人とコードを共有したりできます。

ローカルリポジトリに変更を保存する(ここはGit)(オフライン)

git add .

で現在のディレクトリ以下の変更をステージングエリアに追加する。

git commit -m “ユーザー登録機能のテストアプリ実装完了”

でステージングエリアに追加された変更をローカルリポジトリに記録します。

GitHubに登録する

https://github.com

にアクセスし登録を行います。

GitHub上(オンライン)にリポジトリを作成する

登録が完了すると下記の画像のように表示されるので

create repository

をクリックしてリポジトリの設定を開始する。

Repository nameを決める

create repository をクリック後以下のように表示されるのでRepository nameをtestappとします。

コードの公開範囲を決める

GitHubに保存したコードを全世界に公開するならPublic、

非公開ならPrivateを選択する。

今回はPublicを選択します。

リモートリポジトリの作成を完了する

create repository ボタン

をクリックしてリモートリポジトリの作成を完了します。

GitHubとローカルリポジトリを紐づける

ターミナルで下記のようなコマンドを実行。

git remote add origin https://github.com/kw47b/testapp.git

画像の赤枠のところで確認できます。

GitHubとtestappが紐づいたことを確認する

ターミナルで

git remote -v

を実行します。

以下の画像のように表示されれば無事にGitHubとtestappが紐づきました。

Gitで管理されたくないファイルを設定する(再確認)

.gitignoreを開きリモートリポジトリにアップロードしたくないファイルを追記します。

変更をローカルリポジトリにコミットする

今回は何も変更していないので必要ありませんが、何かを変更したら下記を打つ癖をつけておいてください。

git add .

git commit -m “コミットメッセージ”

ローカルリポジトリの状態をリモートリポジトリに反映させる

git push origin main

このコマンドでローカルリポジトリのmainブランチの状態をリモートリポジトリのmainブランチに同期します。

GitHubにアクセスしてリロード後下記画像のようになっていれば push 成功です。

render.comにデプロイする準備をする

render.comとは

GitHubにpushしたコードを自動でビルドしてアプリを公開できるPaaS（Platform as a Service）」と呼ばれるクラウドサービスです。

デプロイ時に実行することを指定するファイルを作る

ターミナルで

touch bin/render-build.sh

を実行し

bin/render-build.sh

というファイルを作る。

bin/render-build.shにデプロイ時に実行することを記載する

※ デプロイとはインターネット上にアプリを公開することです。

bin/render-build.shに下記を記載する

set -e

bundle install
bundle exec rails assets:precompile
bundle exec rails assets:clean
bundle exec rails db:migrate

bin/render-build.shに下記を記載する

set -e : 実行中にエラーが発生した場合、そこで処理を停止する設定です。

bundle install : Gemfileに記載されたgem（Rubyのライブラリ）をインストールします。

bundle exec rails assets:precompile : Railsアプリケーションのアセット（CSS、JavaScript、画像など）を本番環境用にコンパイルします。

bundle exec rails assets:clean : 以前にプリコンパイルされたアセットを削除します。

rails db:migrate : データベースのマイグレーションを実行します。

ローカルリポジトリに変更をコミットする

git add .

git commit -m 'render-build.sh追加'

リモートリポジトリに変更したローカルリポジトリをpushする

git push origin main

render.comにログインする

https://dashboard.render.com/ へアクセスしGitHubアカウントでログインします。

render.comの設定をする

以上がアプリケーションをデプロイする初歩的な流れです。おつかれさまでした。