Help us understand the problem. What is going on with this article?

Visual Studio Codespaces で Ruby on Rails

最近 Rails を始めた VSCoder ですが、以下の問題点がありました。
※VSCoder: Visual Studio Code 愛用者

  • 環境構築が面倒

そのため、AWS の Cloud9 を利用していたのですが、今度は以下の問題が

  • ブラウザ上のエディタは使いづらく違和感がある
  • VSCode が使いたい

そこで今ホットな Visual Studio Codespaces に手を出してみて、人生変わりました。

Visual Studio Codespaces とは?

一言で言うと、クラウド上の開発環境です。
公式サイトから引用すると、以下の特徴が挙げられます。

  • Git リポジトリ、拡張機能、および組み込みのコマンドライン インターフェイスを備えたブラウザーベースのエディターである
  • どのデバイスからでもアプリケーションを編集、実行、デバッグできる

また、私にとって最大の特徴は、

  • デスクトップアプリの VSCode でも開発できる

ということです。もちろん拡張機能も追加できます。

Codespace を作成する

  1. Azure のアカウントを作成します。
  2. Visual Studio Codespaces のサイトから、Azure アカウントで Sign in します。
  3. Create Codespace で作成します。Codespace Name だけ指定すれば、あとはデフォルトで十分だと思います。既存のリポジトリがあれば、Git Repository で指定すると自動的に Clone してくれます。(Rails + Space で Railspace という名前にしてみました)

image.png

ブラウザ上に VSCode が出ます!!!
image.png

ターミナルも使えます。vsonline というユーザで workspace が作られています。
image.png

Python はデフォルトでいろいろ入っています。
image.png

デスクトップアプリの VSCode で開く

  1. Visual Studio Code のインストール
  2. ウィンドウ左側のツールバーの Extensions で Visual Studio Codespaces をインストール image.png
  3. Remote Explorer のアイコンができるのでそこから先ほど作成したのと同じアカウントに Sign in します。 image.png
  4. 先ほど作成した Railspace という Codespace が出てくるので、コンセントのマークをクリックして connect します。 image.png

これでいつもの VScode です!!
image.png

Ruby on Rails の環境構築

Cloud9 はデフォルトで Ruby や Rails の環境がありますが、Visual Studio Codespaces では残念ながらありません...。まあどうせ、 Cloud9 でもバージョン変えたりするので。
以下はすべて、Codespace に接続した デスクトップアプリの VSCode のターミナルで行います。
Codespaces は Linux 環境を使用しているので、基本的には普通の Linux への環境構築と同じです。

rbenv のインストール

Ruby 公式サイトでもおすすめしているこちらの README を参考にインストールしていきます。rbenv によって Ruby の複数のバージョンを管理できます。

まずはリポジトリをクローンしてパスに追加し、セットアップします。

$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'export PATH="$HOME/.rbenv/shims:$PATH"' >> ~/.bashrc
$ ~/.rbenv/bin/rbenv init

その後、ターミナルを再起動する必要があるので、 + ボタンで新しいターミナルを開いてください
以下のコマンドを入力して確認できますが、rbenv install が not found になっています。

$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

image.png

指示されたリンクの通り、以下で解決します。

$ mkdir -p "$(rbenv root)"/plugins
$ git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

もう一度確認すると、今度はうまくいっているはずです。

$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

image.png

これで rbenv は完了です。私はここが山場でした。

Ruby と Rails のインストール

主要な Ruby のバージョンを確認できます。すべて見たい場合は、$ rbenv install --list-all で可能です。

$ rbenv install --list

あとは $ rbenv install [バージョンナンバー] で好きなバージョンをインストールできます。

$ rbenv install 2.7.1

インストール後、以下のコマンドでどのバージョンの Ruby を使うか指定します。

$ rbenv global 2.7.1

無事に Ruby がインストールできました!
image.png

続いて、Rails をインストールします。

$ gem install rails

Rails をインストールできました!
image.png

アプリの作成とローカルホストへのアクセス

あとはまるでローカル環境であるかのように開発ができます。
ローカルホストも使えます

$ rails new SampleApp

で Rails アプリを作成後、

$ rails s

でサーバを立ち上げます。

以下の画像のように、 Remote Explorer > Forward Port... をクリックし、3000と入力して Enter を押し、localhost:3000 に繋げます。
image.png

ブラウザで http://localhost:3000/ にアクセスすると...
image.png

以上です。
Rails に関しては始めて2カ月なので至らない点があるかもしれないです。
修正やコメントお待ちしてます。

Shun141
青山学院大学、情報系の学生です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした