app-platform-designer

App Platform Designer スキル

自然言語による説明を、本番環境に対応した App Platform 仕様に変換します。

主な質問：「[説明]を実現するものを作りたいです。App Platform のアーキテクチャはどうするべきですか？」

生成するもの：

• .do/app.yaml — App Platform 仕様
• .do/deploy.template.yaml — Deploy to DO ボタン（公開リポジトリ向け）
• .env.example — 環境変数テンプレート

---

すばやく判断する

What do you need?
├── Design new app from description → Workflow 1
├── Analyze repo and create spec → Workflow 2
├── Add Deploy to DO button → Workflow 3
└── Multi-environment setup → Workflow 4

---

ワークフロー 1：自然言語からアプリ仕様へ

トリガー：「[説明]を実現する Web アプリが必要です」

1. 要件を収集します：

   • アプリは何をしますか？
   • 言語／フレームワークは何ですか？
   • データベースは必要ですか？
   • バックグラウンド処理は必要ですか？

2. コンポーネントに分解します：

   • HTTP に対応するもの → services
   • バックグラウンドプロセッサー → workers
   • 単発／スケジュール実行 → jobs
   • 静的フロントエンド → static_sites
   • データストア → databases

3. ヘルスチェック、環境変数、ルーティングを含む仕様を生成します

4. 検証します： doctl apps spec validate .do/app.yaml

詳しいガイド： architecture-patterns.md を参照してください

---

ワークフロー 2：リポジトリを分析してアプリ仕様を作成

トリガー：「このリポジトリのアプリ仕様を作成してください」

Check for:
├── Dockerfile → Use dockerfile build
├── package.json → Node.js app
├── requirements.txt / pyproject.toml → Python app
├── go.mod → Go app
├── Multiple directories with above → Monorepo

詳しいガイド： component-types.md を参照してください

---

ワークフロー 3：Deploy to DO ボタン

トリガー：「Deploy to DigitalOcean ボタンを追加してください」

要件： 公開 GitHub リポジトリ

1. .do/deploy.template.yaml を作成します（仕様を spec: キーで囲み、git: ブロックを使用します）
2. README にボタンを追加します

[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/OWNER/REPO/tree/BRANCH)

詳しいガイド： deploy-to-do-button.md を参照してください

---

推奨するデフォルト設定

項目	デフォルト	理由
インスタンスサイズ	apps-s-1vcpu-1gb	適切な開始設定
インスタンス数	1	最小構成から開始
データベース	開発用データベース	コスト効率に優れています
キャッシュ	Valkey（Redis ではない）	Redis は EOL です
ビルド	Dockerfile があれば使用	より細かく制御できます
ヘルスチェック	/health または /healthz	業界標準
プッシュ時にデプロイ	true	GitOps ワークフロー
リージョン	nyc	適切なデフォルト
ソース形式	git: ブロック	deploy.template.yaml に必須

---

コンポーネントの概要

種類	用途	例
services	HTTP ワークロード	API、Web アプリ
workers	バックグラウンド処理	キューコンシューマー、内部 API
jobs	単発／スケジュール実行	マイグレーション、レポート
static_sites	フロントエンド／ドキュメント	React、Vue、マーケティングサイト
databases	データストレージ	PostgreSQL、Valkey

詳しいガイド： component-types.md を参照してください

---

パターンの選択

What are you building?
├── Simple app (1 service)? → Pattern 1
├── Frontend + API? → Pattern 2
├── Need background processing? → Pattern 3
├── Monorepo? → Pattern 4
└── Complex SaaS? → Pattern 5

パターンの詳細： architecture-patterns.md を参照してください

---

クイックスタート：単一サービス＋DB

name: my-app
region: nyc

services:
  - name: web
    git:
      repo_clone_url: https://github.com/owner/repo.git
      branch: main
    http_port: 8080
    instance_size_slug: apps-s-1vcpu-1gb
    health_check:
      http_path: /health
    envs:
      - key: DATABASE_URL
        scope: RUN_TIME
        value: ${db.DATABASE_URL}

databases:
  - name: db
    engine: PG
    production: false

---

クイックスタート：API＋フロントエンド

name: fullstack-app
region: nyc

