Windows WSL Docker Rails7 環境構築

# Windows Terminalをインストール
https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=ja-jp&gl=jp

# WSL 2 機能を有効にする
Windows Terminallを起動して、「∨」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/3b35dc57-613a-a99d-822c-a39ead12cd45.png)

Windows PowerShellでCtrlを押しながら [管理者として開く] 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/d74551fd-e348-0a1b-145f-d27baf331567.png)


下記のコマンドを入力してから、PCを再起動します。
```
$ wsl --install
```

# Ubuntuの設定
PC再起動後、Windows Terminallを起動すると
Terminalの種類に、Ubuntuが追加されていことを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/247490b0-d4c8-bdca-36d0-8eab473d9ac6.png)

Ubuntuをクリックし、ターミナルを変更してください。これ以降、すべてのコマンドはUbuntu上で行います。
また、初回の起動時に、パスワードの入力を求められます。任意のパスワードを設定してください。
画面上ではセキュリティ上、表示されませんが、裏で入力されているので画面に変化がなくても問題ありません。
エラーが起きた場合は、英語で理由が書いてあるので、翻訳などを利用し、落ち着いて読んで解決してください。

また、Windows terminalの最初に開くものをUbunntuに変更しておきましょう。
「∨」を押し、下から、三つ目の「設定」を開いて、既定のプロファイルをUbuntuに変更してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/693fad95-ca68-da6a-25dc-de8434bd1076.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/9f5341f8-6e15-6959-1308-18325c39371d.png)

### 余談
色を変えたい場合は「配色」から変更できます。
個人的には黒がかっこよくて好きです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/b8ad00be-a8c8-68a0-de51-aa7014d599b6.png)

# Docker Desktop for Windowsのインストール
以下のサイトからダウンロードしてください。

https://docs.docker.com/desktop/install/windows-install/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/21d3db8c-b95d-7871-db9a-64bc63c8566d.png)


# GitHubの登録
こちらからサインアップしてください。
すでにアカウントを持っている人は、サインインしてください。

https://github.com/signup

# GitHubのアクセストークンの取得
下記にアクセス

https://github.com/settings/developers

左側のメニューからPersonal access tokensからtokensに移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/f972ed85-705b-8106-449e-feefcf822655.png)

Generate new token(class)をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/08725417-eea5-8271-db2f-05207caa54c2.png)



No expirationとrepoを選択(Noteは任意の文字列を入力)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/68ea3e75-9695-2cc7-d71b-bb296deb3439.png)
下まで移動して、「Genarate token」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/45d7e1e5-3ef0-616f-17c6-46f6ae09d259.png)
作成されたトークンは忘れないようにコピペして、保存しておいてください。あとで使います。
もし、コピーし忘れた場合は、再度作成してください。

# Gitのダウンロード
Ubuntuになっていることを確認して、実行
```
$ sudo apt install -y git
```

Gitがダウンロードできたか確認

```
$ git --version
```
何かしらの数字が表示できればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/11f4f81f-5e5d-0c39-5ccf-b4a9f846716d.png)

# テンプレートをGitHubからcloneしてくる
```
$ git clone https://github.com/ryanwi/rails7-on-docker.git hello_app
```
この際にGitHubに登録したユーザー名と、アクセストークンの入力を求められるので入力
※アカウントのパスワードではないので気を付けてください。

# Dockerの起動
Docker Desktop for Windowsが起動していることを確認してください。
この画面が表示されていたら問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/f4f94f9c-5288-7ff3-4b0b-5fe9e952efd5.png)

また、右上の歯車マークのところから設定に入って、
「Use the WSL 2 based engine」にチェックが入っているか確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/3acb220e-87a3-e758-d88f-dd4403118b32.png)

もし入っていなかった場合は、チェックを付けて、右下の「Apply & restart」を押してください。

# Docker imageのbuildとsetup
Windows terminalにて、以下のコマンドを順番に実行してください。
三つ目と四つ目のコマンドが時間かかります。気長に待ってください。
※Windows terminalを途中で閉じてはいけません。
```
$ cd hello_app
$ cp .env.example .env
$ docker compose build
$ docker compose run --rm web bin/rails db:setup
```

# Railsの起動
```
$ docker compose up
```

<a src="http://localhost:3000/" target="_brank">http://localhost:3000/</a>にてアプリケーションが表示されれば完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/b0a371f6-4de5-7f9d-df97-2d98a6a1bd89.png)
いろいろなボタンをさわって、動かしてみても問題ありません。

終了する際は、Ctrl + Cでコマンド入力できるようになり、以下のコマンドで終了できます。
```
$ docker compose down
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/49cf0885-9ea2-0626-0791-25c717922e86.png)

もしくは、Docker Desktopから、Deleteを押して、削除してください。
この削除は、コンテナの削除であり、ファイル等は削除されませんので気楽に削除してください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/9a4315da-d3a9-8ab1-222e-32d3df81346f.png)
※この作業をしないまま電源を落としたりするとエラーの原因になるのでお忘れなく。

以上で環境構築は完了です。

# Railsコマンドの実行
Dockerで環境構築した場合は、コンテナに対して、Railsコマンドを実行しなければいけません。
Ubuntu上でのRailsコマンドは実行できないので気を付けてください。
コンテナに対して実行する方法は2つあります

### ①docker runをRailsコマンドの前につける
-d(デタッチドモード)を付けることで、ターミナルを使える状態でRailsを起動できます。
```
 $ docker compose up -d
```
rails cの起動
```
$ docker compose run --rm web bin/rails c
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/3bc1a75c-9ac2-0d69-7a76-3dd659f282a8.png)
rails cを終了するときは
```
$ exit
```

デタッチドモードのコンテナも終了します。
```
$ docker compose down
```

### ②コンテナ内に入ってRailsコマンドを実行する

bashを起動させることで、連続でRailsコマンドを実行できます。
```
$ docker compose up -d
$ docker compose run --rm web bash
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/00f72a6e-14e4-ef3c-1142-036318b52c49.png)

この状態であれば、素の状態でRailsコマンドを実行できます。
```
$ rails db:reset
$ rails routes
```
コンテナから抜け出す時は
```
$ exit
```
デタッチドモードのコンテナも終了します。
```
$ docker compose down
```

### 一度きりの実行であれば①を、複数連続で実行する場合は②の方法を選択するとよいでしょう！

# まとめ
WSLとDockerをつかうと、環境差分を減らせるため、特定環境に起因するエラーも減らすことができます。
ぜひ使いこなしてください！
もし、不備や、誤謬がありましたら、ご指摘いただけますと幸いです。

# 参考サイト
https://learn.microsoft.com/ja-jp/windows/terminal/install

https://learn.microsoft.com/ja-jp/windows/wsl/install

https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-containers

https://rfs.jp/server/git/github/personal_access_tokens.html

https://github.com/ryanwi/rails7-on-docker

https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59