Rails環境構築(Windows × WSL2 × Ubuntu)完全手順【初心者向け】

Rails環境構築初心者

「Webアプリを作ってみたいけどどこから手をつければいいかわからない」

「プロゲートなどでRubyやRailsを学んだけどそれをどうやってWebアプリに昇華するかわからない」

そんな悩みを抱えている方に向けて初心者向けの開発環境構築手順をわかりやすく解説していきます。

※ この記事では、Windows + WSL2 + Ubuntu環境でRails開発環境を構築する手順を解説します。

この記事の対象読者
  • ProgateなどでRuby/Railsを学んだ人
  • これから自分のアプリを作りたい人
  • WindowsでRails環境を作りたい人
この記事を読むとできるようになること

Railsアプリを開発するための環境を、Windowsパソコンの中に構築できるようになります。

具体的には以下の技術を習得します。

  • Windows PCにWSLを導入する技術
  • WSLの中にUbuntu環境を作る技術
  • Ubuntu環境の中でRailsアプリを作成する技術
目次

技術選定

カテゴリー選定内容
ホストOSWindows 10/11
仮想化技術WSL2
実行環境OS /DB Ubuntu / PostgreSQL
フレームワークRuby on Rails
バージョン管理Git
ソースコード管理 / 共有GitHub
デプロイ先(本番環境) / DBrender.com / PostgreSQL
読み方
※ 実行するコマンド、実装するコードは、背景を青色にしてあります。

エディターを用意する | VSCode

まずはプログラミングコードを書いたりコマンドを操作するために使用するエディター(メモ帳のようなもの)を用意します。

VSCodeのインストール方法がわからない方は以下の記事を参考にしてください。

Windows PCの中にWSL2(仮想化技術)を導入する

VSCodeに拡張機能からWSLをインストール

VSCodeの拡張機能WSLを入れることでWSL2に接続する準備をします。

簡単に言うと WindowsとWSL2の中のOSの橋渡しをしてくれるのがVSCodeの拡張機能WSLです。

VSCodeを開き、表示 > ターミナル > 新しいターミナル でターミナルを開く

wsl --install

インストールしたらパソコンを再起動

WSL2環境の中にUbuntu環境を作成する

左下のボタンをクリック

→ WSLへ接続

→ ディストリビューションの追加→

Ubuntuを選択

ubuntu選択画面

下の画像のように、ディストリビューションが正常にインストールされました。と出ればOK

Windows環境からWSL内にあるUbuntu環境へ接続する

VSCodeの左下にある

ボタン

を選択し→WSLへ接続する

すると上記のボタンの表示が

WSL:Ubuntuに変わります。

これでUbuntu環境に接続できました。

パッケージリストを最新に更新する

Ubuntu(Linux)では、RailsやRubyなどのソフトウェアを「パッケージ」という単位で管理しています。

スマホでいう「アプリを更新する」のようなものだと考えてください。

※ まずは古いパッケージがインストールされるリスクを回避するため先にパッケージリストを最新に更新します。

ターミナルを開き以下のコマンドを実行します。

sudo apt update && sudo apt upgrade -y
コマンド解説

このコマンドは「パッケージリストを最新の状態に更新することに成功したらインストール済みのパッケージをすべて最新バージョンにアップグレードする」という意味です。

補足

aptとは
Ubuntu/Debian系Linuxのパッケージ管理ツール(Advanced Package Tool)。

-y とは
「すべての質問に自動的に ‘yes’ と答える」という意味で、確認プロンプトをスキップするオプションです。

開発に必要なツールをUbuntu環境にインストールする

以下のコマンドを実行します。

sudo apt install build-essential libssl-dev libreadline-dev zlib1g-dev curl git libffi-dev libyaml-dev gcc make -y
コマンド解説

管理者権限で、build-essential、libssl-dev、libreadline-dev、zlib1g-dev、curl、git などの開発に必要なパッケージをインストールします。

