[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"article-2":3},{"id":4,"title":5,"summary":6,"tags":7,"publishedAt":10,"content":11},2,"ブログの技術スタック","このブログで採用している技術スタックについて紹介します。",["Reactive",8],[9],"技術","2026-02-11","# ブログの技術スタック\r\n\r\n## 概要\r\n\r\nこのブログで採用している技術スタックについて紹介します。  \r\n※この記事は完全にCursor君が生成した記事なのでAI感満載です。  \r\n読まなくていいよ。\r\n\r\n## フロントエンド\r\n\r\n### Nuxt 3\r\n\r\n[Nuxt 3](https://nuxt.com/) はVue.jsベースのフレームワークで、SSR（サーバーサイドレンダリング）やSSG（静的サイト生成）をサポートしています。\r\n\r\nこのブログではSSGモードを使用しており、ビルド時にHTMLを生成して静的ファイルとして配信しています。\r\n\r\n### Vue.js 3\r\n\r\nフロントエンドフレームワークとして [Vue.js 3](https://vuejs.org/) を採用しています。Composition APIを活用した開発を行っています。\r\n\r\n### Vuetify 3\r\n\r\nUIコンポーネントライブラリとして [Vuetify 3](https://vuetifyjs.com/) を採用しています。Google Material Designに準拠した美しいUIを簡単に構築できます。\r\n\r\n## インフラ\r\n\r\n### AWS S3 + CloudFront\r\n\r\n静的ファイルのホスティングにはAWS S3を使用し、CDNとしてCloudFrontを配置しています。\r\n\r\n```\r\nユーザー → CloudFront → S3\r\n```\r\n\r\n### Docker\r\n\r\nローカル開発環境はDockerで構築しています。`docker compose`で簡単に環境を立ち上げることができます。\r\n\r\n## CI/CD\r\n\r\n### GitHub Actions\r\n\r\nmainブランチへのpush時に自動でビルド・デプロイが実行されます。\r\n\r\nデプロイフロー：\r\n\r\n1. `nuxt generate` で静的ファイルを生成\r\n2. S3へアップロード\r\n3. CloudFrontのキャッシュを無効化\r\n\r\n## 今後の予定\r\n\r\n- バックエンドAPI（REST API）の追加\r\n- 記事データのサーバーサイド管理\r\n- 検索機能の実装\r\n- OGP対応\r\n",1777162263692]