(トップへ)
| Category | Technology Stack |
|---|---|
| Frontend | Next.js, React, TypeScript, Tailwind CSS |
| Backend | Go, Vercel Functions |
| CMS | microCMS, Zenn RSS |
| Infrastructure | Cloudflare Pages, Vercel, Amazon S3, Terraform |
| Environment setup | Docker |
| CI/CD | GitHub Actions, CodeQL, Dependabot |
| Design | Figma, Canva |
| AdSense, Analytics, Search Console, reCAPTCHA | |
| Integrations | PWA, OneSignal, Sentry |
(トップへ)
flowchart TB
developer[Developer] --> github[GitHub Repository]
subgraph ci[CI]
github --> actions[GitHub Actions]
actions --> quality[Lint / Typecheck / Test / CodeQL]
end
subgraph build[Static Build]
github --> pagesBuild[Cloudflare Pages Build<br/>pnpm build]
microcms[microCMS<br/>Blog / Category / Tag] --> pagesBuild
zenn[Zenn RSS] --> pagesBuild
pagesBuild --> generated[Static Output<br/>HTML / JS / CSS / RSS / sitemap]
end
generated --> pages[Cloudflare Pages<br/>out]
pages --> browser[User Browser]
subgraph runtime[Browser Runtime]
browser --> app[Next.js Client App]
app --> thirdParty[Google Analytics / AdSense<br/>OneSignal / Embedly / Instagram]
app -. Client errors .-> sentry[Sentry]
end
subgraph vercelFunctions[Vercel Functions]
app --> searchApi[Vercel Go Function<br/>/api/search]
searchApi --> microcmsBlogContentApi[microCMS<br/>Blog Content API]
app --> sendEmailApi[Vercel Go Function<br/>/api/sendemail]
app --> recaptchaApi[Vercel Go Function<br/>/api/recaptcha]
sendEmailApi --> smtp[SMTP / Gmail]
recaptchaApi --> recaptcha[Google reCAPTCHA]
cron[Vercel Cron<br/>/api/cron/linkchecker] --> linkcheckerApi[Vercel Go Function<br/>Link Checker]
linkcheckerApi --> microcmsBlogContentApi
linkcheckerApi --> smtp
linkcheckerApi --> zenn
linkcheckerApi --> s3
linkcheckerApi --> oneSignalApi
linkcheckerApi --> pagesDeployHook[Cloudflare Pages Deploy Hook]
pagesDeployHook --> pagesBuild
microcmsWebhook[microCMS<br/>Content Webhook] --> microcmsbackupApi[Vercel Go Function<br/>/api/webhook/microcmsbackup]
microcmsbackupApi --> microcmsBlogContentApi
microcmsbackupApi --> s3[AWS S3<br/>Backup CSV<br/>Notification Marker]
microcmsbackupApi --> oneSignalApi[OneSignal<br/>Push Notification API]
end
searchApi -. Server errors .-> sentry
sendEmailApi -. Server errors .-> sentry
recaptchaApi -. Server errors .-> sentry
linkcheckerApi -. Server errors .-> sentry
microcmsbackupApi -. Server errors .-> sentry
(トップへ)
# リポジトリのクローン
git clone git@github.com:Arata1202/NextBlogApp.git
cd NextBlogApp
# .env.exampleから.envを作成
mv .env.example .env
# .envの編集
vi .env
# コンテナのビルドと起動
docker compose up -d --build
# ブラウザにアクセス
http:localhost:3000
# コンテナの停止
docker compose down
(トップへ)
# Terraformディレクトリへ移動
cd terraform
# terraform.tfvars.exampleからterraform.tfvarsを作成
cp terraform.tfvars.example terraform.tfvars
# terraform.tfvarsの編集
vi terraform.tfvars
# Terraformの初期化
terraform init
# 変更内容の確認
terraform plan
# AWSリソースの作成・更新
terraform apply
(トップへ)
# Lint / 型チェック / ユニットテスト
pnpm lint
pnpm typecheck
pnpm test:run
# Playwright のブラウザをインストール
pnpm exec playwright install chromium
# E2E用の固定データで静的ビルド
pnpm build:e2e
# E2Eテスト
pnpm test:e2e
# 既存のローカルサーバーを再利用してE2Eテストを実行
PLAYWRIGHT_REUSE_SERVER=1 pnpm test:e2e
# E2Eテストをブラウザ表示ありで実行
pnpm test:e2e:headed
# E2Eレポートを表示
pnpm test:e2e:report
(トップへ)
❯ tree -a -I "node_modules|.next|.git|out|.vercel|_|.DS_Store|.env|next-env.d.ts|tmp|coverage|tsconfig.tsbuildinfo|playwright-report|test-results|.pnpm-store|.terraform|terraform.tfstate|terraform.tfstate.backup|terraform.tfvars" -L 3
.
├── .air.toml
├── .docker
│ ├── go
│ │ └── Dockerfile
│ └── js
│ └── Dockerfile
├── .dockerignore
├── .docs
│ └── readme
│ └── images
├── .env.example
├── .github
│ ├── dependabot.yml
│ └── workflows
│ ├── codeql.yml
│ ├── test.yml
│ └── vercel_deploy.yml
├── .gitignore
├── .husky
│ └── pre-commit
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vercelignore
├── .vscode
│ ├── extensions.json
│ └── settings.json
├── api
│ ├── cron
│ │ └── linkchecker.go
│ ├── recaptcha.go
│ ├── search.go
│ ├── sendemail.go
│ └── webhook
│ └── microcmsbackup.go
├── cmd
│ └── main.go
├── docker-compose.yml
├── e2e
│ ├── contact.spec.ts
│ ├── feeds.spec.ts
│ ├── fixtures
│ │ ├── content.d.mts
│ │ └── content.mjs
│ ├── navigation.spec.ts
│ ├── responsive.spec.ts
│ ├── search.spec.ts
│ ├── smoke.spec.ts
│ ├── support
│ │ └── app.ts
│ └── theme.spec.ts
├── eslint.config.mjs
├── figma
│ ├── main.js
│ ├── manifest.json
│ └── README.md
├── go.mod
├── go.sum
├── LICENSE
├── next.config.ts
├── package.json
├── pkg
│ └── api
│ ├── contact
│ ├── contentops
│ ├── httpx
│ ├── linkchecker
│ ├── microcms
│ ├── monitoring
│ ├── recaptcha
│ └── search
├── playwright.config.ts
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│ ├── ads.txt
│ ├── app-ads.txt
│ ├── favicon.ico
│ ├── images
│ │ ├── blog
│ │ ├── head
│ │ ├── plugin
│ │ ├── post
│ │ ├── pwa
│ │ └── thumbnail
│ ├── llms-full.txt
│ ├── llms.txt
│ ├── OneSignalSDKWorker.js
│ └── robots.txt
├── README.md
├── scripts
│ └── e2e
│ ├── build.mjs
│ ├── mock-fetch.mjs
│ └── serve-static.mjs
├── src
│ ├── app
│ │ ├── __tests__
│ │ ├── archive
│ │ ├── articles
│ │ ├── category
│ │ ├── contact
│ │ ├── copyright
│ │ ├── disclaimer
│ │ ├── global-error.tsx
│ │ ├── layout.module.css
│ │ ├── layout.tsx
│ │ ├── link
│ │ ├── manifest.json
│ │ ├── not-found.module.css
│ │ ├── not-found.tsx
│ │ ├── p
│ │ ├── page.tsx
│ │ ├── privacy
│ │ ├── profile
│ │ ├── rss.xml
│ │ ├── search
│ │ ├── sitemap-html
│ │ ├── sitemap.ts
│ │ └── tag
│ ├── components
│ │ ├── Common
│ │ ├── Features
│ │ ├── Pages
│ │ └── ThirdParties
│ ├── config
│ │ ├── publicEnv.ts
│ │ └── serverEnv.ts
│ ├── constants
│ │ ├── articleContent.ts
│ │ ├── category.ts
│ │ ├── customHtml.ts
│ │ ├── data.ts
│ │ ├── limit.ts
│ │ └── page.ts
│ ├── contents
│ │ ├── copyright.ts
│ │ ├── disclaimer.ts
│ │ ├── link.ts
│ │ ├── privacy.ts
│ │ └── profile.ts
│ ├── contexts
│ │ ├── __tests__
│ │ ├── ThemeProvider.tsx
│ │ └── ThemeWrapper.tsx
│ ├── hooks
│ │ ├── __tests__
│ │ ├── useCodeBlockCopyButtons.tsx
│ │ ├── useExtractHeadings.ts
│ │ ├── useIframelyEmbeds.ts
│ │ ├── useIsClient.ts
│ │ └── useMutationObserver.ts
│ ├── instrumentation-client.ts
│ ├── libs
│ │ ├── __tests__
│ │ ├── archive.ts
│ │ ├── microcms.ts
│ │ ├── microcmsPage.ts
│ │ ├── pageData.ts
│ │ ├── recent.ts
│ │ ├── rss.ts
│ │ ├── unified.ts
│ │ └── zenn.ts
│ ├── styles
│ │ ├── designTokens.ts
│ │ ├── globals.css
│ │ └── plugin.css
│ ├── test
│ │ ├── factories.ts
│ │ └── setup.ts
│ ├── types
│ │ ├── form.ts
│ │ ├── heading.ts
│ │ ├── microcms.ts
│ │ ├── react-dom-client.d.ts
│ │ └── unified.ts
│ └── utils
│ ├── __tests__
│ ├── formatDate.ts
│ ├── formatHeadings.ts
│ ├── formatMicroCmsImageUrl.ts
│ ├── formatRichText.ts
│ ├── htmlSanitizer.ts
│ ├── markdownHeadings.ts
│ ├── sanitizeCustomHtml.ts
│ └── urlSafety.ts
├── terraform
│ ├── .terraform.lock.hcl
│ ├── iam
│ │ ├── iam.tf
│ │ └── variables.tf
│ ├── main.tf
│ ├── module.tf
│ ├── s3
│ │ ├── s3.tf
│ │ └── variables.tf
│ ├── terraform.tfvars.example
│ └── variables.tf
├── tsconfig.json
├── vercel.json
└── vitest.config.mts
78 directories, 125 files
(トップへ)
GitHub Flowを使用する。 masterとfeatureブランチで運用する。
| ブランチ名 | 役割 | 派生元 | マージ先 |
|---|---|---|---|
| master | 本番環境 | - | - |
| feature/* | 機能開発 | master | master |
fix: バグ修正
feat: 新機能追加
perf: パフォーマンス改善
refactor: コードのリファクタリング
docs: ドキュメントのみの変更
style: コードのフォーマットに関する変更
test: テストコードの変更
build: ビルドシステムや依存関係の変更
ci: CI/CD設定の変更
revert: 変更の取り消し
chore: その他の変更
(トップへ)