「Webアプリを作ってみたいけど何をどうすればいいかわからない」
そんな悩みを抱えている方に向けて初心者でも比較的簡単に作成できる環境構築方法をWindows・WSL・Ubuntu・PostgreSQLという組み合わせで解説していきます。
- Windows PCの中にWSLを入れる方法
- WSLの中にUbuntu環境を作る方法
※ 実行するコマンド、実装するコードは、背景を青色にしてあります。
Webアプリをつくるための開発環境を整える
ステップ1 : VSCodeを用意する
まずは下記の記事を参考にVSCodeをインストールします
ステップ2 : WindowsにWSLを導入する
VScodeに拡張機能からWSLをインストール

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



wsl --install



インストールしたらパソコンを再起動
ステップ3 : WSL環境の中にUbuntu環境を作成する
左下のボタンをクリック→WSLへ接続→ディストリビューションの追加→
Ubuntu
を選択



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



ステップ4 : ローカル環境からWSL内にあるUbuntu環境へ接続する
VSCodeの左下にある下図のボタンを選択し→WSLへ接続する



上記のボタンの表示がWSL:Ubuntuに変わる



これでUbuntu環境に接続できました。
ステップ5 : パッケージリストを最新に更新する
※古いパッケージがインストールされるリスクを回避するため先にパッケージリストを最新に更新します。
ターミナルを開き以下のコマンドを実行します。
sudo apt update && sudo apt upgrade -y
このコマンドは「パッケージリストを最新の状態に更新することに成功したらインストール済みのパッケージをすべて最新バージョンにアップグレードする」という意味です。
apt
: Ubuntu/Debian系Linuxのパッケージ管理ツール(Advanced Package Tool)。
※ -y は「すべての質問に自動的に ‘yes’ と答える」という意味で、確認プロンプトをスキップするオプションです。
ステップ6 : 開発に必要なツールを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
: ソースコードビルド用ツール
ステップ7 : インターネット上(GitHub)にあるリポジトリを自分のパソコンにコピーする
以下のコマンドを実行します。
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
「GitHubにあるrbenvのリポジトリを、ローカルマシンの~/.rbenvディレクトリにクローン(コピー)する」という意味です。
ステップ8 : コマンドを使えるようにするためPATHを通す
以下のコマンドを実行します。
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
このコマンドは
~/.bashrc というファイルの末尾に export PATH=”$HOME/.rbenv/bin:$PATH” という文言を追記しています。
- これによりPATHという環境変数の値に”$HOME/.rbenv/bin:$PATH”‘が追加されます。
- 環境変数PATHにrbenvが追加されたことでシステム内でrbenv -vなどのコマンドが使えるようになります。
✔️ 「~/.bashrc」は、ターミナルを開くたびに自動的に読み込まれる設定ファイル
✔️ 「PATH」は、コマンドを探す場所を指定する環境変数
✔️ 「$HOME/.rbenv/bin」は、rbenvの実行ファイルがある場所
この設定を追加することで
- ターミナルを開くたびに自動的に
- rbenvのコマンド(rbenv -v など)が使えるようになり
- どこからでもrbenvコマンドを実行できるようになります
つまり、rbenvというコマンドをいつでもどこからでも使えるようにするために「~/.bashrc」に必要な情報を書き込んでいます。この行為をrbenvのPATHを通すといいます。
「~/.bashrc」 はターミナルの起動と同時に読み込まれるためそこに記載してあるrbenvのコマンドであるrbev -vなどは永続的に使えるようになるということです。
.bashrcの中身を確認したい方は
cat ~/.bashrcで.bashrcファイルの中身を確認することができます。(やらなくてもいい)
ステップ9 : PATHを通しただけの状態から賢いバージョン管理システムにする
以下のコマンドを実行します。
echo 'eval "$(rbenv init - bash)"' >> ~/.bashrc
~/.bashrcというファイルにeval “$(rbenv init – bash)”を追記します。
これを記載することによりrbenv を ただのパスが通ったコマンドから、高度なバージョン管理ツールへと進化させてくれます。
これだけだと単なるコマンド
rbenv install 3.2.2
eval init後はこうなる(裏で起きていること)
→3.2.2をインストール
→そのrubyのパスを自動登録
→ruby -v を打つと必ず3.2.2が使われる
eval “$(rbenv init – bash)” は ~/.bashrc の最後に書く
他の設定(特に PATH 関連)と競合しないよう、ファイルの末尾付近に追加します。
(先に export PATH=”$HOME/.rbenv/bin:$PATH” を記述しておく)
ステップ10 : .bashrcの変更を反映させる
以下のコマンドを実行します。
source ~/.bashrc
今まで.bashrcに書き込んだ設定を反映させています。
これをしないとターミナルを再起動するまで設定が適用されません。
ステップ11 : ruby-buildリポジトリをローカルにクローンする
以下のコマンドを実行します
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
GitHubにあるruby-buildリポジトリを、ローカルの~/.rbenv/plugins/ruby-buildディレクトリにクローン(ダウンロード)する
ステップ12 : rubyをインストールする
以下のコマンドを実行します。
rbenv install 3.2.2
rbenvをインストールします。
rbenv global 3.2.2
rbenvでグローバル(システム全体)のRubyバージョンを3.2.2に設定します。
ruby -v
rubyがインストールできているか確認。このときruby 3.2.2のようにバージョンが表示されていればOK
「rubyなのにどうしてrbenvなの?」
rbenvはRubyそのものではなく、複数のRubyバージョンを切り替える管理ツールだからです。
ステップ13 : WSL環境にNode.jsとYarnのインストール
以下のコマンドを実行します。
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg -o yarn-pubkey.gpg
Yarnパッケージの正当性を検証するためのデジタル署名(GPG鍵)を取得し、後でシステムに登録できるようにローカルに保存するコマンドです。
- -s:進捗表示を非表示(サイレントモード)
- -S:エラーがあった場合のみ表示
- -o yarn-pubkey.gpg:
ダウンロードした内容を「yarn-pubkey.gpg」というファイルに出力(保存)
簡単に言うと「このYarnパッケージは本物ですよ」とLinuxシステムに証明するために行うコマンド です。
そして、それを証明するためのファイルが、ローカル環境の今いるディレクトリの中にcurl -sS https://dl.yarnpkg.com/debian/pubkey.gpg -o yarn-pubkey.gpgyarn-pubkey.gpg
によって作られたyarn-pubkey.gpg
になるということです。
ステップ14 : 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 というファイル名で保存しています。
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パッケージの正当性を検証できるようになります。
ステップ13・14の処理の流れを解説
✔️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
のようにファイル名だけを指定した場合、コマンドは カレントディレクトリ(現在の作業ディレクトリ)からそのファイルを探します。
ステップ15 : 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をインストールするようになる。
ステップ16 : システム上のパッケージ情報を最新に更新する
以下のコマンドを実行します。
sudo apt update
システム上のパッケージ情報を最新に更新しています。
インターネットからリポジトリの最新データを取得し、どのパッケージがアップデート可能か確認できるようにする。(実際のパッケージのアップグレードは行いません)
「インストール時に最新バージョンのパッケージを確実に取得するため」です。apt install
は apt update
で取得した最新のパッケージ情報を元に動作するため、更新しないと古い情報に基づいてインストールが行われるリスクがあるため。
ステップ17: Yarnをインストールする
以下のコマンドを実行します。
sudo apt install yarn -y
先ほどyarn.listで指定したURL(https://dl.yarnpkg.com/debian/ stable main
)からyarnをインストールします。
質問はすべてyes(-y)
ステップ18 : Ubuntu環境にRailsをインストール
以下のコマンドを実行します。
gem install rails -v 7.1.3
Ubuntu環境にrailsの7.1.3バージョンをインストールする
ステップ19 : railsコマンドrbenvに認識させる
以下のコマンドを実行します。
rbenv rehash
railsをインストールしたのでrailsコマンドをrbenvに認識させるために打つコマンド。
自動的に実行されることもありますが明示的に打つと確実
ステップ20 : railsがインストールできているか確認する
以下のコマンドを実行します。
rails -v
システムにrailsがインストールできているか確認
ステップ 21 : Ubuntu環境にデータベースをインストール
以下のコマンドを実行します。
sudo apt install postgresql postgresql-contrib libpq-dev -y
PostgreSQLデータベースサーバー、追加機能パッケージ、および開発用ライブラリを、質問は全部「yes」で(-y)インストールする。
✔️postgresql : PostgreSQLデータベースサーバー本体
✔️postgresql-contrib : PostgreSQLの追加機能モジュール
✔️libpq-dev : PostgreSQL用C言語ライブラリ(開発用)
Railsコマンドを使ってWebアプリを作成する
ステップ22 : RailsコマンドでWebアプリを作る
以下のコマンドを実行します。
rails new testapp -d postgresql
testappというwebアプリをrailsとpostgresqlというデータベースと組み合わせて作成します
以下のコマンドを実行しtestappディレクトリに移動します。
cd testapp
現在はWSL環境の一番上の階層にいるので今作ったtestappディレクトリに移動します。
ステップ23 : VSCodeでtestappを開く
VScodeでtestappディレクトリ(フォルダ)を開く



