[devbox] Process Composeを利用して開発環境の管理を簡素化

- 新しい開発環境構築の選択肢として登場した[devboxを試している記事を書いています。](https://dev.classmethod.jp/tags/devbox/)
- 今回はdevbox0.4.7で追加されたProcess Compose機能を利用してDocker Composeのように開発環境の管理をサービスとして簡素化する方法を記録いたします。

## 環境
- macOS Ventura 13.1
- devbox 0.4.7

## 手順

### 対象プロジェクトの準備
- 以下のコマンドを実行して、devbox環境及びnodejsプロジェクトを作成します。

```shell
# devbox環境作成
$ mkdir sample; cd $_
$ devbox init
$ devbox add nodejs-19_x
$ devbox shell

# devbox環境シェル内
(devbox)$ node -v
v19.5.0

# nodejsプロジェクト作成
(devbox)$ npm init -y
(devbox)$ npm i express
(devbox)$ touch app.js
```

- 実行後、作成された`app.js`を以下の内容にします。

```javascript:app.js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('こんにちは')
})

app.listen(port, () => {
  console.log(`${port}ポート開始`)
})

```

### Process Compose機能の有効化

- その後Process Compose機能を利用するため、以下のコマンドで`process-compose.yml`を作成します。
    - **※[Process Compose機能](https://www.jetpack.io/devbox/docs/guides/services/#defining-your-own-services)とは、[
process-compose](https://github.com/F1bonacc1/process-compose)という非コンテナ環境を管理するためのOSSをバックグラウンドに利用したTUIアプリケーションです。**
    - **※docker-composeのようにyamlに宣言的に記述することでサービスとして簡易的に環境の管理や実行を行うことが可能です。**

```shell
touch process-compose.yml
```

- 作成後、`process-compose.yml`の内容を以下にします。
    - **※細かい記述内容は[こちらを参照](https://github.com/F1bonacc1/process-compose#documentation)**

```yaml:process-compose.yml
version: "0.5"

processes:
  app:
   command: node --watch app.js
   availability:
    restart: "always"
```

### サービスの起動

- 記述後、以下のコマンドを実行してyaml内の`processes`に定義したserviceを立ち上げます。

```shell
devbox services up
```

- 実行後、以下のようにProcess ComposeのUIが表示されることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/13078811-411c-8eaf-c679-108d90ed13ee.png)

- 上記の画像でステータスやログなどの実行プロセスが確認できます。
- 上記の画像で`STATUS`が`Running`となっていることを確認したら、`localhost:3000`にアクセスして簡易なアプリケーションが表示されていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/1e4a945a-eae1-c6c1-d413-89ccea31cd96.png)

- 確認後、`app.js`内の`こんにちは`の内容を任意の文字列に変更して、**Process ComposeのUIのログ**及び**localhost:3000の表示内容**が以下のように変化していることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/4fcf7298-bda2-8ff8-a3a7-1d43f6ab6489.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/0aabf2a0-099e-8641-91af-d13300488266.png)

- このようにProcess ComposeのUI上で立ち上がっている**プロセスやログの確認**が可能です。
- Process ComposeのUI上での**主な操作一覧**は以下です。

|キー|説明|
|:---:|:---:|
|F3|サービス内容確認|
|Ctrl + S|ログの選択内容をEnterキーでクリップボードにコピー|
|F9|選択サービスの停止。yaml内のrestartにalwaysが設定されているとrestartが走る|
|Ctrl + r|選択サービスの再起動。|
|F10|シャットダウン。Quitボタンをクリックすることでサービス及びUIの停止が可能。|

- サービスを停止するときは上記の操作一覧に従って**F10**キーを押下すれば、UI画面が消えて`localhost:3000`も表示されなくなります。
- 以上です。

## 補足
- `docker compose up -d`のように、UI画面が必要なくサービスをバックグラウンドで実行したい場合は`devbox services up -b`とうつことで可能です。
- その際のサービス確認は以下のように`devbox services ls`、停止は`devbox services stop`で実行します。

![devbox-service-manage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/2715799d-1f19-b006-8ff1-f917f80c6721.png)

## 参考
- [Github](https://github.com/jetpack-io/devbox)
- [0.4.7](https://github.com/jetpack-io/devbox/releases/tag/0.4.7)
- [process-compose](https://github.com/F1bonacc1/process-compose)
- [ドキュメント](https://www.jetpack.io/devbox/docs/guides/services/)