フロントエンド動作重くないか？本当のこと言って何で悪いんだ！

東大医学部頭悪いおじさんは元気だろうか

それはそうと、ノートパソコンとか低スペックパソコンでフロントエンド開発してる人たちは以下のどれかを感じたことがあるはずです。

ビルド遅すぎ...
HMRやってるとパソコン重すぎ...
HMRやってるとパソコンが悲鳴をあげてクッソ熱くなる...

HMR(Hot Module Replacement)による開発はすごく便利ですが、ファイルの変更を常に監視して自動でブラウザに反映させるんですから、当然パソコンに多大な負荷がかかり、激重PCに大変身してしまいます。
Dockerなんかも同時に起動してたらもう大変です。僕のPC(2020版Macbook Air)くんはまともに動くものでは無くなってしまいました...

そんなときに出会ったのがクラウド開発環境でした。開発中にパソコンが🔥🔥🔥することも無くなり、激重問題は今では微塵も感じていません。

この記事ではそんなクラウド開発環境と、GCPでフロントエンド開発を行ってみるところを紹介します。
似たような記事がQiitaに見つからなかったけど、もし二番煎じだったらすみません🙇‍♂️

クラウド開発環境ってなーに？

クラウド開発環境少女ハイジ。

クラウド開発環境はその名の通り、AWSやGCPといったクラウド上に構築する開発環境のことです。ローカルで行う開発では得られない素晴らしい開発体験が得られます。
クラウドIDEと呼ばれるクラウド開発環境専用サービスもありますね🙃

メリット

1. 低スペックPCでも高スペックPCを使ってるような開発ができる

クラウドで使われてるハードウェアなんてどうせ化け物なんで、いくら多くの人が使ってるとはいえそこら辺のノートパソコンを使うよりはよっぽど高スペックなハードウェアを使えます。

自分のPCで行うことはエディタを表示することだけです。だいたいの処理は化け物が請け負ってくれます。クラウドなのでスペックが選べるのも魅力的ですね。
ビルド早いんじゃ

2. どんなマシンからでもLinuxが使える

WindowsはWSLでLinuxが使えますが、IO的な問題もあるらしいのでDocker使うときとか普通にLinux使いたいですよね。
GCPの場合はデフォルトでDebianですし、AWSやAzureは触ったことないので分からないですが、LinuxOSを選択することはできるでしょう。
Docker for Macってめちゃくちゃ重くなるのでクラウド上でDocker使った開発ができるのは嬉しいです！

3. 自分のPCを酷使せずに済む

プログラミングってファイルの読み書きが結構激しいんで、SSDなんかへの負担が激しいんですよね。大学入学時に購入したPCのSSDも3年で死んじゃいました。
壊れなくてもHMRの開発サーバーが立ってるときのぶぉぉおおぉぉおおおぉぉおおぉぉんと高熱はあまり気分が良いものではないです。

クラウド環境の場合、ぶぉぉおおぉぉおおおぉぉおおぉぉんをやるのは自分のPCではなく、遠く離れたどこかの化け物コンピューターです。化け物は化け物らしくしてもらうとして、かわいい自分のPCは大事にしてあげましょう。

4. 開発PCとは別のPCのブラウザから実行結果が確認できる

通常ローカルで開発サーバーをたてたら、基本的にはそのPCでしかlocalhostにアクセスできません。¹

「Macで開発してるけど、Windowsでの動作も確認したい...」なんてときもWindowsからアクセスできます。

5. モジュールのインストールや`git pull`が早い

多分インターネットもそこそこ早いので、少なくともあたしンちのネット回線(~~10Mbpsくらいのカス回線~~)よりは素早くnode_modulesのインストールが終わります。
参考までに、GCPのインスタンス内でスピードテストしてみたら以下の結果になりました

Testing download speed................................................................................
Download: 1569.29 Mbit/s
Testing upload speed................................................................................................
Upload: 876.55 Mbit/s

下り1.5Gbpsはだいたいのインターネットより早いんじゃないでしょうか(適当)

メリットまとめ

ひとことで言えば、クソ強マシンのサブスクができるということです。いい時代やでほんま

デメリット

世の中なんでもいいってことはないですよね

1. お金がかかりがち

ローカル環境はもちろんPC購入時点でお金はかかりませんし、上記クラウドIDEは基本無料みたいなこともあるみたいですが、今回のようにCompute Engineのインスタンスで環境構築する場合はインスタンス起動時間に比例してお金がかかります。

