Noodl Cloudを自分のPC内に構築する(Self cloud)

## はじめに
次世代ローコードプラットフォームNoodlがオープンソースになることを[発表](https://www.noodl.net/open-source)しました。

そこで先日Githubに公開されたばかりの[`Noodl Cloud Service`](https://github.com/noodlapp/noodl-cloudservice)を自分のPC環境に構築。Noodl上から自分の`Self Cloud`を使用できることを確認しましたので。その手順を共有します。

Noodl Cloud ServiceとはNoodl上でバックエンド処理を構築するためのプラットフォームです。MongoDBとExpress、Node.js上に構築されたParseで構成されています。Self Cloudとはこの環境を任意のPC上に構築できるということです。

![Noodl open source](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/ab265753-bfa5-6e31-2d55-1207eb7fac94.png)



## Noodl Cloud Serviceの構築

　Noodl Cloud ServiceはDocker上に構築されています。なのでまずはDockerをインストールしましょう。MacまたはWindows用の[Dockerデスクトップ](https://www.docker.com/products/docker-desktop/)をダウンロードします。Docker Composeが自動的にインストールされます。 Linuxの場合はCompose の最新バージョンを使用していることを確認してください。

![docker](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8372fb98-cc01-8fe4-2776-7fdda7e1d79d.png)

  WindowsPowerShell を起動して、docker version コマンドでバージョン情報が表示されるところまで確認します。

```powershell
> docker version
```
 次にGithubから`Noodl Cloud Service`のコートを取得し、ディレクトリを移動します

```powershell
> git clone https://github.com/noodlapp/noodl-cloudservice.git
> cd ./noodl-cloudservice/
```
　dockerコマンドでNoodl Cloud Serviceのコンテナを起動します。しばらく待つとNoodl Cloud Serviceが立ち上がります。

```powershell
> docker compose up
```
　コンテナの起動に使用する`docker-compose.yml`ファイルは MondoDBの構築,NoodlCloudServiceの構築それぞれに必要な環境変数の設定を行っています。
ちなみに、__セキュリティを考慮してDB接続用のUserNameやPassWordはご自身の環境に合わせて変更してください__
Noodl Cloude Service側の設定で重要なのは`Master Key`と`APP ID`でどちらも任意に設定できます。Noodlで必要になるので自分用にメモしておいてください。

```yaml:docker-compose.yml
version: '3'

services:
  mongodb:
    restart: unless-stopped
    image: mongo:latest
    container_name: noodlapp-mongodb
    ports:
      - "27017:27017"
    volumes:
      - mongodb-data:/data/noodlapp-db
    environment:
      MONGO_INITDB_ROOT_USERNAME: yourusername
      MONGO_INITDB_ROOT_PASSWORD: yourpassword
      MONGO_INITDB_DATABASE: noodlapp

  cloudservice:
    restart: unless-stopped
    build:
      context: .
      dockerfile: Dockerfile
    container_name: cloudservice
    environment:
      NODE_ENV: production
      PORT: 3000
      MASTER_KEY: mymasterkey
      APP_ID: myappid
      DATABASE_URI: mongodb://yourusername:yourpassword@mongodb:27017/noodlapp?authSource=admin
      PUBLIC_SERVER_URL: http://localhost:3000
    ports:
      - "3000:3000"
    links:
      - mongodb

volumes:
  mongodb-data:
```

## NoodlのCloud ServiceとしてSelf Cloudを選択する
NoodlメニューのCloud Serviceを選択し、Available Cloud Servicesの`+`ボタンを押してサービスを追加します。
`Add new cloud service`画面で`Use self hosted cloud service`にチェックを入れた後。下記必要な情報を入力し。`Create new cloud service`を押しすと設定が保存されます。
|Field|内容|
|---|---|
|Name|Cloudサービスの名称(任意)|
|Description|説明(省略可能)|
|Endpoint|Docker上で構築したSelfCloudServerのURL。デフォルトだとhttp://localhost:3000
|Application ID|Self CloudのID。Dockerfile上で任意に設定可能
|Master key|Self Cloudと接続するためのセキュリティキー。Dockerfile上で任意に設定可能

![Self cloud setting](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/c4038f8c-fa98-6f7d-f3bc-427e84f1a72b.png)

あとは設定した名称(ここではSelf Cloud)を選択して`Use in editor`を選択することで、Docker上に構築したSelf Cloud ServiceをNoodlで利用することができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/1wfmZIal1xo?si=4ZOwnTYXp4Obw9TE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## Noodl上でCloud変数を利用する
最後に実際にSelf Cloud Serviceが利用できているかNoodl上で確認しましょう。

Cloud Servieメニューから`OpenDashboard`を選んでConfigに新しいCloud変数を作成します。ここでは`ParameterName`をNoodl、`Type`をString、`Value`をHello Noodlとしました。簡単に確認できるように`MasterKey`の確認は不要(No)としました。

次にこのCloud変数を利用するため、`Noodlエディタ`上で右クリックし。`Nodeエディタ`を開いてRead&WriteDataから`config`を選択。してConfigノードを配置します。
SelfCloudと正しく接続できていれば、`Parameter`として設定した`Noodl`が選択できるはずです。
![config](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/5483ad83-2669-b361-61b3-5826e0887dea.png)

## まとめ
以上、自分のPC内にNoodlのCloud Serviceを構築する方法。利用する方法を説明しました。
オープンソース化によって、Noodlがより多く企業や組織、個人開発者に利用されるようになることを期待していますし、その一助になればと思っています。

## 参考文献
1. Noodlのオープンソース化について

https://www.noodl.net/open-source

2. バックエンドを構築する

https://docs.noodl.net/2.9/docs/guides/deploy/using-an-external-backend

3. Github Noodl Cloud Service

https://github.com/noodlapp/noodl-cloudservice