【Windows】VSCodeでRuby on Rails環境構築

今回のゴール:VSCodeでRuby on Rails環境を構築してからYay! You’re on Rails!を表示させる。

動作環境

  • Windows10
  • VSCode
  • Gitbash
  • Ruby 2.6.5
  • Rails 6.0.2.1

 

Ruby+devkitのインストール

①Ruby+Devkit 2.6.5-1 (x64)を下記からダウンロード。

Downloads
The easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...

②ダウンロードしたファイルを実行してインストール。

③インストール後コマンドプロンプトを起動し

ruby -v

を実行してバージョンが表示されればOK!

GitBashインストール

①GitBashをダウンロードしてこれもインストール。

Git for Windows
We bring the awesome Git VCS to Windows

VSCodeのインストールとGitBashの連携

①VSCodeをダウンロードしインストール

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

②左下の歯車⇒settings⇒「terminal.integrated.shell.windows」で検索⇒Edit in settings.jonson

RUBY_install000001

③下記画面が表示されるのでterminalの箇所をGitBashのインストール先に変更。

今回の環境の場合

“terminal.integrated.shell.windows”: “E:\\Git\\bin\\bash.exe”
最初はE:\Git\bin\bash.exeで設定してしまいエラーで小一時間悩みました。

RUBY_install000002

④VSCode上でGitBashが使えるようになったはずです。

ターミナルから試しにlsなど入力し設定できているか確認。

Railsインストール

①インストールコマンド実行

gem install rails

②インストール確認

rails -v

バージョンが確認できればOK。

Railsのインストールまで完了しましたがここでサーバ起動だ!と早まってしまうと以下のようなエラーで怒られます(笑)

  • Please run rails webpacker:install Error: No such file or directory
  • Node.js not installed
  • Yarn not installed

なので引き続き下記手順をたどってください。

Node.jsのインストール

①Windowsインストーラをダウンロードして実行

Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

②インストール確認

node -v

npm -v

バージョンが表示されればOK

Yarnのインストール

①コマンドの実行

npm install -g yarn

②インストール確認

yarn -v

バージョンが表示されればOK

sqlite3のインストール

①コマンド実行

gem install sqlite3

②インストール確認

gem list sqlite3

bundle install

①コマンド実行

bundle install

webpackerのインストール

①コマンド実行

rails webpacker:install

サーバ起動

①コマンドでアプリの作成

rails new cloudinfra

②アプリフォルダに移動

cd cloudinfra

③これでお待ちかねの

rails s

④そして!ついに!

ブラウザでhttp://localhost:3000/に接続すると

RUBY_install000003

congratulations\(^o^)/

お疲れさまでした!

コメント

タイトルとURLをコピーしました