Webアプリの作り方①【環境構築編】Windows × WSL + Ubuntu + Rails + PostgreSQL

Webアプリの作り方【環境構築編】のアイキャッチ画像

「Webアプリを作ってみたいけど何をどうすればいいかわからない」

そんな悩みを抱えている方に向けて初心者でも比較的簡単に作成できる環境構築方法をWindows・WSL・Ubuntu・PostgreSQLという組み合わせで解説していきます。

✅この記事を読むと以下の事が理解できます
  • Windows PCの中にWSLを入れる方法
  • WSLの中にUbuntu環境を作る方法
読み方
※ 実行するコマンド、実装するコードは、背景を青色にしてあります。
目次

Webアプリをつくるための開発環境を整える

ステップ1 : VSCodeを用意する

まずは下記の記事を参考にVSCodeをインストールします

VSCodeインストール方法

ステップ2 : WindowsにWSLを導入する

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

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

wsl --install

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

ステップ3 : WSL環境の中にUbuntu環境を作成する

左下のボタンをクリック→WSLへ接続→ディストリビューションの追加→

Ubuntuを選択

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-essentiallibssl-devlibreadline-devzlib1g-devcurlgitをインストール

コマンドを細かく見てみよう
  • 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” という文言を追記しています。

それでどうなる?
  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のコマンドである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」というファイルに出力(保存)
補足2

簡単に言うと「この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とするのが適切。

補足2

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アプリに機能をつけて、インターネット上に公開していきます。

(これをデプロイといいよく使う言葉なので覚えておいてください)

ここから先の手順は下記の記事にまとめてありますのでぜひ頑張ってみてください。

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

この記事を書いた人

愛知出身。パソコンの作成・修理、プログラミングを経て、現在はWEBアプリケーションを作成する手順や学習方法、「困っているけど聞いたらめんどくさがられるので聞きにくい」と感じているシニアやIT初心者の困りごとを解決するコンテンツを作成しています。
苦手なものはめんどくさい人と過剰な広告

目次