コマンドを細かく見てみよう
  • sudo : 管理者権限で
  • build-essential:C/C++コンパイラや基本的な開発ツール
  • libssl-dev:SSL/TLS暗号化ライブラリの開発ファイル
  • libreadline-dev:コマンドライン編集機能の開発ファイル
  • zlib1g-dev:データ圧縮ライブラリの開発ファイル
  • curl:データ転送用コマンドラインツール
  • git:バージョン管理システム
  • libffi-dev : FFI(Foreign Function Interface)ライブラリの開発ファイル
  • libyaml-dev : YAMLパーサーライブラリの開発ファイル
  • gcc : GNU Cコンパイラ
  • make : ソースコードビルド用ツール

インターネット上(GitHub)にあるrbenvリポジトリを自分のパソコンにコピーする

以下のコマンドを実行します。

git clone https://github.com/rbenv/rbenv.git ~/.rbenv
コマンド解説

インターネット上(GitHub)にある rbenv の本体プログラムを、自分のUbuntuの中にある .rbenv という名前の専用フォルダに丸ごとコピーしてくるという意味です。

rbenvを入れることで、Rubyのバージョンを自由に切り替えられるようになります。

「Rubyのバージョンなんて変えないよ」と思う方もいるかもしれませんが、rbenvを入れておく最大のメリットは、「やり直し(削除)が圧倒的に楽になること」です。

rbenvを使わずにインストールすると、RubyがUbuntuのあちこちに「へばりついて」しまい、いざ消そうとした時にどこを消せばいいか分からず大変なことになります。

rbenvを使っておけば、もし失敗しても ~/.rbenv というフォルダをポイッと削除するだけで、まっさらな状態からやり直せます。

rbenvコマンドをUbuntu環境内で使えるようにするためPATHを通す

以下のコマンドを実行します。

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
コマンド解説

このコマンドは

~/.bashrc というファイルの末尾に export PATH=”$HOME/.rbenv/bin:$PATH” という文言を追記しています。

それでどうなる?
  1. これによりPATHという環境変数の値に”$HOME/.rbenv/bin:$PATH”が追加されます。
  2. 環境変数PATHにrbenvが追加されたことでシステム内でrbenv -vなどのコマンドが使えるようになります。
補足
  • ~/.bashrc」は、ターミナルを開くたびに自動的に読み込まれる設定ファイル
  • 「PATH」は、コマンドを探す場所を指定する環境変数
  • 「$HOME/.rbenv/bin」は、rbenvの実行ファイルがある場所

この設定を追加することで

  1. ターミナルを開くたびに自動的に
  2. rbenvのコマンド(rbenv -v など)が使えるようになり
  3. どこからでもrbenvコマンドを実行できるようになります

つまり、rbenvというコマンドをいつでもどこからでも使えるようにするために「~/.bashrc」に必要な情報を書き込んでいます。

この行為をrbenvのPATHを通すといいます。

補足

~/.bashrc」 はターミナルの起動と同時に読み込まれるためそこに記載してあるrbenvのコマンドであるrbenv -vなどは永続的に使えるようになるということです。


.bashrcの中身を確認したい方は
cat ~/.bashrcで.bashrcファイルの中身を確認することができます。(やらなくてもいい)

PATHを通しただけの状態からrbenvを「自動モード」に切り替える

PATHを通しただけでは、rbenvはまだ「手動モード」です。

以下のコマンドを実行し自動モードに切り替えましょう。

echo 'eval "$(rbenv init - bash)"' >> ~/.bashrc
コマンド解説

~/.bashrcというファイルにeval “$(rbenv init – bash)”を追記する。

それでどうなる?

一言で言うと、「いちいち指示しなくても、Rubyの切り替えを自動でやってくれる」ようになります。

具体的には

PATHを通しただけでは、Rubyのバージョン切り替えが自動で行われません。

eval init後はこうなる(裏で起きていること)

→ ruby3.2.2をインストール
→ そのrubyのパスを自動登録
→ ruby -v を打つと必ず3.2.2が使われる

補足:eval initってなに?

「rbenv専用の起動スイッチ」です。

rbenv init というコマンドを裏側で実行(eval)させることで、ターミナルを開いた瞬間にrbenvが「よし、いつでもRubyを切り替える準備はできてるぞ!」とスタンバイしてくれるようになります。

注意点

eval “$(rbenv init – bash)” は ~/.bashrc の最後に書く

