masalibの日記

システム開発、運用と猫の写真ブログです

トップ > react > macが壊れたけどreactの勉強がしたいので「gitpod」を使う事にした

macが壊れたけどreactの勉強がしたいので「gitpod」を使う事にした

react

自分用の備忘録です

経緯

nodeが認識しなくて、バーチャルボックスでvmを起動しても うまくreactがインストールできない。。。

8年選手のmacbookなので寿命。 怖くてOSの再インストールもできない・・・

家だとWindowsのディスクトップのマシンがあるので問題ないが 外にいって開発する場合は、macbookしかもっていないのでmacbookになる。

macbookを購入すればいいけど、テレワークの時代でほとんど家で作業をおこなう。 一週間の中で４時間ぐらいしか使わないのに10万以上かけるお金は持ち合わせていない。

web上で開発環境が構築できるcloud9やCodeSandBoxが有名だけど 昔、メモリ不足で苦労した思い出があるのでcreate-react-appに成功した 「gitpod（https://www.gitpod.io/）」というサービスを使うことにした

環境構築の手順

１・gitpodのサンプルで動くリポジトリをfockする

https://github.com/jeromewu/create-react-app-gitpod
　↓
https://github.com/masalib/create-react-app-gitpod

２・ブラウザでワークスペースを作成するURLにアクセスする

自分の場合は以下になる

https://gitpod.io/#https://github.com/masalib/create-react-app-gitpod

起動に１分ぐらいかかった（初期だけかもしれない）
以後は以下のURLにアクセスしてワークスペースを開く。

https://gitpod.io/workspaces/

14日以上アクセスしないとワークスペースが消される。基本はgithubにpushしているので再度作り直せばいける。

コミットおよびPUSHの方法について

お恥ずかしいのですがいつもはSourceTreeのツールを使ってコミットおよびPUSHをしています。
gitpodもGUIでコミットとPUSHできるかもしれないのですが、手っ取り早くしたかったのでコマンドで対応しました

sourceの差分

git diff

sourceの追加（ローカル上）

git add .

コミット

git commit -m "コミット内容"

PUSH

git push origin master

トラブルシューティング

たまたまなのですがnpm startで動いているプロセスがストップしてしまいました
再度、npm startのコマンドを実行しても下記のメッセージがでてうまくいきません

? Something is already running on port 3000. Probably:
  create-react-app-gitpod (pid 5419)
  in /workspace/create-react-app-gitpod

Would you like to run the app on another port instead? (Y/n)

「y」を入力すると今度は,3000port以外許可されていないというエラーメッセージが表示されます

killのコマンドでプロセスを殺そうとしたのですが、なぜか消せず・・・

結局、ログアウトみたいな形にすると止まりました

exit

これが正しいとは思わないのですが、これで治ったのでメモとして残します

感想

  • １年前まで100時間無料だったけど50時間無料になった。時間が減った部分は残念。そこまで使わないのでいいけど・・・

  • vscodeの拡張が使えるようになったみたいだけど、使いこなしたい。

参考URL