エンジニアのためのポートフォリオサイトの構築
あまり経験してこなかった技術スタックでポートフォリオサイトを作ってみました 今更ながら年初からWebデザインを教わるというシーンがありました。 しかし、毎朝タイピング練習で始まり、 「BRタグは非奨励」などとW3Cの仕様を知らないレベルの講師が レベルの低い授業をやっていました。 100年かけてもWebデザインに行きつきそうにない。吐き気がしました。 割り切って我慢できるレベルを超えていました。 辞めましたが、 まぁ折角なのでWEBデザイナーが作るらしい「ポートフォリオ」なるものを、 3日ほど使ってこれまで深くやってこなかった技術スタックを作ってみました。 ポートフォリオサイトは自分のスキルや実績を効果的にアピールするための重要な ツールらしいです。 Illustratorでデザインカンプ描いて、HTML/CSSでせっせとコーディング なんてサイト作っても一体誰が見るんでしょう。 「あぁ、いいデザインだね」とか褒められると 本気で思っているバカがいるのでしょうか？ 美的デザインだけで勝負するなんて、よほどの審美眼とセンスがないと無駄です。 この記事では、そんな90年代風なWebサイトでなく、 Node.js上でモダンなWebフレームワークであるNext.js/ReactとCSSフレームワークのTailwindCSS、 そしてUIコンポーネントを提供するdaisyUIを組み合わせて ポートフォリオサイトを構築したのでそれを記録しています。 そして、結局このブログサイトも同じような技術スタック使って 再構築してしまいました。 言語は型安全なTypeScriptを使用し、node/Reactベースで以下のようなフレームワークを使っています。 プロジェクトルートにある ライトとダーク両方のテーマをサポートするようにします。設定によりシステムのダーク／ライトモードの設定に応じて切り替わります。 Next.jsの開発サーバーを高速化するために、package.jsonのscriptsセクションを編集してturbopackを有効にします。 Next.jsのAppRouterを使用した基本的なプロジェクト構造を整えると、次のようなフォルダ構成になるはずです。 今回はNext.jsアプリケーションのホスティング先としてVercelではなく、AWS Amplifyを選択しました。Amplifyを選んだ理由と、デプロイプロセスについて共有します。 Amplifyを選んだ理由は、次の通りです。 デプロイ手順をざっくり並べると次の通りです。 具体的なソースは、GitHubで公開しています。また、ポートフォリオ自体は、https://portfolio.inagales.comで公開しています。いつ落とすか分かりませんが。 今回初めてまともにNext.jsを使いました。 楽しいお遊びでした。はじめに
使用する技術スタック
プロジェクトセットアップ
# Next.jsプロジェクトの作成（TypeScript対応）
npx create-next-app@latest my-portfolio --typescript
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes（好みに応じて）
√ Would you like to use App Router? ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
√ What import alias would you like configured? ... @/*
# 作成したプロジェクトディレクトリに移動
cd my-portfolio
# daisyUIのインストール
npm install daisyuitailwind.config.jsファイルを開き、daisyUIをプラグインとして追加します。/** @type {import('tailwindcss').Config} */
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: {
// 必要に応じてテーマの拡張を追加
},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark"], // 使用するテーマを設定
},
};npm install three @react-three/fiber @react-three/drei
npm install framer-motion
npm install @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/free-regular-svg-icons \
@fortawesome/free-brands-svg-icons \
@fortawesome/react-fontawesome
npm install aws-amplify @aws-sdk/client-ses @aws-sdk/client-sts"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
}プロジェクトの構造
my-portfolio/
├── src/
│ ├── app/
│ │ ├── about/
│ │ │ └── page.tsx （自己紹介ページ）
│ │ ├── api/
│ │ │ └── contact
│ │ │ └── route.ts （メール送信）
│ │ ├── contact/
│ │ │ └── page.tsx （お問い合わせページ）
│ │ ├── globals.css （グローバルスタイル）
│ │ ├── layout.tsx （ルートレイアウト）
│ │ ├── page.tsx （トップページ）
│ │ └── works/
│ │ └── page.tsx （作品紹介ページ）
│ └── components/ （共通コンポーネント）
├── public/ （静的ファイル）
├── next.config.js
├── package.json
├── tailwind.config.js
└── tsconfig.jsonAWS Amplify へのデプロイ
mainブランチ）version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
# 認証情報の書き込み
# クライアント再度で必要な環境変数
- echo "NEXT_PUBLIC_XXXX_API_URL=https://api.example.com" >>.env
# サーバーサイド限定の環境変数
- echo "AWS_XXXXX_ACCESS_KEY_ID="hogehogetaratara" >> .env
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- node_modules/**/*コンポーネント、その他について
まとめ