どうもShota(@Mii4a_Shota)です！
今回VSCodeとWSLを用いてRuby on RailsとVue.jsで開発できる環境を構築できたので備忘録＆アウトプット目的に記しておこうと思います！
1. VSCode
皆さんご存知、Microsoft社の提供する高機能コードエディターです。
以下のリンクからダウンロードしましょう。
2. WSLのセットアップ
2-1. Windows Subsystem for Linuxにチェックする
'設定'>'アプリと機能'>'プログラムと機能'>'Windowsの機能の有効化または無効化'>'Windows Subsystem for Linux' にチェックを入れて追加要素をインストールします。
Microsoft StoreからUbuntuをインストール
正直ここはお好きなディストリビューションを選んでいただいて構いませんが、今回はUbuntuを選びました。
（なお、Ubuntu以外のLinuxディストリビューションを選んだ場合、この後の設定が異なる可能性がありますので、その際はご自身で調べていただけると幸いです。）
2-2. Ubuntuのセットアップ
Ubuntuを起動し、ユーザー名とパスワードを登録します。
2-3. Remote WSLのセットアップ
VSCodeを開き、左側アイコンの拡張機能から、リモート上のUNIX（ここではUbuntu）に接続する・操作するためのRemote WSL、VSCodeからWSLに接続するためのRemote Developmentをインストールしましょう。
インストールして再起動すると、右下に緑色のアイコンが作られるので、クリックし、
Remote-WSL: New Windowを選択。
右下のアイコンが上記のように、WSLやWSL:Ubuntuのようになったら接続完了です。
3. Rubyのインストール
**Shift+crtl+@**でターミナルが開くのでそこからコマンドを入力していきます。
3-1. aptの更新
Ruby等をダウンロードするため、パッケージマネージャーの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
リポジトリ変更後パッケージの更新を行います。選択肢が現れますが、Yを入力すればOKです。
$ sudo apt update
$ sudo apt full-upgrade
3-2. git / rbenv / Ruby のインストール
rbenvは複数のバージョンのRubyを管理、インストールできるようになるシステムです。
# gitのインストール
$ sudo apt install git
# rbenvのインストール(clone)
$ 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のインストール
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
# インストールができるrubyのバージョンを確認
$ rbenv install --list
# 今回は最新である2.7.1を使用します
$ rbenv install 2.7.1
$ rbenv rehash
$ rbenv global 2.7.1
rbenv installの際、何らかの要素が足りずエラーが出ることがあります。その際は以下の記事を参考にしてください。
4. Ruby on Rails のインストール
4-1. rails / sqlite3 をインストール
gemでRailsをインストールします。
SQlite3が入っていないとエラーになるため、こちらモインストールします。
# railsのインストール
$ gem install rails
# sqlite3のインストール
$ gem install sqlite3
4-2. Ruby on Rails / Node.js のセットアップ
Rails sで立ち上げるのに必要な、Node.jsをターミナルからインストールします。この作業で何か不具合が出た場合は、以下のリンクで調べてみると手がかりが得られるかもしれません。
# cURLのインストール
$ sudo apt-get install curl
# nvmのインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
# nvmのインストールの確認("nvm"と帰ってきたら成功)
$ command -v nvm
# Nodeのバージョンを一覧表示する（この時点ではまだ何もないはず）
$ nvm ls
nvm lsの際、以下のような画面が出てきたら「何もない」ということで次に進んで大丈夫です。
インストールを進めます。
# Node.jsの現在のリリースをインストールする(最新の機能強化をテストするためだそうです)
$ nvm install node
# Node.jsの最新の安定したLTSリリースをインストールします（推奨とのこと）
$ nvm install --lts
# Node.jsのバージョンを再度一覧表示
$ nvm ls
以下のように表示されたら大丈夫です。
4-3. Node.js / npm のバージョン確認
念のため、Node.jsやnpmがしっかりインストールされており、現在の既定のバージョンであることを確認しましょう。
# Node.jsのバージョン確認
node --version
# npmの確認
npm --version
4-3. yarnのインストール
Rails6から標準装備されているwebpackerをインストールするために、yarnをインストールします。以下のコマンドを打ってください。
また、ディストリビューションが異なる際は、以下の公式リファレンスを参照してください。
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update
$ sudo apt-get install yarn
5. rails new
いよいよアプリ作成です。
今回はVue.jsを使えるようにするため、rails new hogehoge --wabpack=vueを入力します。（hogehogeの部分には、お好きなアプリ名を入れてください）
$ rails new hogehoge --wabpack=vue
エラーもなく、順調に作成出来たら、アプリのディレクトリに移動し、bundlerを用いて必要なgemをインストールしましょう。
$ cd hogehoge
$ bundle install
rails server
ようやく最後です！
アプリのディレクトリ移動したことを確認したら、
$ rails s
を入力してローカルサーバーを立ち上げましょう。
その際、以下のようなエラーが起きる場合があります。（yarnが最新版ではないようです)
warning Integrity check: System parameters don't match
error Integrity check failed
error Found 1 errors.
========================================
Your Yarn packages are out of date!
Please run `yarn install --check-files` to update.
========================================
To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
その時は落ち着いてyarn install --check-filesと入力し、yarnをアップデートして、再度rails sを入力しましょう。
5-1. rails serverが成功したら
$ rails server
=> Booting Puma
=> Rails 6.0.0 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
上記のように出力されていることを確認できたら、
ブラウザ（ここではchrome）でhttp://localhost:3000/にアクセスしてみましょう！
この画面が表示されていたら成功です！
お疲れさまでした！
6. まとめ
- まずはもう何が何でも公式サイトを調べる
- 出力メッセージをしっかりと読むこと
- エラーを直すためにググりすぎてよくわからなくなってしまったら、諦めず最初からやり直して、うまくいきそうなパターンを調べること
自分もこの環境を構築するまで数時間かかったのですが、この３つの事柄を頭に入れて調べることが大切だと思いました。
この環境構築のまとめが誰かの助けになったら幸いです。ありがとうございました！
7. 参考
WSLで作るRuby on Rails環境構築 ~VSCode Remoteを添えて~
Visual Studio Code
Microsoft Docs
インストール | yarn