<span style="color: #888; font-size: 0.75rem; font-style: italic;">Image by <a href="https://unsplash.com/ja/@carlheyerdahl?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Carl Heyerdahl</a> from <a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/silver-imac-with-keyboard-and-trackpad-inside-room-KE0nC8-58MQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></span>

概要

この個人ブログの技術スタックは以下の通り：

• フロントエンド
  • Next.js[v14.2.5]
• バックエンド
  • Node.js[v20.15.0], Express[v4.19.2]
• インフラ
  • AWS EC2, ALB, ACM, Route53, Amplify

技術選定

フロントエンド

Next.js を選んだのは単純に使ってみたかったから。 Next.js がどのような背景で生まれ、どのような課題を解決してくれるかとか、 どのようなアプリケーションに向いているかとかは何もわかっていない。 開発については、最初は Next.js のドキュメントを読みながら進めていたが、 理解できず ChatGPT に聞きながら進めた。デザインも ChatGPT に教えてもらった。

バックエンド

Node.js を選んだのはバックエンドを簡単に構築できること。 あとは使える言語が Python、PHP、JavaScript くらいだからフロントエンドに合わせて JS で書ける Node.js にした。

インフラ

インフラは AWS しかわからないため AWS に頼らざるを得ない。 フロントエンドはデプロイが簡単な Amplify を採用した。 バックエンドは最初は Lambda にしようとしたが、Express をインポートできなかったので EC2 にした。

詳細

フロントエンド

まずはフォルダ構成について記述する。 App Router というものを使用してルーティングを行っているらしい。

app # ホーム画面
├── about # サイトの紹介ページ
│   ├── about.module.css
│   ├── layout.tsx
│   └── page.tsx
├── blog # 投稿一覧ページ
│   ├── [id] # 個々の投稿ページ
│   │   ├── page.tsx
│   │   └── post.module.css
│   ├── blog.module.css
│   ├── layout.tsx
│   └── page.tsx
├── app.css
├── app.module.css
├── globals.css
├── layout.tsx
├── page.tsx
└── template.tsx

React との違いで衝撃的だったのは、フックを使わない点。 小規模のアプリだから使わずに済んでいるのかもしれないが、 本アプリを React でやろうとすると必ずフックが必要である。 例えば、React では投稿内容を取得するリクエストのレスポンスは次のようになる：

const [post, setPost] = useState < Post > null;

useEffect(() => {
  // バックエンドからデータを取得
  const fetchData = async () => {
    const response = await fetch(
      `http://localhost:3000/api/posts/${params.id}`
    );
    const data = await response.json();
    setPost(data);
  };
}, [params.id]);

これが Next.js だと次のようになる：

const res = await fetch(`${process.env.BACKEND_URL}/api/posts/${params.id}`, {
  cache: 'no-store',
});
const post = await res.json();

バックエンド

データベースを使わず、直接マークダウンファイルを格納している。 投稿を作成できる UI の開発もしていない。

.
├── index.js
└── posts # マークダウンファイルを直接保存
    ├── 1.md
    ├── 2.md
    └── images # マークダウンファイルに埋め込む画像ファイル保存場所

インフラ

S3 と CloudFront を使おうと思ったが、経験がなく時間がかかりそうだったため Amplify でデプロイ。 EC2 でポート開放するのはセキュリティ上怖いので ALB を配置。 以前お名前ドットコムで取得していたドメインを使用して証明書や ALB、Amplify のカスタムドメインとした。

インスタンスにプロセスを常駐化する対応を初めて行った。 これは systemd にサービスを登録することで実現できる。 まずはサービスファイルを作成する。

# サービスファイルを作成
sudo vi /etc/systemd/system/next-blog-app.service
# サービスを確認
sudo systemctl list-unit-files --type=service | grep next-blog-app
# サービス起動
sudo systemctl start next-blog-app.service
# サーバー起動時に自動でサービスを起動
sudo systemctl enable next-blog-app.service

サービスファイルの内容は以下：

[Unit]
Description=Next Blog Backend and API Application
After=network.target

[Service]
ExecStart=/home/ec2-user/.nvm/versions/node/v20.17.0/bin/node /home/ec2-user/next-blog-app-backend/index.js
Restart=always

[Install]
WantedBy=multi-user.target

その他

フリー画像おすすめサイト

• o-dan

Web デザインテンプレートおすすめサイト

• Next.js starter templates and themes
  • https://next-blog-wordpress.vercel.app/