ステップ24 : データベースの設定ファイルを編集する



左上にある上記アイコンをクリックすると下の画像のようにディレクトリやファイルが表示されます。
データベースの設定ファイルであるconfig/database.yml
を編集する



default: &defaultの設定のところ(上の画像の場合は21行目から23行目)に
username: postgres
password: password
host: localhost
を追記する。
※ ymlファイルはインデントが合っていないと正常に動かないので注意
host: localhost
にする理由
host: localhost はアプリケーションが同じマシン上で動作しているデータベースに接続する場合に推奨される設定。
今回の場合、RailsアプリとデータベースともにUbuntu環境で動作しているためhost: localhost
とするのが適切。
Dockerを使用する場合はhost: db
が推奨されます。
※Dockerとは
今回作成したUbuntu環境のようなWebアプリを開発するための環境をコンテナと呼ばれる小さな箱のようなものの中に構築する技術
ステップ25 : PostgreSQLの対話型ターミナルに入る
以下のコマンドを実行します。
sudo -u postgres psql
postgresというシステムユーザーとして、PostgreSQLの対話型ターミナル(psql)を起動します
下の画像のようになっていればPostgreSQLの対話型ターミナルに入れています。



✔️sudo
:管理者権限で実行
✔️-u postgres
:「postgres」というユーザーとして実行
✔️psql
:PostgreSQLの対話型ターミナル
ステップ26 : データベースのパスワードを変更する
以下のコマンドを実行します。
ALTER USER postgres WITH PASSWORD 'password';
postgresというデータベースユーザーのパスワードを’password’に変更します
✔️ALTER USER
: ユーザー設定を変更
✔️postgres
: 操作対象のユーザー名 PostgreSQLのデフォルト管理者
✔️WITH PASSWORD
: パスワードを設定
✔️'password'
: 設定するパスワード database.ymlと同じ文字列に
✔️;
: SQL文の終了 必須
以下のコマンドを実行し対話型ターミナルから抜ける
\q
ステップ27 : データベースを作成する
以下のコマンドを実行しデータベースを作成する
rails db:create
ステップ28 : Railsサーバーを起動する
以下のコマンドを実行しRailsサーバーを起動する
rails s
ステップ29 : localhost:3000にアクセスし動作確認
ブラウザでhttp://localhost:3000/
にアクセスして下記画像のようになっていれば成功です。



ここまでがRailsでWebアプリを作るための環境構築と呼ばれる作業です。
おつかれさまでした!
次回は今作ったWebアプリに機能をつけて、インターネット上に公開していきます。
(これをデプロイといいよく使う言葉なので覚えておいてください)
ここから先の手順は下記の記事にまとめてありますのでぜひ頑張ってみてください。


