VSCodeとWSLで作る！Ruby on Rails & Vue.js の環境構築講座

どうもShota(@Mii4a_Shota)です！
今回VSCodeとWSLを用いてRuby on RailsとVue.jsで開発できる環境を構築できたので備忘録＆アウトプット目的に記しておこうと思います！

## 1. VSCode
![コメント 2020-04-15 025031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/9dc1afb7-d1d9-b5ff-e240-aa9c87464284.png)

皆さんご存知、Microsoft社の提供する高機能コードエディターです。
以下のリンクからダウンロードしましょう。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/


## 2. WSLのセットアップ


### 2-1. Windows Subsystem for Linuxにチェックする

![コメント 2020-04-15 025524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/cdac1ccd-4290-df89-7adb-b865ddd48b6c.png)
![コメント 2020-04-15 025637.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/5a84701f-4141-1ca3-482b-bad4705dd994.png)

**'設定'>'アプリと機能'>'プログラムと機能'>'Windowsの機能の有効化または無効化'>'Windows Subsystem for Linux'** にチェックを入れて追加要素をインストールします。

<h3>Microsoft StoreからUbuntuをインストール</h3>
![コメント 2020-04-15 030354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/147586d6-78c4-dc84-d390-70bfeb63c803.png)

正直ここはお好きなディストリビューションを選んでいただいて構いませんが、今回はUbuntuを選びました。
（なお、Ubuntu以外のLinuxディストリビューションを選んだ場合、この後の設定が異なる可能性がありますので、その際はご自身で調べていただけると幸いです。）

### 2-2. Ubuntuのセットアップ
![コメント 2020-04-15 030922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/8963669d-4afe-cd37-11bf-c9cd7ebbae5b.png)

Ubuntuを起動し、ユーザー名とパスワードを登録します。

### 2-3. Remote WSLのセットアップ

![コメント 2020-04-15 093611.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/ba044333-2696-3aa2-145b-b097d9233adf.png)
![コメント 2020-04-15 093623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/21e6fa16-2f63-9205-1844-3af8e5fa2d7c.png)


VSCodeを開き、左側アイコンの**拡張機能**から、リモート上のUNIX（ここではUbuntu）に接続する・操作するための**Remote WSL**、VSCodeからWSLに接続するための**Remote Development**をインストールしましょう。

![コメント 2020-04-15 092558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/0c14d17b-effd-d2a7-08e8-953ce9ca240d.png)

インストールして再起動すると、右下に緑色のアイコンが作られるので、クリックし、

![コメント 2020-04-15 092724.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/b52d58ce-a3d0-16dd-1570-e4656a856398.png)

**Remote-WSL: New Window**を選択。

![コメント 2020-04-15 092757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/fdf779f4-7b7c-9700-52f6-c24709c639be.png)

右下のアイコンが上記のように、**WSL**や**WSL:Ubuntu**のようになったら接続完了です。

## 3. Rubyのインストール

**Shift+crtl+@**でターミナルが開くのでそこからコマンドを入力していきます。

### 3-1. aptの更新

Ruby等をダウンロードするため、パッケージマネージャーのapt等の更新をしていきます。
まず、日本リポジトリに設定します。

```shell:
$ 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です。

```shell:
$ sudo apt update
$ sudo apt full-upgrade
```

### 3-2. git / rbenv / Ruby のインストール

rbenvは複数のバージョンのRubyを管理、インストールできるようになるシステムです。

```shell:
# 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の際、何らかの要素が足りずエラーが出ることがあります。その際は以下の記事を参考にしてください。

https://qiita.com/Developer_KanZG/items/f329dd3dd197b2005390#2-wsl%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97

## 4. Ruby on Rails のインストール

### 4-1. rails / sqlite3 をインストール

gemでRailsをインストールします。
SQlite3が入っていないとエラーになるため、こちらモインストールします。

```shell:
# railsのインストール
$ gem install rails

# sqlite3のインストール
$ gem install sqlite3
```

### 4-2. Ruby on Rails / Node.js のセットアップ

Rails sで立ち上げるのに必要な、**Node.js**をターミナルからインストールします。この作業で何か不具合が出た場合は、以下のリンクで調べてみると手がかりが得られるかもしれません。

https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

``` shell:
# 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```の際、以下のような画面が出てきたら「何もない」ということで次に進んで大丈夫です。

![コメント 2020-04-15 100327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/c734a900-03ed-7fd5-fa83-b5780a6d6477.png)

インストールを進めます。

```shell:
# Node.jsの現在のリリースをインストールする(最新の機能強化をテストするためだそうです)
$ nvm install node

# Node.jsの最新の安定したLTSリリースをインストールします（推奨とのこと）
$ nvm install --lts

# Node.jsのバージョンを再度一覧表示
$ nvm ls
```

以下のように表示されたら大丈夫です。

![コメント 2020-04-15 101108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/84fdd480-acf7-b70a-b4ea-7f2f274b96b9.png)

### 4-3. Node.js / npm のバージョン確認</h3>

念のため、Node.jsやnpmがしっかりインストールされており、現在の既定のバージョンであることを確認しましょう。

```sh:
# Node.jsのバージョン確認
node --version

# npmの確認
npm --version
```
### 4-3. yarnのインストール

Rails6から標準装備されているwebpackerをインストールするために、yarnをインストールします。以下のコマンドを打ってください。
また、ディストリビューションが異なる際は、以下の公式リファレンスを参照してください。

https://classic.yarnpkg.com/ja/docs/install#windows-stable

```sh:
$ 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の部分には、お好きなアプリ名を入れてください）

```ruby:
$ rails new hogehoge --wabpack=vue
```

エラーもなく、順調に作成出来たら、アプリのディレクトリに移動し、bundlerを用いて必要なgemをインストールしましょう。

```ruby:
$ cd hogehoge
$ bundle install
```

<h2>rails server</h2>

ようやく最後です！
アプリのディレクトリ移動したことを確認したら、

```ruby:
$ rails s
```

を入力してローカルサーバーを立ち上げましょう。
その際、以下のようなエラーが起きる場合があります。（yarnが最新版ではないようです)

```ruby:

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が成功したら

```ruby:
$ 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/```にアクセスしてみましょう！

![コメント 2020-04-15 102120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440707/ee6de7ea-6e01-1424-82a2-965bd0a086f6.png)

この画面が表示されていたら成功です！
お疲れさまでした！

## 6. まとめ

- まずはもう何が何でも公式サイトを調べる
- 出力メッセージをしっかりと読むこと
- エラーを直すためにググりすぎてよくわからなくなってしまったら、諦めず最初からやり直して、うまくいきそうなパターンを調べること

自分もこの環境を構築するまで数時間かかったのですが、この３つの事柄を頭に入れて調べることが大切だと思いました。
この環境構築のまとめが誰かの助けになったら幸いです。ありがとうございました！

## 7. 参考
<a href="https://qiita.com/Developer_KanZG/items/f329dd3dd197b2005390">WSLで作るRuby on Rails環境構築 ~VSCode Remoteを添えて~ </a>
<a href="https://azure.microsoft.com/ja-jp/products/visual-studio-code/">Visual Studio Code</a>
<a href="https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2">Microsoft Docs</a>
<a href="https://classic.yarnpkg.com/ja/docs/install#windows-stable">インストール | yarn</a>