他の設定(特に PATH 関連)と競合しないよう、ファイルの末尾付近に追加します。
(先に export PATH=”$HOME/.rbenv/bin:$PATH” を記述しておく)

なぜファイルの最後に書くの?
~/.bashrc は上から順番に読み込まれます。「rbenvはここにあるよ!」という住所(PATH)を先に読み込ませておかないと、この「自動スイッチ」はうまく働かないからです。

.bashrcに記載した変更を反映させる

以下のコマンドを実行します。

source ~/.bashrc
コマンド解説

今まで.bashrcに書き込んだ設定を反映させています。

これをしないとターミナルを再起動するまで設定が適用されません。

ruby-buildリポジトリをUbuntu環境にクローンする

rbenvでRubyのバージョンを切り替えられるようにしたらruby-buildというrbenvのプラグインを入れてrbenv installコマンドを使えるようにします。

ruby-buildとは

「新しいRuby」をネットから取ってきてビルド(構築)するためのrbenvのプラグイン

以下のコマンドを実行します

git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
コマンド解説

GitHubにあるruby-buildリポジトリを、ローカルの ~/.rbenv/plugins/ruby-build ディレクトリにクローン(ダウンロード)します。

rubyをインストールする

以下のコマンドを実行してrubyをインストールします。

rbenv install 3.2.2

rbenvでグローバル(システム全体)のRubyバージョンを3.2.2に設定します。

rbenv global 3.2.2

rubyがインストールできているか確認。このときruby 3.2.2のようにバージョンが表示されていればOK

ruby -v
補足

「Rubyをインストールするのにどうしてrbenv installなの?」

Rubyは自分自身をインストールすることができないからRubyを管理するrbenvがインストールします。

  • rbenv → バージョン管理
  • ruby-build → ダウンロード & ビルド

Ubuntu環境にNode.jsとYarnをインストールする準備をする

なぜ「Node.js」と「Yarn」が必要?

Railsのフロントエンド開発でJavaScript関連のツールを使用できるようにするためです。

Node.jsとは

ブラウザで動くJavaScriptを、パソコン上で動かすための土台です。

Yarn(ヤーン)とは

Node.jsで使う「JavaScriptのライブラリ(部品)」を管理するツールです。

Rails 6以降では、これがないと画面が正しく表示されないなど、開発に支障が出ます。

はじめに、インストールするYarnが本物であることを証明するための設定を行います。

デジタル署名(GPG鍵)の取得

以下のコマンドを実行します。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg -o yarn-pubkey.gpg
コマンド解説

簡単に言うと、「このYarnは本物ですよ!」と証明するための『証明書(GPG鍵)』をダウンロードするコマンドです。

補足
  • -s:進捗表示を非表示(サイレントモード)
  • -S:エラーがあった場合のみ表示
  • -o yarn-pubkey.gpg:ダウンロードした証明書を、yarn-pubkey.gpg という名前のファイルとして手元に保存しています。
  • これにより、この後の手順で「安全なツール」としてUbuntuに登録できるようになります。
補足2

簡単に言うと「このYarnパッケージは本物ですよ」とLinuxシステムに証明するために行うコマンド です。

そして、それを証明するためのファイルが、ローカル環境の今いるディレクトリの中に

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg -o yarn-pubkey.gpg

によって作られた

yarn-pubkey.gpg

になるということです。

以前のRailsはこれをすべてRubyの力だけでやっていましたが、最近のWeb開発では「JavaScript界の強力なツール(Node.jsなど)」を借りて処理するのが主流になりました。

だから、Railsの環境構築なのに、JavaScriptの道具である Node.jsYarn を入れる必要があったんですね。

素のJSやCSSを使ってコーディングするならNode.jsもYarnも不要ですがBootstrapやTailwind CSSなどを使う場合は必須となります。

Yarnの公開鍵を正しい場所に保管する

以下のコマンドを実行します。

sudo mkdir -p /etc/apt/trusted.gpg.d/

でディレクトリをつくる。

次に以下のコマンドを実行する。

sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/yarn.gpg yarn-pubkey.gpg
コマンド解説