ちなみに、今僕が使用している環境だと毎時$0.09です。毎日8時間プログラミングしたとしても月2400円くらいです。
これですごい環境手に入るなら安いと思いますが、ちょっとでもお金かかるのが嫌という方もいらっしゃるでしょう。そういう方には向いてないかもしれません。

ていうか化け物PCあるならクラウド環境は金の無駄でしょう。

2. 環境を自分でゼロから構築しないといけない

クラウドIDEだとRailsとかNode.jsとか用意されてることもあるらしいのですが、今回の場合はそんなものないので開発環境は全部自分で整える必要があります。
逆に言えば自分好みに染められるというメリットにもなり得るかな？

とはいえ環境作りはめんどい工程が多いですよね。下のほうに書いてある構築方法も地味に長いです。

3. Web開発くらいしか向かない

基本的にGUIは使えないんで、ブラウザからURL打ってアプリ見るみたいな感じじゃないと厳しいものはあります。
VPNで接続すればデスクトップからGUIが見れるのでネイティブアプリの開発もできなくもないんですが、うちのネット速度のせいかどうも動きがもっさりしてしまいました。ブラウザもまともに見れないンゴ...
Electron開発とかもできたら良かったのになあ。

デメリットまとめ

お金がかかるというのが最大にして最強のデメリットですね。それを許せるかにかかると思います。

クラウドIDEじゃなくてGCP？？？

クラウド開発環境+無料枠が手に入るならクラウドIDEを使えばいいってなりますよね。開発環境のテンプレートも用意されてるみたいですしね。
もちろんクラウドIDEでは享受できないものがあります。

1. 好きなエディタを使える

クラウドIDEは統合開発環境の名の通り、使えるエディタはクラウドIDEの用意したエディタのみです。VS Codeライクなものが多いようですが、にしても使い慣れたエディタを使いたいです。

AWSのEC2やGCPのComputeEngineのようなインスタンスに接続するタイプだと、SSH接続に対応してるエディタやIDEならなんでも使えます。
VS Codeもつかえます😇²。あんまり調べてないけどPHP StormでもSSH接続対応してたからSSH接続が使えるエディタは珍しくないと思います。

2. スペックや値段に対して柔軟

もちろんインスタンスなんで、スペックについては値段と相談しつつ好きに決められます。
最初は安めのスペックで環境がつらくなってきたらスペック上げる、なんてことができるわけですね。

ただ、クラウドIDEの場合だとスペックと値段が固定されていて、そんなにスペック出せないものもあります。

例えば前述のPaizaCloudの最上位プランとGCPの場合を比較してみましょう。

|値段|CPU|メモリ|ディスク容量
--|--|--|--|--
PaizaCloud|2,178円/月|2コア|2GB|4GB
GCP|設定による|選べる|選べる|選べる

なんだこのゴミ表...
改めてPaizaCloudとGCPの設定を同じにしてみると

|値段|CPU|メモリ|ディスク容量
--|--|--|--|--
PaizaCloud|2,178円/月|2コア|2GB|4GB
GCP|$0.07/時(5,407円/月)|2コア|2GB|10GB(最小設定)

**ファッ！？**GCPのほうがクソ高いやんけ...使うのやめよ...
って考えるのはまだ早いぜお嬢さん

PaizaCloudの場合は月額定額ですが、GCPの場合はインスタンス起動時間のみです。
使わないときはインスタンスを停止しておけば、料金はかかりません。毎日8時間起動したとしても1800円です。
24時間365日プログラミングなんてできませんから、使うときだけ課金というこの仕組みのほうが多分安いです。

こういった意味でも柔軟ですね。

話が逸れた。
表を見ていただくと、最上位プランのスペックですらメモリ2GBとかディスク4GBとかしか得られないことが分かります。それに対してインスタンスのなんたる柔軟なことか。
上げようと思えばめっちゃ上げられますし、もっとチープな環境も自由自在です。すげぇや！

とはいえ

ぶっちゃけ僕がGCP使うのはそれしかやったことないからです。クラウドIDEのほうが便利そうなら多分そっちに移行しますね。今回もなんか良いことないかと必死にこじつけてました。

サーバー構築とかどんなんになってんだろうなーっていう興味も含まれてまして僕はGCPを使ってますが、自分の使いたいサービス使うのが一番だと思います。まる。

想定外に

長くなってしまったので記事分けます。
→構築編

LANを弄り回せば他のPCやスマホからアクセスできるらしいですが、わかりましぇん
しかし、クラウド開発環境では127.0.0.1みたいなローカル専用IPではない、その辺に流れてるIPアドレスにアクセスして実行結果を確認するため、色んな端末からアクセス可能です。 ↩
Remote-SSHさん大変お世話になってます ↩