背景

WindowsのWSL2をVSCodeで操作し、Rails6.1をインストールし、ブラウザでwelcomeページが表示できることを確認し、コンソールからgitコマンドでgithubのmasterブランチにコードをpushするまでの手順です。

WSLを使った理由は、MACでの環境構築方法と近いからです。
また、gitでのブランチの切り分けとプルリク方法、Railsのフォルダ構成を最後に載せています。

WSL 2（Windows Subsystem for Linux 2）をVSCodeから使えるようにする

① コントロールパネルから「プログラム」>「プログラムと機能」>「Windows の機能の有効化または無効化」を選択する。
表示されたチェックボックスにて「Linux 用 Windows サブシステム」「仮想マシンプラットフォーム」の二つにチェックを付ける。その後再起動を要求されるので再起動する。

② Windows storeからubuntuをインストールする。

③ 下記コマンドでWSLのバージョンを確認する。

$ wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Running         1

バージョンが1なので下記コマンドでバージョン2にする。

$ wsl --set-version Ubuntu 2

wsl --set-version Ubuntu 2で「カーネルコンポーネントの更新が必要」という旨のエラーが出た場合、
https://docs.microsoft.com/ja-jp/windows/wsl/install-win10
上記リンクからwsl_update_x64.msiをダウンロードし C:\Windows\System32\lxss\tools に移動してから実行する。
wsl_update_x64.msiの実行後に再度wsl --set-version Ubuntu 2を実行する。

※wsl_update_x64.msiは C:\Windows\System32\lxss\tools に移動しないと実行時にエラーが出る。
※wsl_update_x64.msiは上記リンクのx64 マシン用 WSL2 Linux カーネル更新プログラムパッケージからダウンロードできるが、ダウンロードがChromeにブロックされて進まない場合がある。その際はリンクを名前を付けて保存し左下のダウンロード警告に対し継続を選択すればダウンロードできる。

④ VSCodeにRemote Development拡張機能をインストール > 左下緑色の><アイコンをクリック > Remote-WSL: New Windowを選択して新しいWindowの左下緑色のアイコンがWSLになっていればVSCodeでWSLを操作できる。

RubyとRailsの環境構築（Railsはローカルインストール）

環境構築するにあたって知っておいたほうがいい事前知識は下記の記事にまとめました。
[Rails] 初心者のための事前知識(rbenv、RVM、gem、RSpec、Rubocop、bundler、ローカルインストール、env、フロントエンド関連)

環境構築は下記2つの記事を参考にさせていただきました。
① WSLで作るRuby on Rails環境構築〜VSCode Remoteを添えて〜
② Rails開発環境の構築（rbenvでRuby導入からBundler、Rails導入まで）（Macport編）
↑①の「4.Rubyのインストール」から「6. Railsのインストール」の手前まで実施し、その後は②の「SSL証明書のインポート」以降を実施します。

※②の最終盤でbundle exec rails serverして「webpackerが必要」という旨のエラーが出た場合、webpackerをインストールする必要があります。
webpackerのインストールには最新のyarnが必要ですが、aptでyarnを入れても最新版でないためwebpackerを入れる際にエラーが出ます。なので下記の順番でwebpackerをインストールする必要があります。

①下記を参考にyarnをインストールする。
yarnインストールの際にエラーがでた

②webpackerをインストールする。

$ bundle exec rails webpacker:install

再びコマンドを実行し、Railsが動いていることをブラウザから確認できました。

$ bundle exec rails server

コンソールからgitコマンドでgithubのmasterブランチにpushする

①gitに自分のemailとユーザー名を設定する。
※しないとコミット時にエラーが出ます。

$ git config --global user.email メールアドレス
$ git config --global user.name ユーザー名

②下記の記事通り実施する。
【Rails入門】 Githubを導入する方法

以上となります。

蛇足

下記の記事はGithubでプルリクする方法です。
初心者向けGithubへのPullRequest方法

下記の記事はRailsのフォルダ構成です。
デフォルトのRailsフォルダ構造

最後に、参考にさせていただいた記事の投稿者の皆様、ありがとうございます。
私の記事に不備などありましたらご指摘いただけると幸いです。