ローカル開発環境の作成 Ruby on Rails [Windows10]

Windows10 にてRuby on Rails のローカル開発環境の作成の記事を何度か備忘録として残しましたが今回改めてまとめてみます。

スポンサーリンク

ローカル開発環境の作成

今回のローカル開発環境作成は Windows10 の機能である WSL と Micorosoftの開発ツールである VS Code を使用して作成します。

WSLのセットアップ

WSL [Windows Subsystem for Linux] はWindows上でLinuxを動かすための機能です。

以下の手順でリモート開発環境を作っていきます。

詳細については公式ページを参照してください。

公式ページ
Windows 10 用 windows Subsystem for Linux インストールガイド

WSLが使用可能状況か確認する

最初に「Windows Subsystem for Linux」オプション機能が有効になっているか確認する必要があります。

有効にしていない場合はPowerShellを用いて下記のコマンドでWSLを有効化します。

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

コマンドが正常に実行されたら、システムを再起動します。

Windows の設定からも設定変更ができます。

「コントロールパネル」より「プログラムと機能」をクリックします。

「Windows の機能の有効化または無効化」をクリックします。

「Windows Subsystem for Linux」のチェックボックスにチェックを入れます。

完了表示がでましたら、再起動をしてください。

Linuxディストリビューションをインストールする

次にLinuxディストリビューションをインストールします。

Microsoft Storeで「Linux」で検索します。

「Ubuntu」を選択します。

※今回は「18.0.4」を選んでください。

「入手」ボタンをクリックします。

ダウンロードが開始されますので完了までしばらくお待ちください。

ダウンロードが完了しましたら「起動」ボタンをクリックして、Ubuntuを起動してください。

起動しますと上図のようにユーザ名とパスワードを聞いてきます。Ubuntuで使用するものですので任意で決めてください。

 ※Windowsと必ずしも一緒のものにしなくても大丈夫です。

ユーザ名とパスワードを決めますと上図のようになります。

次にシステムを最新の状態にしましょう。

下記のコマンドでインストール済みパッケージを更新します。

sudo apt update

終わりましたら、下記のコマンドも合わせて実行します。

 sudo apt upgrade

Windows10 アップデート

WSL (Windows Subsystem for Linux) を新しいバージョンである WSL2 にアップグレードをするためにまずは Windows10 をアップデートします。

WSL2の導入条件

WSL2の導入条件は以下の通りとなっています。

・ Windows 10
  バージョン 2004(OSビルド 19041) 以上

現在のWindowsのバージョンの確認は「ファイル名を指定して実行」から確認ができます。

まずはショートカットキーで「Winキー + R」で「ファイル名を指定して実行」を表示させます。

「名前(O):」のところへ「winver」と入力してください。

Windowsのバージョン情報が表示されます。

バージョンが「1903」なのでバージョン「2004」へまずアップデートしたいと思います。

Windows10 アップデート方法

マイクロソフトの Windows10 ダウンロードサイトに行きます。

We are sorry, the page you requested cannot be found

「今すぐアップデート」をクリックします。

「Windows10Upgrade9252」というファイルがダウンロードされますのでダブルクリックで実行してください。 
 ※Windows10upgrade9252 の「9252」部分はダウンロードする時によって(バージョンにより)変わっているかもしれません。

「今すぐ更新」をクリックします。

「次へ」をクリックします。

あとはしばらくお待ちください。

完了しますと再起動要求の画面が出てきますので、再起動をしてください。

再起動後は更新プログラムの更新処理が走ります。

何回か自動的に再起動が入ります。

その後、通表通りにWindowsが起動します。

通常起動後、上図のウインドウが表示されますのでこれで Windows のアップデートが完了しました。

念のためバージョンの確認をしてみます。

WSL2 へアップグレード

WSL 2 へアップグレードします。

アップグレードに関しては下記を参考にしてアップグレードを行いました。

