見出し画像

【GitHub】Codespacesのすすめ【初心者🔰】

Mana

こんにちはRUNTEQ55期生のManaです。
只今、RUNTEQ卒業に向けてwebアプリを誠意開発中の身です。

突然ですが皆さん、「普段開発に使わないPCからでも開発の続きがやりたい！」ということはないでしょうか？

私はもちろんあります。

会社で仕事が暇なとき、目の前のPCで開発作業ができたらいいな～と思うことが多々ありました。

そんなお悩みを解決してくれるのが、今回紹介するCodespacesです。
実際に使ってみて良かったので、私なりの使い方を共有していこうと思います。

ちなみに書いている人がプログラミングの勉強を始めて半年程度の人間なので、専門的な内容は薄めです。

それでもよろしければ、どうぞ最後までお付き合いください。


Codespacesって何？

お馴染みGitHubが提供しているクラウド上の開発環境です。

オンラインで完結しているので、ネット環境とリモートにリポジトリがあれば開発作業ができちゃいます。

しかも無料枠があります！！
（制限を超えると請求が発生してしまうので注意）

気軽に利用することができるのです。

どうやって使うの？

開発環境

使い方の説明の前に、私の開発環境について簡単に紹介しておきます。
下記の通りです。

  • Ruby on Rails 7.2.1

  • Dockerコンテナ使用

  • yarnでjsのパッケージを管理

Codespacesの開き方

まずは開発中のリポジトリに移動し、青い"code"ボタンをクリックします。

そこから下記の画像のように"Create codespaces"のボタンをクリックすると、Codespacesが起動します。

起動には数十秒かかります。

ここから開ける
VScodeが使えちゃいます

コンテナの立ち上げ方

もちろん、ブラウザの動作を確認しながら作業することだってできます。

CodespacesではDockerが使用できるので、お馴染みbuildコマンドを実行します。

$ docker compose build

続いてyarnとbundlerで管理しているパッケージをインストールします。

私の場合、コンテナを立ち上げる前にこれらをインストールしておかないと、「DBが存在しません」とログで言われ続け、うまく動きませんでした。

コンテナを立ち上げる時のコマンドにこれらは入っているのですが、手動でインストールさせないとダメでしたね。

$ docker compose run web yarn install
$ docker compose run web bundle install

インストールが完了したら、お次はCodespaces用に設定を追加します。

config/environments/development.rbに下記のコードを追記します。

Rails.application.configure do
  config.action_controller.forgery_protection_origin_check = false
  config.hosts.clear
end

上のコードが普段の開発サイト以外からのアクセスを制限を解除しています。これでCodespacesからでもDBにアクセスできます。

下のコードがホスト制限を解除しています。これで異なる開発環境からでもアクセスできるようになります。

この状態だとセキュリティが下がっているので、Codespacesをもう使わないという場合はこれらの設定を削除することをオススメします。

そして最後にコンテナを立ち上げれば、実際にブラウザを確認しながら開発作業を進められるようになります。

ブラウザの開き方は、ターミナル部分を「ポート」に切り替えて、webポート番号のアドレスに接続してください。

$ docker compose up

良かったところ

個人的にCodespasesを使ってみて良かったと思ったところを挙げていきます。

全てクラウドで完結

ネット環境さえあれば出来ちゃうのは嬉しいですね。職場のPCにWSLやDockerのインストール、Githubとの連携もしなくて済みます。

VScodeで開発できる

普段からVScodeで作業をしているので、ローカル開発と変わらない操作ができました。

Dockerが利用できる

いろんなところで同じ開発環境を構築できるDocker君はやっぱり便利なんだなぁ。

気になったところ

続いて気になった点は下記の通りです。

無料枠だと動作が遅い

普段使っているPCと比べてCodespacesのスペックの方が低くなっているので、動作がもっさりしちゃってます。

お金かけてないのでここは文句言えません。

でも今のところ不都合はないです。

環境変数

環境変数をenvファイルで設定している場合、リポジトリに載せていないことがほとんどです。そのため別途ファイルを用意しないと、環境変数を取得できずエラーが発生します。

これはCodespacesに限った話ではないですが、ちょっと面倒だなって思いました。

使用状況の確認方法

自分がどれだけCodespacesを利用しているのかを確認することもできます。詳しい方法は下記のページをご覧ください。

まとめ

Codespacesは、ネットとPCさえあれば開発作業ができちゃうサービスだよっていう紹介でした。

外出先の空き時間で作業を進める時、リモートワークの時などに利用したら便利だと思います。

ぜひ皆さんも使ってみてはどうでしょうか！

いいなと思ったら応援しよう！