Windows10でRails開発環境を準備

GitHub上にすでに存在するRailsアプリ git@github.com:ichylinux/bizquest.git を事例として、Windows10上にRails開発環境を準備する手順を記録しておく。

## VisualStudioCode

#### インストール

https://code.visualstudio.com/ からダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/c972ea0d-934c-cf3c-98f6-2a6d6eade955.png)

クリックしてインストール。

#### 日本語化

メニューの「View] => [Extensions] を開き、Japanese で検索する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/efbcffb4-2d57-94a9-4e15-367ce9b59195.png)

Japanese Language Pack for Visual Studio Code を選択し、Install を実行する。

インストール後、画面右下に「Change Language and Restart」というボタンが表示されるので、クリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/152c7bd6-dcb5-1af9-6ac5-216fc4fecca5.png)

#### 改行コードをLFにする

Windows標準の改行コードは CR/LF だが、Rails開発ではLFを使用するため、改行コードの設定を変更しておく。

画面左下の「管理」=>「設定」へと進み、「設定の検索」に Eol と入力して設定項目を検索する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/44ef504f-fa74-196f-6b40-ac1de519266a.png)

Files:Eol の項目を \n にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/cfd9978a-058c-8127-bc55-62ce0c42f17c.png)


## Git

#### インストール

https://git-scm.com/download/win からダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/7c77aa14-d920-11a8-df09-76cfb8485ff8.png)

クリックしてインストール開始。
インストールの途中、以下の２つの設定を変更する。
1. デフォルトのブランチ名を master から main に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/0313c098-62c2-8d5d-f6f8-c2561e7cc83d.png)
1. 改行コードの自動変換を無効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/c78df2f2-fd13-db4a-4302-b3c28caa487f.png)

それ以外はすべてデフォルトの状態でインストールウィザードを進める。

#### ユーザ名とメールアドレスの設定

Gitで作業を行う時のユーザ名とメールアドレスを設定する。

メニューから「表示」=> 「ターミナル」を開き、以下のコマンドを実行する。

```
git config --global user.name [自分の名前]
git config --global user.email [メールアドレス]
```

ユーザ名が ichy で、メールアドレスが ichhy@example.com の場合の例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/e71b2a42-5b61-b241-b744-3985231bed68.png)

設定が正しくできていることを確認。

```
git config user.name
git config user.email
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/134b0ba3-8640-4cbf-7b29-26ee5c7f3152.png)

設定したユーザ名とメールアドレスが表示されている。

## Docker

#### WSL2を最新に

PowerShellを管理者として実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/f6d3d703-fd8a-d039-309b-4a862f21f2cd.png)

以下、PowerShell上でコマンドを実行する。

Linux 用 Windows サブシステムを有効に。
```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/c285377b-f7d3-f2af-60cc-af29bc1d359d.png)

仮想マシンの機能を有効に。
```
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/3ca6da5d-b02e-6b3b-0a8f-739f8840ad0f.png)

以下のURLからLinuxカーネル更新プラグラムをダウンロードし、クリックしてインストール。
https://docs.microsoft.com/ja-jp/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package

古いWSLではなくWSL2をデフォルトに。
```
wsl --set-default-version 2
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/1f44db01-3e45-7913-d53f-2954bb9742cf.png)

exit を入力してPowerShellを閉じる。
```
exit
```

#### .wslconfig ファイルを用意

C:\Users\ichy フォルダの中に .wslconfig という設定ファイルを用意する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/ee13d65d-cffa-bfd5-3699-6163b971f1ad.png)

ファイルの中には、Dockerコンテナを起動する時の設定を記述する。
```
[wsl2] 
memory=1000MB
processors=2
```
しかし、この設定が本当に効いているのかどうか、よくわからなかった。


#### Docker Desktopをインストール

https://www.docker.com/get-started/ からダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/28d48b92-acc7-421a-5478-1ed4c9660151.png)

ダウンロードしたインストーラをクリックしてインストールを進めると最後にマシン再起動の指示が出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/61216f4b-006f-e056-55f7-0cf852530dcd.png)

開いている他のアプリをすべて閉じてから「Close and restart」をクリックしてマシンを再起動する。

再起動後、サービス規約の同意を求められるので、同意する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/67756a1c-4c78-bfbe-0199-7dfbc4e76e94.png)

