Next.jsとDockerを活用したポートフォリオサイトの構築
はじめに
この記事では、Next.js、Docker、Azure Communication Service、Tailwind CSS、Azure Web Appsを活用してポートフォリオサイトを勉強として個人開発を行いました。
使用技術
1. Next.js
Next.jsはReactベースのフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を簡単に実現できます。
2. Docker
Dockerを使用して、開発環境と本番環境の一貫性を保ちました。Docker Composeを活用し、アプリケーションと依存関係を簡単に管理しています。
3. Azure Communication Service
Azure Communication Serviceを利用して、リアルタイムのコミュニケーション機能を実装しました。今回は、問い合わせフォームのメール送信機能に活用しています。
4. Tailwind CSS
Tailwind CSSはユーティリティファーストのCSSフレームワークで、迅速なUI開発を可能にします。本プロジェクトでは、カスタムデザインを効率的に構築しました。
5. Azure Web Apps
Azure Web Appsを使用して、アプリケーションをクラウドにデプロイしました。
プロジェクト構成
以下は、プロジェクトのディレクトリ構成です：
public/
├── data/
├── fonts/
├── images/
src/
├── app/
├── components/
├── constants/
├── utils/
Dockerfile
docker-compose.yml
next.config.ts
tailwind.config.js
構築手順
1. Next.jsプロジェクトのセットアップ
npx create-next-app@latest my-portfolio
cd my-portfolio
2. Docker環境の構築
以下は、Dockerfileの例です：
FROM node:22-slim
RUN apt-get update && apt-get install -y \
git \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "dev"]
docker-compose.yml:
services:
app:
build:
context: .
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
env_file:
- .env
environment:
- WATCHPACK_POLLING=true
command: npm run dev
3. Tailwind CSSの設定
tailwind.config.jsを設定します。
tailwind.config.js:
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
foreground: "var(--foreground)",
background: "var(--background)",
primary: "#4496d3",
},
fontFamily: {
sans: ['var(--font-geist-sans)', 'system-ui', 'sans-serif'],
mono: ['var(--font-geist-mono)', 'monospace'],
},
},
},
plugins: [],
}
4. Azure Communication Serviceの統合
Azure Communication Serviceを利用するには、Azureポータルでリソースを作成します。
こちらについては以下に記事を書きました。
5. Azure Web Appsへのデプロイ
AzureへのデプロイはGitHubActionを利用しました。
学んだこと・工夫した点
Next.jsを使った開発は今回が初めてでした。普段はC#を使っているため、最初はReactやJavaScript特有の書き方に少し戸惑いました。
現在はAIにコードを生成させることも多い時代ですが、AIも万能ではありません。出力されたコードをそのまま使うのではなく、「どこが誤っているのか」「どのように修正すべきか」を判断するための読解力と設計の理解が重要だと改めて感じました。
Azure Communication Servicesも今回初めて使用しましたが、手軽かつ低コストでメール送信機能を実装できる点に驚きました。今後、類似サービスを利用する際にも応用できる知見が得られたと感じています。
一方で、最も苦戦したのはAzureへのデプロイでした。ローカルでは正常に動作しても、GitHub Actions上でビルドが通らなかったり、Azure側で原因不明のエラーが発生したりと、トラブルシューティングに多くの時間を要しました。AIでも解決しづらい領域であり、自分自身のクラウド環境理解やデプロイの知識不足を痛感しました。
この経験を通して、今後はインフラやCI/CDの理解をさらに深め、安定してデプロイできる力を身につけたいと考えています。
まとめ
Next.js、Docker、Azure Communication Service、Tailwind CSS、Azure Web Appsを組み合わせることで、スケーラブルでモダンなポートフォリオサイトを構築することができました。この記事が、同様のプロジェクトを計画している方の参考になれば幸いです。
引き続き勉強を続けていきたいです。
ポートフォリオ用のサイトを作り、GitHubPagesで公開しました。