iPad Next.js GitHub Codespacesでの開発環境の構築と注意点
iPadで開発がしたいなあ
なんてことを俺は漠然と考えていた。
VSCodeのアプリとかないし、そもそもiPadでローカルホストとか立ち上げられんのか？
など考えていた。
そこでperplexityタソに聞いてみたところ、
iPadでNext.jsアプリケーションを開発する場合、以下の環境構成がベストだと考えられます:
Blink + GitHub Codespaces
これが現時点で最も優れた選択肢です。
Blinkは最近大幅にアップデートされ、VSCodeライクなエディタ機能が追加されました。
GitHub Codespacesと組み合わせることで、フル機能のクラウド開発環境を利用できます。
codeコマンドでVSCodeライクなエディタを起動でき、iPad内のファイルにもアクセス可能です。
と言われてBlinkをダウンロードしてみたらそれはもう有料でもう...
codesandboxとかでもいいやん！
とは思ったけどなんか違う。やっぱりVSCodeみたいなのがいい！
待てよ...CodespacesってあのGithubのリポジトリ上で「.」押したら使えるあれだよな...
あれはもうVSCodeですやん。ブラウザ上で開発するのが嫌じゃなければ問題なくね？？？
よっしゃGithub Codespacesでやるぞ！
※ お気づきの方もいるでしょうが別にiPadに限った話ではないです
事前準備
- Githubアカウント
- 最低限のコマンドライン操作
- 最低限のGit及びGithubの知識
:::note info
記事を書くにあたって全部PCでやっていますので悪しからず（iPadちゃうんかい）
:::
環境構築
リポジトリを作る
今回は「codespaces-demo」という名前のリポジトリを作りました。
空っぽだあ
Codespacesを起動させる
リポジトリの画面で「Create a codespace」ボタンを押しましょう。押して！
空では無い場合（例えばREADME.mdだけあったり）は「.」を押して起動しましょう。押して！
ターミナルを表示させる
右上の画面下に何か出しそうなボタンからターミナルを表示させましょう。
Next.jsのプロジェクトを作成
以下のコマンドでプロジェクトを作成します。yesyesyesyes
npx create-next-app@latest
できました。
サーバーの起動
以下のコマンドでいつものノリでサーバーを起動しようとしてみましょう。
cd my-app/
npm run dev
そしたら右下にlocalhost:3000はこっちだ！と言ってきます。クリックしましょう。見逃さないようにしましょう。
環境構築完了
無事環境構築が完了しました。
codespaces側で文言などを変更したらリロードなしでちゃんと更新されますし、ローカルの環境構築と遜色なく開発ができるかと思います。
諸々のインスタンスはどうなっているのか
2回目以降はどうなるのか
こちらが本題まであるんすけど、
次の日に開発しようかなと思った時、この手順で進めるとどうなるのかなんですが、
こうなります。
※ 初回にREADME.mdとか作ってる人は初回からこんな感じ
この場合「GitHub Codespacesで作業を続ける」ボタンを押すのですが、
こんな選択肢が出ます。
起動するインスタンスのスペックが選べるんですねえ。そうか。ほなええやつの方がええやろ。
全て消えている
マージしていないファイルはもちろん消えています。
拡張機能の設定とかも全部消えています。
違うインスタンスを起動しているのだから当たり前
なんですよね。
実はこんなページがありまして。
作成したインスタンスが一覧で表示されています。
下が初めに作った昨日のもの、上が今日起動したものですね。
下のものをクリックしてみましょう。
おー帰ってきたあ。
どう運用するか
codespacesのページから既存のものを毎回起動するのがセオリーと言えるでしょう。
料金について
いいインスタンスを選択出来るってなった時に思ったんですが、絶対無料じゃ無いよねってことでこちら。 まとめるとこんな感じらしい。
Codespacesの料金体系
2コア: $0.18/時間
4コア: $0.36/時間
8コア: $0.72/時間
16コア: $1.44/時間
32コア: $2.88/時間
つまり、コア数が増えるほど時間単価が上がります。例えば、32コアのインスタンスを1時間使用すると、2コアの16倍の料金がかかることになります。
無料枠について
個人アカウントには毎月一定の無料枠が用意されています:
2コアインスタンス: 60時間/月
4コアインスタンス: 30時間/月
8コアインスタンス: 15時間/月
無料枠を超えて使用した場合や、より高スペックのインスタンスを選択した場合は追加料金が発生します。
ストレージ料金
コンピューティング料金に加えて、使用するストレージ容量に応じた料金も発生します:
$0.07/GB/月
ただし、15GBまでは無料で使用できます。
なのでさっき起動したええやつは消しましょうね。
ちなみに停止している間は時間のカウントはされないそうです。
Codespacesの正しい停止方法
ブラウザで閉じるだけでは不十分です。ブラウザタブを閉じても、Codespacesはリモートマシン上で実行され続けます。
明示的に停止する必要があります。以下のいずれかの方法で停止できます:
GitHub.com上で:
https://github.com/codespaces にアクセス
停止したいCodespaceの右側の省略記号(...)をクリック
[Stop codespace]を選択
VS Code内で:
コマンドパレットを開く(Ctrl+Shift+P または Cmd+Shift+P)
"Codespaces: Stop Codespace"を選択して実行
GitHub CLIを使用:
ターミナルでgh codespace stopコマンドを実行
停止すると、実行中のプロセスはすべて停止されますが、保存済みの変更は維持されます。
注意点
停止しないと、非アクティブ状態でもタイムアウトするまで実行され続けます(デフォルトは30分)。
実行中のCodespacesのみCPU使用料が発生します。停止したCodespacesはストレージコストのみ発生します。
長期間使用しない場合は、ストレージコストを節約するために削除することも検討してください。
ここから止めるのが一番簡単です。一応非アクティブ30分でも切れるのであまり気にしなくていいのかも？
まとめ
これを無料で使えるのはすごい！
でも最高で60Hしか無料は無いので本業でがっつり使うのは不可能ですね。
普段はPCで作業して休日とかにサクッとiPadで作業するというスタイルならそんなに不便はなさそうに感じました。
Discussion