公式サイト技術マニュアル

NOTE

各種リンク

使用技術

言語	開発環境	ヘッドレスCMS	デプロイ

コンテンツ管理（ヘッドレスCMS）

サイト内コンテンツの管理には、microCMS を利用しています。

以下のリンクから microCMS の管理画面にアクセスできます。

https://app.microcms.io/signin

デプロイ

本リポジトリの main ブランチに push もしくは microCMS のコンテンツを更新すると、Cloudflare Pages に自動デプロイされます。

ビルド時に静的な HTML ファイルを生成する（SSG）ため、サイトに更新が反映されるまで数分かかります。

Next.js プロジェクトを Cloudflare Pages にデプロイするために、@cloudflare/next-on-pages を利用しています。

本プロジェクトは Cloudflare Pages にデプロイ済みですが、現在の設定を削除し再デプロイする場合には以下の設定が必要です。

設定 > 変数とシークレット にて、環境変数を追加（設定内容は .env.example 参照）
設定 > ランタイム > 互換性フラグ にて nodejs_compat を追加して保存

Getting Started

環境構築

ローカルでの開発に加えて、 Devcontainer の利用が可能です。

ローカルで環境構築を行う場合

推奨環境

Node 22.1.0
npm 10.7.0

手順

リポジトリのクローン

git clone https://github.com/TCU-DC/tcu-dc-web.git
cd tcu-dc-web

依存関係のインストール

npm install

環境変数を設定

ルートに .env.local を作成し、 .env.example の説明通りに変数を設定してください。

BASE_URL=your-base-url
MICROCMS_SERVICE_DOMAIN=your-microcms-service-domain
MICROCMS_API_KEY=your-microcms-api-key
NEXT_PUBLIC_GA_ID=your-google-analytics-id

Devcontainer を利用する場合

必要環境

Visual Studio Code (VSCode)
Docker

手順

VSCode の拡張機能 Dev Containers をインストール
リポジトリのクローン
VSCode でコンテナを実行
Docker イメージのダウンロード、依存関係のインストール完了を待つ
環境変数を設定

開発方法

下記コマンドを実行すると開発サーバーが起動します。

http://localhost:3000 にアクセスすると、サイトが表示されます。

npm run dev

microCMS の API スキーマを更新した場合

microcms/api-schema に microCMS からエクスポートした json を格納
下記コマンドの実行で、 src/types/microcms に型定義が出力される

npx microcms-generate-types microcms/api-schema src/types/microcms

状況に応じて、 src/types/microcms 以下のファイルを編集

Contact

作成者の連絡先です。何かあれば連絡してください。

info[at]shotaro.jp

公式サイト技術マニュアル ​

各種リンク ​

使用技術 ​

コンテンツ管理（ヘッドレスCMS） ​

デプロイ ​

Getting Started ​

環境構築 ​

ローカルで環境構築を行う場合 ​

推奨環境 ​

手順 ​

Devcontainer を利用する場合 ​

必要環境 ​