Docker Desktop の画面が表示されたら、初回はチュートリアルが表示されるがスキップし、Settings を開き、「Use Docker Compose V2」にチェックを入れて、「Apply & Restart」をクリックし、Docker Desktop を再起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/0186df61-707d-6e29-373b-ba2004ccfa8f.png)

正常に起動したら下記のような画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/b3c8abf9-307f-e113-003d-74fa28d089b8.png)

## GitHub連携

#### 鍵ペアを作成

ターミナルで次のコマンドを実行する。

```
ssh-keygen
```

いくつか質問されるが、すべてそのままエンターキーで進める。

ユーザ ichy の場合の例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/3c4b523a-1120-bf42-c7e4-b39d92be6d3a.png)

秘密鍵 id_rsa と公開鍵 id_rsa.pub が生成されていることを確認。

```
ls .ssh/
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/90e8ea66-b3b5-9660-fd52-dc31a4a858bc.png)

#### 公開鍵をGitHubに登録

GitHub のログイン後、 https://github.com/settings/keys にアクセスして、「New SSH Key」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/333e9cde-ae3b-492c-2e5a-fc6d6fe8b2aa.png)

以下の２つを入力して、「Add SSH Key」をクリックし登録する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/5b26eff8-3a9b-9fb5-ffde-145bed56a01c.png)

Title は今まさに構築している開発環境のことが分かりやすいタイトルにする。
Key はターミナルで公開鍵を表示して、ssh-rsa から最後まですべてをコピー＆ペーストする。
```
cat ./.ssh/id_rsa.pub
```

間違っても秘密鍵をコピー＆ペーストしないように、id_rsa.pub と .pub が付いているほうを慎重にコピー＆ペーストする。

## Railsアプリのリポジトリをクローン

GitHub上にすでに存在するRailsアプリをクローンしてみる。

#### クローン先となる作業フォルダの作成

```
mkdir workspace
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/44f2b320-4a3f-4226-8b25-01ab489de023.png)


#### クローン

```
cd workspace
git clone git@github.com:ichylinux/bizquest.git
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/c51922bb-7d02-50fb-f352-95a693492252.png)
※ 初めてGitHubにアクセスした初回だけ「Are you sure you want to continue connecting (yes/no)?」と聞かれるので、yes と入力して進める。2回目以降は聞かれない。

ソースコードがクローンできているか確認。
```
cd bizquest
ls
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/bf5e729e-3fb6-4836-b8df-14fab76e00e3.png)

#### フォルダを開く

ソース管理から、クローンしたフォルダを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/91aad280-74f2-c5cc-fa15-5231253e1d49.png)

作成者を信頼するか聞かれるので今回のGitリポジトリに関しては信頼する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/6f3b7f3c-716d-3ff7-f509-3bafb550d181.png)

エクスプローラーからソースコードが見れるようになり、コーディング可能になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/9aa4c099-ee2f-4f8a-08fe-c7775f96d049.png)

## Railsアプリを起動（まだ試行錯誤中）

#### Dockerイメージをビルド

RailsをLinux環境で起動させるためのDockerイメージをビルドする。

```
docker compose build
```

#### Node.jsをインストール

https://nodejs.org/ja/ からバージョン 16.16.0 をダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/d3182078-44f4-a36e-b141-60dfaea2f230.png)

クリックしてインストール開始。ライセンスに同意するチェックを入れる以外はすべてデフォルトのまま次に進む。

ターミナル上で Node.js のバージョンを確認できたらOK。
```
node -v
```

PowerShellを管理者として実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/f6d3d703-fd8a-d039-309b-4a862f21f2cd.png)

次のコマンドをPowerShell上で実行する。
```
Set-ExecutionPolicy RemoteSigned
```
ここでのPowerShell上での作業はこれだけなので、exit コマンドでPowerShellを閉じる。

#### Yarnをインストール

以下を通常のターミナル上で実行する。

```
npm install -g npm@8.15.1
npm install -g yarn
```

Yarnのバージョンが確認できたらOK。
```
yarn -v
```

#### JavaScriptライブラリをインストール

開発環境に必要なJavaScriptのライブラリを一通りインストールする。
```
yarn install
```

#### ブラウザでアクセス

アドレスバーに以下のURLを入力してRailsアプリにアクセスする。
```
http://localhost:3000
```