【参考】Windows 10 用 Windows Subsystem for Linux のインストール ガイド

アップグレードする前に、「仮想マシン プラットフォーム」 オプション機能を有効にする必要があります。

「仮想マシン プラットフォーム」 オプション機能の有効

管理者として PowerShell を開いてください。

PowerShell を右クリックすると「管理者として実行する」が表示されますのでクリックしてください。

PowerShell が立ち上がりましたら下記コマンドを入力してください。

 dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart 

上記コマンドを実行。

「操作は正常に完了しました。」と表示されればOKです。

一度 Windows を再起動します。

カーネルコンポーネントの更新

「カーネルコンポーネントの更新」します。

下記サイトへアクセスします。

Manual installation steps for older versions of WSL
Step by step instructions to manually install WSL on older versions of Windows, rather than using the wsl install command.

赤枠内のリンクをクリックすると「wsl_update_x64」がダウンロードされます。

実行してください。

上図の画面が表示されますので「Next」をクリックします。

ファイルのコピーが開始します。

「Finish」をクリックしてください。

終わりましたら下記コマンドを実行します。

WSL2を既定のバージョンとして設定する

新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定します。

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

 wsl --set-default-version 2 

※エラーの発生 (下記はエラーが発生した場合に参考にしてください)

エラーが発生しました。。
エラー:0x1bc

エラーの原因に悩みましたが、参考としたインストールガイドでは Linux ディストリビューションをインストールしていないことを前提としたガイドでした。

私の環境はすでに Ubuntu がインストールされている環境でしたのでエラーが出たようです。

念のため確認

wsl -l 

Ubuntu がインストールされていますのでこの場合は下記コマンドを実行します。

wsl --set-version Ubuntu-18.04 2

今度はエラーもなく変換が開始しましたのでしばらくお待ちください。私の環境では1分ほどで終わりました。


 wsl --set-default-version 2 

上図の表示がされればOKです。

これで WSL2 が既定のバージョンとして設定されました。

WSL2の設定確認

WSL2 に本当に設定されているか確認をします。

wsl --list --verbose   // 「--verbose」オプションは WSL2 から使用できるオプションです。 

赤枠内が「2」となっていますので、WSL2 へ設定されています。

Ubuntu の起動

Ubuntu の起動確認をします。

スタートメニューより Ubuntu をクリックしてください。

無事に Ubuntu が起動しました。

VS Code

VS Codeのインストール

VS CodeはWSLにではなくWindows側にインストールします。

下記サイトよりダウンロードできます。

Visual Studio Code – コード エディター | Microsoft Azure
Edit, debug, and deploy on Azure with Visual Studio Code, a powerful code editor that works with nearly any language and runs on any OS.

赤枠内「今すぐダウンロード」をクリックします。

お使いのバージョンに合わせてダウンロードしてください。


※Windows版インストーラーの違いについて

Windows版のダウンロードファイルには3種類あります。

 ◆User Installer
 ◆System Installer
 ◆.zip

System Installer

管理者アカウントでインストールする場合に利用します。
通常はこちらでインストールをすれば間違いはありません。
PCにログインできるすべてのアカウントで VS Code を使用することができます。

User Installer

インストールを実行したアカウントのみで VS Code を使用することができます。
System Installer はインストールするためには管理者権限が必要ですが、User Installer ですと管理者権限がなくてもインストールが可能です。
自分の所有しているPCを使っている場合は特に関係はありませんが、会社のPCでセキュリティが厳しい会社ですと、管理者権限をシステム管理者が持っている場合があります。
何か管理者権限でインストールする必要があった場合そのつど申請が必要だったりすることがあったりします。
User Installer 管理者権限を必要としないため、システム管理者に申請したりといったプロセスを踏むことなくインストールを実行することができます。

.zip

