Claude Code、Strapi、GCP Cloud Runを使用したWebサイトの再構築

ある開発者が、Lovableプラットフォームから移行した後、自社ウェブサイトを再構築した経験を詳述しました。主な動機は、ローカル開発や自動化機能を制限し、変更を加えることに不安を感じさせるLovableのクレジットシステムの制限を克服することでした。新しい技術スタックは、Claude Codeを使用して構築され、ヘッドレスCMSとしてStrapiを、デプロイメントにはGCP Cloud Runを採用しました。

技術スタックと実装

再構築は、AI支援開発のためのClaude Code、コンテンツ管理のためのStrapi、ホスティングとサービスのためのGoogle Cloud Platformという3つのコアコンポーネントを中心に行われました。この組み合わせにより、データベース、自動化ツール、スケジューラー、スケーラビリティオプション、無料枠で利用可能なその他のGoogleサービスへのアクセスが提供されました。

スキルの開発と活用

開発者はプロジェクト全体を通じて、Claude Codeのスキルシステムを積極的に活用しました：

• Anthropicが提供するフロントエンドスキルや美的感覚スキルなどのスキルを使用
• プロジェクトの進行に伴い、多数のカスタムスキルを作成
• 具体的なデザイン関連のスキルには以下が含まれます：
  • ブレインストーミングのためのSuperpower Plug-in
  • 動画やインタラクティブグラフィックを作成するためのRemotionスキル（ブログ記事やウェブサイトで例を確認可能）
  • 一貫したデザイン言語を維持するためのカスタムデザインスキル
  • Draw thingsスキル
• 以下の運用スキルを開発：
  • Strapiを通じたGCPへのデプロイ
  • ブログ記事、SEO、AEOのためのスキーマ作成
  • Claude Codeを活用した自動コンテンツパイプラインの構築

ワークフローの利点

開発者は、Strapiですべての編集をローカルで実行し、進捗状況をGitHubに同期し、デプロイメントをGCP Cloud Runで処理できる点を強調しました。このアプローチにより、以前のLovable設定に存在した変更を加えることへの絶え間ない不安が解消されました。このプロジェクトはオープンソースであり、チームはClaude Codeを使用した高度なエージェントワークフローに関するライブウェビナーを開催しています。