yarn-pubkey.gpg というGPG鍵ファイルを、ASCII形式からバイナリ形式に変換(–dearmor)し、/etc/apt/trusted.gpg.d/yarn.gpg というファイル名で保存しています。

  • ASCII形式(テキスト形式)
    英数字の羅列
  • バイナリ形式
    コンピュータ専用のデータ形式
補足

sudo
管理者権限で実行

gpg
GNU Privacy Guard (暗号化/復号ツール)

--dearmor
ASCIIアーマー形式(テキスト形式)のGPG鍵をバイナリ形式に変換

-o /etc/apt/trusted.gpg.d/yarn.gpg
出力先ファイルを指定(この場合、APTの信頼済み鍵ディレクトリに保存)

yarn-pubkey.gpg
入力元のGPG鍵ファイル
(先ほど、ローカルのカレントディレクトリに保存したテキストファイル)

このコマンドの目的

この操作は、Yarn公式リポジトリのGPG公開鍵を、Ubuntu/Debianシステムが認識できる形式で正しい場所に保存するために行います。

これにより、aptパッケージマネージャーがYarnパッケージの正当性を検証できるようになります。

Ubuntu環境にNode.jsとYarnをインストールする準備をするの流れをまとめると

✔️curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg -o yarn-pubkey.gpg を実行してローカルのカレントディレクトリ(自分が今いるディレクトリ)に鍵を保存して

✔️sudo mkdir -p /etc/apt/trusted.gpg.d/ でディレクトリを作って

✔️sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/yarn.gpg yarn-pubkey.gpg でカレントディレクトリに保存した鍵を暗号化してテキスト形式からバイナリ形式に変換して/etc/apt/trusted.gpg.d/yarn.gpgに保存する

補足

yarn-pubkey.gpg のようにファイル名だけを指定した場合、コマンドは カレントディレクトリ(現在の作業ディレクトリ)からそのファイルを探します。

Yarnのインストール先を指定する

以下のコマンドを実行します。

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
コマンド解説

deb https://dl.yarnpkg.com/debian/ stable mainという文字を管理者権限でyarn.listというファイルに書き込む。

するとどうなる?

yarn.listにyarnのパッケージのURLを記載することにより、システムはそのURLからyarnをインストールするようになる。

システム上のパッケージ情報を最新に更新する

以下のコマンドを実行します。

sudo apt update
コマンド解説

システム上のパッケージ情報を最新に更新しています。

インターネットからリポジトリの最新データを取得し、どのパッケージがアップデート可能か確認できるようにする。(実際のパッケージのアップグレードは行いません)

アップグレードしないのになんでやるの?

「インストール時に最新バージョンのパッケージを確実に取得するため」です。
apt install は apt update で取得した最新のパッケージ情報を元に動作するため、更新しないと古い情報に基づいてインストールが行われるリスクがあるため。

Node.jsをインストールする

以下のコマンドを実行しNode.jsをインストールします。

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

すべての質問に「yes」で答える(-yオプション)

Yarnをインストールする