インストールせずに利用できます。
USBメモリに入れて持ち歩いたり、一度 VS Code を試しに使いたい時などに使えると思います。
こちらは自動アップデート機能がついていません。
セットアップファイルをダウンロードできましたらインストールをしてください。


表示されるウィザード通り「次へ」で進めていけば問題ありません。

インストールが完了しましたら完了画面で「Visual Studio Codeを実行する」にチェックを入れて VS Code を立ち上げてください。

上記画面が立ち上がってくれば無事 VS Code がインストールされました。

※標準では英語表示のため必要に応じて日本語表示に変更をしてください。

VS Code拡張機能の追加

VS Code から WSL に繋げるために「Remote – WSL」というVS Codeの拡張機能を追加します。

VS Codeの拡張機能より「Remote – WSL」をインストールしてください。

インストールされましたら、VS Codeの左下にある「><」アイコンをクリックします。

メニューが上部にコマンドパレットが表示されますので「Remote-WSL: New Window」をクリックします。

新しいウインドウでVS Codeが立ち上がってきます。左下のアイコンが「リモートを開いています」表示になっていますので、しばらくこのままで待ちます。

 ※私の環境では5分ほど待ちました。

完了しますと「 WSL: Ubuntu 」と表示されましたらWSLに接続完了です。

VS Code にてRuby on Rails 開発環境構築

VS Code を WSL に接続して起動します。

左下が「 WSL: Ubuntu 」となっていることを再度確認してください。

aptの更新

VS Code のターミナルを表示させてください。

最初にパッケージマネージャーである apt の更新を行わなければいけませんが、その前に日本リポジトリにしないと一部パッケージが更新できない不具合があるため先に変更します。

ターミナルに書きコマンドを入力してください。

 sudo sed -i'~' -E "s@http://(..\.)?archive|security)\.ubuntu\.com/ubuntu@http://ftp.jaist.ac.jp/pub/Linux/ubuntu@g" /etc/apt/sources.list 

各種パッケージの更新します。

sudo apt update

続いて下記コマンドを実行してください。

sudo apt full-upgrade

gitのインストール

git をインストールします。

sudo apt install git

rbenvのClone

rbenvをインストールします。

rbenv は複数のバージョンのRubyを切り替えるためのツールです。

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
rbenvのコマンドをShellから呼び出せるように登録
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile 

Shellを再起動

exec $SHELL -l

ruby-build のインストール

ruby-build は Ruby をいれるためのプラグインです。

ruby-build のインストールする際に何種類か必要なライブラリがあります。
まずはそれらを事前に入れておきます。

Ruby を入れる際に発生する可能性があるエラーを事前に回避するためです。

下記のコードを実行してください。

sudo apt-get install make
sudo apt-get install gcc
sudo apt-get install -y libssl-dev libreadline-dev zlib1g-dev

続いて ruby-build をインストールします。

git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

.bash_profileを再読み込み

source ~/.bash_profile
rbenv --version 

インストールができるrubyのバージョンを確認

rbenv install --list

私の環境では上記コマンドを実行すると下記エラーがでました。

問題のない方は飛ばしてください

※表示の通り「sudo apt install rbenv」を実行しました。

※実行後再度「rbenv install –list」のコマンドを実行しました。

※無事インストール可能なバージョンが表示されました。


rubyのバージョンを指定してインストールします。

rbenv install 2.6.3 //今回は[2.6.3]を指定しました。

まだRubyをインストールしただけでPC全体にバージョン[2.6.3]を反映していないので設定します。

rbenv global 2.6.3

※ちなみにプロジェクトごとにバージョンを切り替えたい場合は、バージョンを切り替えたいプロジェクトのディレクトリで「local」コマンドを使用すれば変更が可能です。

rbenv local 2.6.3

rubyのバージョンを確認します。

ruby -v

バージョンが表示されれば無事rubyはインストールされています。


※Rubyのバージョンが切り替わらない場合

下記の記事を参考にしてください。


bundlerのインストール

