クラウドIDE Gitpodの活用法

クラウドIDE Gitpodのあらためての活用方法の紹介です。以前はCloud9というクラウドIDEにお世話になっていましたが、AWSに買収・統合されたのを機に乗り換えました。またPuppeteer v12.0.0に必要なモジュール類も記載したので参考にして下さい（バージョンによって結構異なったりするので面倒ですよね）。

１．Gitpodの特徴とメリット
・無料で100時間／月まで使える：他に有料メニューが3つあります。
　参考：[Gitpodの各プラン](https://gitpod.io/plans)
・管理者権限が使える：これ一番気に入ってます。puppeteerのインスト時等にapt-getで各種モジュールをインストしないとダメだったりするので、sudoが使えるのは他の無料のクラウドIDEにはあまり無いのでとても助かってます。sudoのためにDocker使わなくても大丈夫です（もちろんDockerも使えます）。
・front/backend両方同時の開発と連携デバッグが可能：Cloud9利用時はこれを実践していたのですが、他のクラウドIDEでは難しそうです。やり方は後述します。
・Githubとの連携が比較的楽：Github側にChrome拡張機能をインストすると、Githubのレポジトリからボタン一つでGitpodのworkspaceが起動する。
![212253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520590/51757ba2-0e7e-7088-c935-fbf4b03ebc97.png)
・workspaceはコピー/削除/名前の変更/共有/ダウンロードが可能：workspace内でのコード編集は自動セーブされ、デバッグ機能等は一通り揃ってます。

２．Gitpodの利用上の留意点
・無料プランの場合は100時間／月まで使えますが、後述のfront/backend両方同時の開発・連携をやると倍の時間を消費するので、小まめにworksapceを停止する方が良いかもしれません。また残り時間が知りたい場合は少し分かりずらい場所ですが、初期画面のSettings→Plansで上の方にRemaining hours: 99.1（残り99.1時間）のように表示されます。
![Settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520590/15717a65-40b6-d46c-412f-0fab42707678.png)
![Plans](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520590/0f303d90-2743-f8f2-afc3-228891091a4e.png)
・昨年まではworkspaceの表示名を変更できなかったので、使ったテンプレート名がそのまま残ったりリポジトリ名がそのままだったりで使いずらかったのですが、昨年末に変更できるようになったので、Workspaceリスト表示画面で該当するworkspaceの右端のメニューのRenameで変更すると管理し易くなります。
・gitpod.ymlというファイルを設定すると起動時に自動で処理が実行されるので、npm install -g　XXX.jsなどの処理はこのファイルに設定しておくと便利です。ただテンプレートや他人のリポジトリからworkspaceを作成した場合は、cronやbashが設定されていたりするとうまく動作しません。その際は一旦自分のリポジトリをGithubに作成してそこからworkspaceを新規に作成するとだいたいうまくgitpod.ymlどおり起動してくれるようです。この辺は少し複雑なので試行錯誤が必要かもしれません。下記はexpo-cliとeas-cliとngrokを起動時にグローバルインストールする例です（ngrokはexpo start --tunnelで必要）。

```yml:gitpod.yml
tasks:
  - command: npm run dev
```

```json:package.json
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "dev": "npm install -g expo-cli eas-cli @expo/ngrok@^4.1.0"
  },
  "dependencies": {
   以下省略
```
・workspaceはpinをActiveにしないとガベージコレクションで一定期間後自動的に削除されてしまいます。削除されたくないworkspaceは必ずpinを設定しておきましょう。
![pinの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520590/b1a99a18-c648-f571-09a6-0cf4001e09ff.png)
・上述したようにコードを追加修正すると自動セーブされるため、ファイルのバックアップは小まめにした方が良いと思います。

３．front/backend両方同時の開発と連携デバッグの方法
実例としてfront側のworkspaceはreact-native&expo-cliでデバッグはExpo Goの実機だとします。backendはNode.jsベースでpuppeteerでスクレイプした結果を返すhttpサーバだとします。
まずBackend側のworkspaceを起動してpuppeteerに必要なモジュールをsudoでインストールします（puppeteer本体はインスト済みが前提です、sudoがクラウド環境で使えるのが嬉しいですね）。環境は以下の通りです。
Ubuntu 20.04.2 LTS
Node 16.13.0
npm 8.1.0

```console:console
gitpod /workspace/Puppeteerv12_serverside $ npm ls puppeteer
create-react-app-gitpod@0.1.0 /workspace/Puppeteerv12_serverside
└── puppeteer@12.0.0
gitpod /workspace/Puppeteerv12_serverside $ sudo apt-get update && sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite-dev libxdamage1 libxrandr2 libgbm-dev libxshmfence-dev

```
次にpuppeteercall.jsでスクレイピング処理するscraper.jsを子プロセスとして呼び出し、結果を標準出力に出力し、3000ポートでhttpサーバがリッスンする処理です。これをnode puppeteercall.jsで起動し、portが立ち上がったらbrowserでオープンするかどうか聞かれるのでOpenします。この時表示されるURLをコピーしておきます。

```javascript:puppeteercall.js
const childProcess = require('child_process');
const http = require('http');
const url = require('url');
var ary = new Array();
var $cmd = "";
http.createServer(function(req, res) {
  const url_parse = url.parse(req.url); 
  ary = url_parse.query.split("&");
  $cmd = ['--no-warnings','./scraper.js'];
  const spawn = childProcess.spawn('node', $cmd, {detached: true});
  spawn.unref();
  spawn.stderr.on('data', (data) => {
    console.error(`ps stderr: ${data}`);
    res.end(data);
  });
  spawn.stdout.on('data', (data) => {
      res.end(data);
  });
  spawn.on('close', (code) => {
    if (code !== 0) {
        console.log(`spawn process exited with code ${code}`);
    }
  });
  spawn.stdin.write('HOGE FUGA');
  spawn.stdin.end();
}).listen(3000, '127.0.0.1');
```
今度はfront側で例えばfetchのurlに上記でコピーしたURLを設定すれば、先ほど起動したhttpサーバーにgetリクエスト等を投げられるようになり、結果を受け取った処理もデバッグが可能になります。今回はfront側の処理の説明は省略しますが、front/backendの２つのworkspaceを同時に起動し、それぞれのログ等を同時に確認することで、問題の所在がどちらにあるのかの切り分けや、処理速度を改善する効果がどちらが大きいかなど、とても効率的なデバッグが可能になると思います。

機会があれば今度は無料でGoogleやAppleにビルドアプリのアップロード＆登録までやってくれるEAS Build & Submitの実際やってみた結果も紹介できればと思います。Macが無くてもAppleにアップロード出来てしまうのはすごいですね。