Morphで遊ぶ：環境構築編

こんにちは！kirigayaです
今回はapp作成フレームワークのmorphで遊んでいきます
PCはMacです
さっそく環境を作っていきます

morphを動作させるために必要なものをインストール

• Node.jsのバージョンを複数管理できるnvm(Node Version Manager)という管理ツールをインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

• Node.js（LTS（Long Term Support））をインストール

nvm install --lts --latest-npm
nvm alias default 'lts/*'

• Dockerのインストールはこちら

• poetryをつかってmorphをインストール

cd morph_test
poetry init
poetry env use $(pyenv which python)
poetry add morph-data

• プロジェクトを作成する
  test-appというプロジェクトを作ります

poetry run morph new

実行するとこんな感じ

What is your project name? test-app
Created directory at /Users/.morph

Select the Python version for your project:
1: 3.9
2: 3.10
3: 3.11 (current)
4: 3.12
Enter the number of your choice. (default is [3.11]): 
The selected Python [3.11] version will be used for the project.
Creating new Morph project...
Applying template to test-app...

Select a package manager for your project:
1: pip
2: poetry
Enter the number of your choice. (default is [1: pip]): 2
Initializing Poetry...
Added 'morph-data' to pyproject.toml with 'morph-data'.

Project setup completed successfully! 🎉

morph-testディレクトリとtest-appディレクトリでそれぞれpyproject.tomlが生成されます
appごとにパッケージを管理できます。他にもDockerfileも生成してくれます！
Dockerfileはこんな感じ

# Base image for Morph Cloud
FROM public.ecr.aws/i1l4z0u0/morph-data:python3.11

# Set working directory
WORKDIR /var/task

# Install Python dependencies with poetry
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt --target "${MORPH_TASK_ROOT}"

# Copy source code and dependencies
COPY . .

# Command to run the Lambda function
CMD ["python", ".morph/core/morph/api/app.py"]

app起動してみる

morph側でテストappを生成してくれるのでとりあえず起動してみる
morph_project.ymlのあるディレクトリまで移動する
test-appの方のpyproject.tomlでinstallする必要がある
親をDockerとかにすればよかったかな...

cd test-app
poetry install
poetry run morph serve

成功するとこんな感じ

✅ Done server setup

Morph is running!🚀

 ->  Local: http://localhost:8080

INFO:     Will watch for changes in these directories: ['morph_test/test-app']
INFO:     Uvicorn running on http://0.0.0.0:8080 (Press CTRL+C to quit)
INFO:     Started reloader process [19947] using StatReload
INFO:     Started server process [19949]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

画面はこんな感じ

フロント部分を変更してみる

appのカスタマイズはsrc/pages/.mdxファイルを編集します
mdxについてはこちら
index.mdxに変更を加えるとHot Reloadしてくれます
色々なコンポーネントが用意されています
色々掘り下げたところですがそれは次回の記事にしますw

index.mdx

import { defineState } from '@morph-data/components';

export const { category } = defineState({ category: 'EC2' });

<Select state={category}>
  <SelectItem value="EC2">EC2 (Elastic Compute Cloud)</SelectItem>
  <SelectItem value="RDS">RDS (Relational Database Service)</SelectItem>
  <SelectItem value="VPC">VPC (Virtual Private Cloud)</SelectItem>
</Select>

<Grid cols="4">
  <Card>
    <p>USERS</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
     <p>0</p>
    </h3>
    <p>t2.micro, us-east-1</p>
  </Card>

  <Card>
    <p>PING</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
    <p>0</p>
    </h3>
    <p>us-east-1</p>
  </Card>

  <Card>
    <p>SESSIONS</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
    <p>0</p>
    </h3>
    <p>db.t3.small, ap-northeast-1</p>
  </Card>

  <Card>
    <p>PRIV WP</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
    <p>0</p>
    </h3>
  </Card>
</Grid>

<Grid cols="2">
  <Panel>
    <p>EC2 Instance CPU</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
    </h3>
    <p>db.t3.small, ap-northeast-1</p>
  </Panel>

  <Panel>
    <p>EC2 Instance CPU</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
    </h3>
    <p>db.t3.small, ap-northeast-1</p>
  </Panel>

  
</Grid>

pythonとの連携をすればグラフ表示ができるようです
streamlitと違って気軽には書けない印象です
mdx慣れん...
お疲れ様でした