ClineでAWS CDKやインフラ構成図作ってみた

Transcript

1. ClineでAWS CDKや インフラ構成図作ってみた @ryomeblog @ryome @ryome @ryomeblog @ryome
2. 目次 1. Clineとは？ 2. Clineでインフラ構成図の生成 3. AWS CDKコード生成 4. Clineをこんな使い方が便利！！
3. Clineとは？ VSCode拡張機能として動作するAIエージェ ント オープンソースで無料 複数のAIモデルとAPIに対応
4. AIエージェントとは？ AIエージェントとは、特定の目的を達成するために、自律的に環境を認 識し、 意思決定を行うAIシステム 設定された目標を達成するために、自律的な判断と行動ができる 目標達成の過程でエラーが発生しても自己修正してくれる
5. 対応AIモデル OpenRouter / Anthropic Google Gemini OpenAI / AWS Bedrock GitHub Copilot Llama / Ollama
6. Cline導入方法 VSCodeの拡張機能で「clien」と検索 Clineをインストール OpenAI等のAIモデルのAPI KEYを取得する clineにAPI KEYを入力する 完了！！ ※ AIモデルによっては学習に使われる可能性があるので、 Clineを商用利用する際は注意してください。
7. Clineって何ができるの？：Architect アーキテクチャ設計 こういうの作りたいんだけどっていうざっくりとしたイメージを形 にしてくれる インフラ構成図作成 AWSやGCPのサービス名を伝えるだけで構成を考えてくれる インフラ構成図はPythonライブラリのDiagramsを使用する可能！
8. Clineって何ができるの？：Architect リアルタイム音声翻訳アプリ作りたい～ ステレオミキサーの音声を翻訳して機械音声で再生して～ こちらのマイクで話した音声を翻訳して機械音声でマイクで再生して～ これができる → リアルタイム音声翻訳システム アーキテクチャ設計
9. Clineって何ができるの？：Code コード生成と修正 タスクを伝えるとコードを実装してくれる ターミナルにコマンドを打って勝手に依存関係を解決してくれる こちらは承認を押しているだけ このスライドを作ったのもCline！！ エラー自動修正 エラーが出ても勝手に分析して修正してくれる
10. Clineって何ができるの？：Code これができる → ToDoリストアプリ
11. Clineって何ができるの？：Code
12. Clineって何ができるの？：Ask プロジェクト関連の質問対応 どこに何のファイルがある？環境変数は何がいる？ 実行コマンドはどうすれば良いの？ なんでこの仕様にしたか？などを文面で残していれば教えてくれる コードの説明 ～ファイルの～関数は何してるの？
13. ClineにDiagrams を使用してインフ ラ構成図を書いて もらった！ リポジトリはこちら → cline-cdk-sample
14. Diagramsとは？ Pythonコードを使用してインフラストラクチャの構成図を描画するた めのツール AWS、GCP、Azureなどの多様なクラウドプロバイダーをサポート コード管理できるのでバージョン管理が容易
15. diagramsのセットアップ
16. diagramsの基本的な使い方 diagramsと使用したいサービスなどをインポート
17. diagramsの基本的な使い方 Diagramの中で使用したいサービス名を定義してサービス間の関係性を 「>>」で定義する
18. 今回Clineで試した構成 初回構築：S3 + CloudFront 2回目構築：CodePipeline + CodeBuild + CodeCommit 追加 3回目構築：Lambda + DynamoDB 追加
19. AWS CDKとは？ AWSのインフラストラクチャをコードとして定義し、プロビジョニン グするためのオープンソースのソフトウェア開発フレームワーク インフラストラクチャのデプロイと管理が目的 複数の言語でコーディング可能 TypeScript、JavaScript、Python、Java、C#、Go CloudFormationへ変換してデプロイしている
20. CDKプロジェクト作成
21. CDKサンプルコード GitHubリポジトリ：aws-cdk-examples インフラドキュメント：インフラストラクチャアーキテクチャ詳細
22. デプロイまでの手順1 以下のコマンドを実行する
23. デプロイまでの手順2 CodeCommitのクローンURLをコピー git clone 【URL】 コマンド実施（IAMユーザの CodeCommitのHTTPS Git 認証情報が必要） cd react-app-repository でディレクトリを移動 todolistディレクトリ配下を cp -r ../todolist . でコ ピー
24. デプロイまでの手順3 ブランチを作成してプッシュする
25. デプロイまでの手順4 マネージメントコンソールでパイプラインが通っていることを確認する
26. デプロイまでの手順5 CloudFrontのディストリビューションドメイン名にアクセスして画面 が見れたら成功！
27. Clineの便利な使い方 ESLint/Prettier等の設定 テストコード生成 ドキュメント生成 ルールファイル定義
28. ESLint/Prettier 等の設定 何かの手順を記事にまとめて おいて、リンクかテキストを 渡して指示するだけ 環境構築時も必要なものは勝 手にインストールして動くと ころまで完了させてくれる
29. テストコード生成 JestやPlaywrightテストコード生成に便利！！ たたき台程度ならすぐに作ってくれる 一緒にパイプラインも直して自動テストを組み込んでくれる テスト項目と観点を言語化していれば自動生成可能！
30. ドキュメント生成 ブログ記事のアイデアが浮かんで、やりたいこと話したらコードも記事 もできている テストケースの洗い出しとかライセンスチェックとかClineに頼んでフ ォーマットしてもらえる プロジェクトの内容を加味したREADME.meファイルを作ってくれる
31. ルールファイル定義 .clinerules を活用することでコーディング規約やプロジェ クトのルール（コミットルールなど）に従った開発を行ってくれる
32. まとめ Clineは、VSCodeの拡張機能でAIエージェントのこと ReactやAWS CDK等のコード生成、インフラ構成図の作成などを自律 的に行うことができる エラーなども自己解決し、成果物の品質を担保する Clineを活用することで、開発者はコーディング等の下流行程の作業か ら解放され、より上流工程の作業に集中できるようになる