Ruby on Railsチュートリアル第１章
※はてなブログに記法がいくつかあるのを知らず、見たままモードだとソースコードのレイアウトが崩れてしまうとのこと。他でも役に立つだろうから、マークダウンで書いていきます。
第１章（ゼロからデプロイまで）
第１章は、基本的な環境構築、Railsの基本操作、GitHubに初プッシュして、Renderに初デプロイしようといった内容です。
環境構築
環境構築のセクションは飛ばします。
Railsチュートリアルでは、初期環境構築の不要なAWSのCloud9を推奨していますが、私はローカルで環境構築をおこないました。
WSL2＋VScode+Dockerの環境構築 - kuma0319のブログ
新規アプリケーションの作成
Rails new
Rails newコマンドを実行します。
チュートリアル内では、互換性を最大限に保つ目的でRailsのバージョン指定や、 --skip-bundleオプションを指定していますが、今回はオプション無しで実行します。
チュートリアル内（コラム１．４）でも特に指定はせず、互換性の問題はbundle updateコマンドで解消出来ると書いています。
$ rails new hello_app
--skip-bundleオプションを付けていなかったためbundle installも実行されて、Gemfile.lockが生成されていました。
bundle update
続いて、今回は不要なエラーを出したく無いのでGemfileの中身をイジってbundle updateを実行し、チュートリアルの推奨バージョンと合わせておこうと思います。
既にbundle installは実行されているので、bundle updateを実行。
試しにrailsのバージョンを見てみます。
$ rails -v Rails 7.0.4
ちゃんとbundle updateでGemfileで指定した通りのバージョンになっていました。
rails sで「localhost:3000」への接続も確認出来ました。
MVCモデルについて
ここではそれぞれの役割をまとめておきます。
Model
DBとの通信（データの取得、格納）担当。DBのテーブル毎にモデルが用意される。
View
表示画面の作成担当。モデルを介して取得したデータを使ってHTML文書を作成しコントローラへ返す。
Controller
MVCの中枢部分。ブラウザからリクエストを受け取り、Modelを通じてデータを取得したり、Viewからレンダリング画面を受け取ったりして再度ブラウザへレスポンスを返す。
Hello,worldプログラム
コントローラにアクションを定義
コントローラにhelloアクションを記述します。
[app/controllers/application_controller.rb] class ApplicationController < ActionController::Base def hello render html: 'Hello,World!' end end
ルーティングを設定
rootURL('/')のルーティング先をhelloアクションに設定。
railsガイドでは、rootルーティングは最初にマッチさせる必要があるため、ファイルの冒頭に記述するよう記載がありました。また、アクションに渡せるのはGETリクエストのみ。
Rails.application.routes.draw do root 'application#hello' end
問題なく表示されました。
Git、GitHub
Railsチュートリアルではここからgitの設定をおこないます。
ただ気になっていたのが環境構築出来た最初の方から
vscode ➜ ~/environment/hello_app (main) $
のように、デフォルトのmainブランチが表示されており、gitが設定されている状態？と思っていました。
色々とググってみたところ、下記サイトで解決しました。
VScodeのリモートコンテナ機能のおかげで、「ホストの.gitconfig設定をコンテナ内に引き継ぐ」という特徴があるみたいです。また、ssh keyもコンテナ内で有効となるようで、おそらくこのまま何も設定せずにgit push出来るのだと思います。
zenn.dev
ということで、gitの設定は済んでいるはずなので、コミットからプッシュまでやってみます。
git pushの時点で、GitHubとDockerを連携しろといった感じのポップアップが出ましたが、それをおこなったら無事プッシュ出来ました。
こういった点も、VScodeとDockerの相性がいいという部分なんでしょうね。
デプロイ
Railsチュートリアルに従って、Renderへデプロイします。
RenderのGitHubとの連携は既に済んでおり、既に過去の勉強でデプロイ可能なことは確認はしています。
ここでは、「Web service」を新規作成した際の"ADVANCED設定"にkey=RAILS_MASTER_KEY、value=config/master.keyの中身を設定するぐらいです。
デプロイも問題なくいけてました。
第１章ー演習ー
1.3.2
①デフォルトのRailsページに表示されているRubyのバージョンを見て、今の自分のコンピュータにインストールされているRubyのバージョンがそれと同じかどうかを調べてください。コマンドラインでruby -vを実行することで簡単に確認できます。
(解答) 一致している
$ ruby -v ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [x86_64-linux]
(解答) 一致している
$ rails -v Rails 7.0.4
1.3.4
①リスト 1.12のhelloアクションを書き換え、「hello, world!」の代わりに「hola, mundo!」と表示されるようにしてみましょう。
②Railsでは「非ASCII文字」もサポートされています。「¡Hola, mundo!」にはスペイン語特有の逆さ感嘆符「¡」が含まれています（図 1.24）25 。「¡」文字をMacで入力するには、Optionキーを押しながら1キーを押します。この文字をコピーして自分のエディタに貼り付ける方が早いかもしれません。
③リスト 1.12のhelloアクションを参考にして、2つ目のアクションgoodbyeを追加しましょう。このアクションは、「goodbye, world!」というテキストを表示します。リスト 1.14のルーティングを編集して、ルートルーティングの割り当て先をhelloアクションからgoodbyeアクションに変更します（図 1.25）。
(解答) ここの演習は飛ばします。
1.5
①Renderではデフォルトの設定でオートデプロイがオンになっています。1.3.4.1の演習と同じ変更を行い、GitHubにプッシュすると自動でデプロイが開始することを確認しましょう。また、本番アプリが「hola, mundo!」の表示に変わることも確認してみましょう。
②1.3.4.1の演習と同様、ルートへのルーティングを変更してgoodbyeアクションの結果が表示されるようにしてください。また、Git pushのmainをあえて省略し、デプロイできることを確認してみてください。
(解答) ここの演習も飛ばします。
第１章ーまとめー
- rails newコマンドで新しいアプリケーションを生成出来る。
- gemのバージョンを明示的に固定する場合は、Gemfileの中身のバージョンを変更した後に、
bundle installもしくは既におこなっている場合はbundle updateを実行する。 - アプリケーションの設計思想としてMVCモデル(Model、View、Controller)がある。
- ローカルの環境でgitの設定をおこなっている場合は、VScodeの拡張機能によりDocker環境でも同様のgit設定でバージョン管理を行うことが可能。
とりあえず、VScodeのリモート拡張機能を使用した上でDockerを使用し、これまでと使用感は変わらずにデプロイまでいけました。
以降の章も、初歩的な内容の演習は飛ばしながら進めていきます。
第１章終わり🐻
WSL2＋VScode+Dockerの環境構築
これからRuby on Railsチュートリアルの学習内容を章ごとにアウトプットしていきます。
１周目は第１章～第８章まで、２周目は第１章～第１４章まで進め、一度アプリの完成版までは触っている状態となります。
３周目はブログへアウトプットしながら、理解している部分は飛ばし読みし、曖昧な部分は深堀りをする、といったスタイルでおこないます。
Ruby on Railsチュートリアルを進めるにあたって、まずは環境構築から始めることとなります。
１周目と２周目の時点でWSL2+VScodeの環境構築は終えているので、今回はDockerを導入しRailsチュートリアルを進められるような状態まで持っていきたいと思います。
一応後からまた同じような環境構築をしたいとなった際に思い出せるように、WSL2+VScodeの部分も少し触れておきます。
WSL2+VScode環境構築
PCスペック
※プログラミング学習を始める際は、Macbookを購入することが一般的かと思います。
WSL2+VScode構築の参考サイト
Ruby on Railsのための、WSL2+VScode環境の構築は、Railsチュートリアルの『コマンドライン編』で紹介されていた以下のサイトを参考にしました。
WSL2+VScode環境構築のおおまかな流れ
- WSL2の有効化
- WindowsストアからUbuntuを入手
- VScodeにリモート拡張パックをインストール
- VScodeとWSL2を接続
- Ruby on RailsをVScodeを操作し導入(Docker上に構築する場合は不要)
Ruby on Railsの導入は上記サイトの中にリンクが載っています。
私はUbuntu22.04を使用したため、こちらのリンク（ https://gorails.com/setup/ubuntu/22.04 )の手順で進めました。データベースはRuby on Railsチュートリアルで推奨されているPostgreSQLを選択。
この内容まで進めれば、とりあえずRuby on Railsチュートリアル自体は問題なく進めることが出来ました。
以下本題のDocker導入。
WSL2+VScode環境へDockerを導入
Dockerを導入しようと思った理由
コンテナ技術のDockerは学習必須事項という程度には知っておりましたが、どのタイミングから始めればいいか悩んでおりました。
ちょうどこれからRailsチュートリアルの3周目突入するというタイミングでしたので、より現場に近い形で学習を進めるべきと考え、Dockerまで入れた状態を作り今のうちから触っておこうと思った次第です。
WSL2+VScode+Dockerの相性
まず、やろうとしているWSL2+VScode+Dockerという環境はそもそも作れるのか？という疑問が最初はありましたので、探していたところかなり分かりやすく解説している動画がyoutubeにありました。第4章が特にこの内容に触れています。
要約すると
- Docker Desktop for WindowsはMoby VMという仮想マシンを起動する必要があり、このMoby VMの起動にはHyper-Vという仮想化ハイパーバイザーが必要。
- 但しHyper-VはWindows10 pro以上で無いと入っていない。
- WSL2はWindows10 Homeに対し、WSL2専用の軽量化Hyper-Vが構築されるため、WSL2があればDocker Desktop for Windowsが利用可能。
- 更にVScodeのリモート開発拡張機能は、開発に必要なコンテナを自動生成してくれる。
結論、WSL2+VScode+Dockerは相性抜群！とのことでした。
導入にあたって参考にしたサイト
Ruby on Railsチュートリアルの中ではローカル環境で進める方向けに、ヘルプの中に『Visual Studio Code と Docker を使って開発する』というそのままな内容が記載されていました。
おそらく、WSL2+VScode環境までは構築しているので、後はこの内容に沿って進めればよいだけだと思います。
必要なもののインストールなど
- まずはDocker Desktop for Windowをダウンロード。
ダウンロード後の初期設定はMicrosoft公式の解説ページを参照。
ちなみにここでもちゃんとWSLをインストールしてからDocker入れてねと記載してありました。
- Dockerがインストールされていることを確認。
- この時点でvmmem(仮想マシン由来のプロセスらしい)のメモリ使用量が2GBを超えてファンがもの凄く頑張っていたので、以下を参考にメモリの使用上限を1GBに設定しておきました。設定後は比較的静かになってくれたと思います。
- VScodeの拡張機能「Remote Development」をインストール。Microsoftでは拡張機能「Docker」も入れておけと記載があったのでこの２つを入れておいた。
これで一通り必要なものはインストール完了。
GitHubからリポジトリをクローン
- Railsチュートリアルで紹介されている、Rails7用の環境を使用。
- 自分のGitHubへリポジトリをコピーしておく。
- VScode上ででgit cloneコマンドを入力し、ローカル環境へダウンロード。
- VScodeから先ほどダウンロードしたコンテナを開く。
接続出来るとVScodeの左下の接続アイコンが↓のようになりました。いけてそう。
VScodeからコンテナへ接続 - rubyやrailsがインストールされているかターミナルで確認。
- 一応「localhost:3000」への接続を確認してみる。
localhost:3000への接続確認 - 無事、WSL2+VScode+Dockerの環境構築完了
これはすごい。
Dockerを学習している際のメリットの一つに、”誰でも同じ環境が構築出来る”ということが挙げられていたが、GitHubからイメージだけ持ってきて後は勝手にやってくれるので、これなら確かに誰でも同じ環境になる。
WSL2+VScodeの導入が出来た方にとっては、非常に簡単に環境を導入出来ると思う。
Dockerの扱い方に関しては今後、チュートリアル等を進めながら慣れていきたいと思います。
まとめ
- WSL2+VScodeへDocker環境を構築することは相性が良い。そもそもDocker Desktop for WindowsはWSL2導入が必須。
- 私のように低スペックPCを使用している人は、Docker導入にあたって、WSL2のメモリ制限をおこなった方がいいかもしれない。
- GitHubの公開リポジトリから、作成済みのコンテナイメージを持ってくるだけで、Docker+Ruby on Rails環境を簡単に構築出来る。