gemを管理するbundlerをインストールします。

gem install bundler

Node.jsのインストール

Node.js のインストール方法はいくつかありますが、Microsoft公式ドキュメントに沿って今回は行います。

公式ドキュメント
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

curlコマンドを使用するために curlコマンドをインストールします。

sudo apt-get install curl

nvm をインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

インストールされたか確認します。

nvm --version

Node.jsの安定版(LTS版)をインストールします。

nvm install --lts

Node.jsがインストールされたか確認します。

 node -v

これでNode.jsが無事インストールされました。

Rails のインストール

それでは続いてRailsを入れていきます。

下記コマンドを実行してください。

gem install rails

※バージョンを指定する場合(v 5.2.3の場合)は「gem install rails -v 5.2.3」入力します。バージョンを指定しなければ「gem install rails」のみで大丈夫です。

SQLiteのインストール

Railsを使用するにあたって SQLite3 が必要になります。
依存ライブラリを先にインストールしなければいけません。

sudo apt-get install libsqlite3-dev

続いて SQLite3 をインストールします。

gem install sqlite3

Rails プロジェクトをWindows側に置くようにする。 [ シンボリックリンク ]

これまでの手順で WSL環境に Rails を導入できましたが、今のままですと Windows側から Rails のプロジェクトを触ることができないので不便です。

Windowsにプロジェクトフォルダを作成してWSL からWindowsに参照する設定をします。

[ちなみにWSL から Windows の参照は「/mnt/c/」で参照することができます。]

WSLのユーザホームディレクトリから Windows側のフォルダにシンボリックリンクを作成します。

※先にWindowsのユーザホームフォルダに任意のフォルダを作成してください。私は「Rails」という名のフォルダを作成しました。 [C:\Users\ユーザ名\Rails]

以下のコマンドでシンボリックリンクを作成します。

ln -s /mnt/c/Users/ユーザ名/Rails  ~/Rails

「ls -l」で確認します。

ls -l

ちなみにシンボリックリンクを解除する場合は

unlink ~Rails // 「Rails」の部分は作成されたディレクトリ名

これで解除されました。

Rails アプリを作成

ここまででRailsアプリを作成する準備は完了しましたのでアプリを作成します。

さきほど作成しました「Rails」フォルダに移動してください

cd Rails

フォルダ移動後、下記コマンドを実行してください。

rails new test-app

※「test-app」はアプリ名ですので、好きな名前を決めてください。


※ここでエラーの発生。[erro: chmod on ・・・・]

error: chmod on /mnt/c/Users/ユーザー名/Rails/test-app/.git/config.lock failed: Operation not permitted

上記のエラーが発生し「Rails new」コマンドの途中で止まりアプリ作成できませんでした。

調べましたらアクセス権限の関係らしく、 データを有効にした状態でマウントする必要があるようです。

下記コマンドで metadata オプションを付けてドライブを再マウントしてください。

sudo umount /mnt/c
sudo mount -t drvfs C: /mnt/c -o metadata

VS Code のターミナルからでは何故か上手くいかなかったので、VS Code を一旦落として 「Ubuntu」から実行しました。

再度「Rails」フォルダへ移動後、「Rails new」コマンドを実行

無事作成されました!


作成されたら アプリフォルダへ移動します。

cd test-app

続いてrails server を実行します。

rails s

立ち上がりました!

最後に

ローカル開発環境の作成はトラブルも多々発生しますし、完成までに時間がかかってしまいます。

今はCloud9やPaizaCloudなどの便利なCloud IDEのツールがあります。

それらに比べローカル開発環境の作成はプログラミングを始めるまでにとても手間がかかってしまいますが、一度ローカル開発環境を作ってしまえばあとはインターネットの無い環境下でも開発することが可能になります。

ローカル開発環境を作成しようと考えている方の一助になれば幸いです!

タイトルとURLをコピーしました