以下のコマンドを実行し、yarn.listで指定したURL(https://dl.yarnpkg.com/debian/ stable main)からyarnをインストールします。

sudo apt install yarn -y

すべての質問に「yes」で答える(-yオプション)

Ubuntu環境にRailsをインストール

以下のコマンドを実行します。

gem install rails -v 7.1.3

Ubuntu環境にRails 7.1.3をインストールします。

railsコマンドをrbenvに認識させる

以下のコマンドを実行します。

rbenv rehash

railsをインストールしたのでrailsコマンドをrbenvに認識させるために打つコマンド。

自動的に実行されることもありますが明示的に打つと確実

Railsがインストールできているか確認する

以下のコマンドを実行します。

rails -v

システムにrailsがインストールできているか確認

Ubuntu環境にデータベースをインストール

以下のコマンドを実行します。

sudo apt install postgresql postgresql-contrib libpq-dev -y
コマンド解説

PostgreSQLデータベースサーバー、追加機能パッケージ、および開発用ライブラリを、質問は全部「yes」で(-y)インストールする。

補足
  • postgresql : PostgreSQLデータベースサーバー本体
  • postgresql-contrib : PostgreSQLの追加機能モジュール
  • libpq-dev : PostgreSQL用C言語ライブラリ(開発用)

Railsコマンドを使ってWebアプリを作成する

いよいよRailsアプリを作成します。

以下のコマンドを実行します。

rails new testapp -d postgresql

testappという名前のRailsアプリケーションを作成し、データベースとしてPostgreSQLを使用する設定にします。

以下のコマンドを実行し、testappディレクトリに移動します。

cd testapp

現在はホームディレクトリ(/home/ユーザー名)にいるので、先ほど作成したtestappディレクトリに移動します。

Gemfileに記載されているGemをUbuntu環境にインストールします。

bundle install

VSCodeでtestappを開く

VSCodeでtestappディレクトリ(フォルダ)を開く

データベースの設定ファイルを編集する

左上にある上記アイコンをクリックすると下の画像のようにディレクトリやファイルが表示されます。

データベースの設定ファイルであるconfig/database.ymlを編集する

default: &defaultの設定のところ(上の画像の場合は21行目から23行目)に

username: postgres
password: password
host: localhost

を追記する。

※ ymlファイルはインデントが合っていないと正常に動かないので注意

補足

host: localhostにする理由

host: localhost はアプリケーションが同じマシン上で動作しているデータベースに接続する場合に推奨される設定。

今回の環境ではRailsアプリとPostgreSQLの両方がUbuntu内で動作しているためhost: localhostとするのが適切。

補足2

Dockerを使用する場合はhost: db が推奨されます。

※Dockerとは
今回作成したUbuntu環境のようなWebアプリを開発するための環境をコンテナと呼ばれる小さな箱のようなものの中に構築する技術

PostgreSQLの対話型ターミナルに入

以下のコマンドを実行します。

sudo -u postgres psql
コマンド解説

postgresというシステムユーザーとして、PostgreSQLの対話型ターミナル(psql)を起動します

下の画像のようになっていればPostgreSQLの対話型ターミナルに入れています。

対話型ターミナルに入ったところ
補足

✔️sudo:管理者権限で実行

✔️-u postgres:「postgres」というユーザーとして実行

✔️psql:PostgreSQLの対話型ターミナル

データベースのパスワードを変更する

以下のコマンドを実行します。

ALTER USER postgres WITH PASSWORD 'password';

postgresというデータベースユーザーのパスワードを’password’に変更します

補足

✔️ALTER USER : ユーザー設定を変更

✔️postgres : 操作対象のユーザー名 PostgreSQLのデフォルト管理者

✔️WITH PASSWORD : パスワードを設定

✔️'password' : 設定するパスワード database.ymlと同じ文字列に

✔️; : SQL文の終了 必須

以下のコマンドを実行し対話型ターミナルから抜ける

\q 

データベースを作成する

以下のコマンドを実行しデータベースを作成する

rails db:create

Railsサーバーを起動する

以下のコマンドを実行しRailsサーバーを起動する

rails s

localhost:3000にアクセスし動作確認

ブラウザでhttp://localhost:3000/にアクセスして下記画像のようになっていれば成功です。

環境構築完了

ここまでがRailsでWebアプリを作るための環境構築と呼ばれる作業です。

最後までお読みいただきありがとうございました。

補足 | プログラミングを真剣に学ぶなら

「プログラミングを本格的に学びたい」という方には「挫折防止に力を入れている」RUNTEQをおすすめします。

習得できる技術の総量も他スクールに比べ圧倒的に多いのが特徴です。

★友達紹介用★超実践型オンラインプログラミングスクール【RUNTEQ(ランテック)】

残念ながら、プログラミングスクールの中には、カリキュラムの内容と価格が見合っていない(高額すぎる)ところが少なくありません。

RUNTEQをやりきるとこんなものが作れるようになります

私が「空いた時間で手軽に英語学習ができたらいいな」と思い作った英会話練習アプリです。

RUNTEQを卒業するころにはこのくらいのアプリは問題なく作れるようになります。

▷ 関連記事はこちらもおすすめ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

30代後半からプログラミングを学び始め、現在はWeb制作や個人開発を行なっております。

目次