services:
  - name: api
    git:
      repo_clone_url: https://github.com/owner/repo.git
      branch: main
    source_dir: /api
    http_port: 8080
    health_check:
      http_path: /health
    envs:
      - key: DATABASE_URL
        scope: RUN_TIME
        value: ${db.DATABASE_URL}

static_sites:
  - name: frontend
    git:
      repo_clone_url: https://github.com/owner/repo.git
      branch: main
    source_dir: /frontend
    build_command: npm run build
    output_dir: dist
    envs:
      - key: VITE_API_URL
        scope: BUILD_TIME
        value: /api

databases:
  - name: db
    engine: PG
    production: false

ingress:
  rules:
    - match:
        path:
          prefix: /api
      component:
        name: api
    - match:
        path:
          prefix: /
      component:
        name: frontend

---

環境に依存しない設計

すべてのコードは、ローカル開発、Docker Compose、App Platform のすべてで動作する必要があります。

原則	実装
$PORT にバインドする	process.env.PORT || 3000
パブリックサービス	ingress.rules に記載
内部サービス	ingress に含めず、${name.PRIVATE_URL} を使用
値をハードコードしない	デフォルト値を持つ環境変数を使用

// Portable port binding
const port = process.env.PORT || 3000
server.listen({ port, host: '0.0.0.0' })

---

データベースのクイックリファレンス

エンジン	スラッグ	開発用 DB？	備考
PostgreSQL	PG	はい	推奨
Valkey	VALKEY	はい	Redis の代わりに使用
MySQL	MYSQL	いいえ	マネージドのみ
MongoDB	MONGODB	いいえ	マネージドのみ

詳しいガイド： database-configuration.md を参照してください

---

環境変数クイックリファレンス

スコープ	用途
RUN_TIME	シークレット、DB URL
BUILD_TIME	公開 API URL、機能フラグ
RUN_AND_BUILD_TIME	NPM トークン、共有設定

プレースホルダー	解決される値
${db.DATABASE_URL}	データベース接続文字列
${service.PRIVATE_URL}	内部サービス URL
${service.PUBLIC_URL}	公開サービス URL

完全なガイド： environment-variables.md を参照してください。

---

イングレス（ルーティング）

ingress:
  rules:
    - match:
        path:
          prefix: /api
      component:
        name: api
    - match:
        path:
          prefix: /
      component:
        name: frontend

高度なルーティングについて： networking skill を参照してください。

---

検証

doctl apps spec validate .do/app.yaml
doctl apps spec validate .do/deploy.template.yaml

エラー	修正方法
invalid component name	小文字とハイフンのみを使用してください
unknown instance size	instance-sizes.yaml を確認してください
invalid database reference	データベース名が一致することを確認してください
routes is deprecated	ingress.rules を使用してください

---

インスタンスサイズ

スラッグ	CPU	RAM	料金	用途
apps-s-1vcpu-0.5gb	1 共有	512 MiB	$5/mo	ワーカー、ジョブ
apps-s-1vcpu-1gb	1 共有	1 GiB	$12/mo	デフォルト
apps-d-1vcpu-2gb	1 専有	2 GiB	$39/mo	本番環境

全一覧： shared/instance-sizes.yaml を参照してください。

---

リファレンスファイル

• component-types.md — サービス、ワーカー、ジョブ、静的サイト
• architecture-patterns.md — YAML を含む 5 つのすべてのパターン
• environment-variables.md — スコープ、型、プレースホルダー
• deploy-to-do-button.md — テンプレート変換、ボタン HTML
• database-configuration.md — 開発用とマネージド、バインド可能な変数

---

共有リファレンス

• AppSpec-Reference.md — フィールド単位の構文、制約
• instance-sizes.yaml — すべてのインスタンスサイズと料金
• regions.yaml — 利用可能なリージョン
• bindable-variables.md — バインド可能な変数のすべてのパターン

---

他のスキルとの連携

• → deployment：生成したアプリ仕様を GitHub Actions でデプロイ
• → devcontainers：本番環境と同等のローカル開発環境を作成
• → postgres：高度なデータベース設定
• → networking：カスタムドメイン、CORS、VPC
• → migration：他のプラットフォームから移行