開発要件

今回開発する新聞コラムWebアプリには以下の要件があります：

一般ユーザー向け機能:
- 新聞コラムの一覧表示
- 個別の詳細表示
- お気に入り機能の提供
- 検索機能: ワード検索、新聞単位、年月日単位の検索
管理者向け機能:
- 新聞コラムデータの登録機能（新聞名、コラム名、本文、年月日）
- CSVインポート機能で大量データを一括登録
バックエンド機能:
- バッチ処理による新聞コラムデータの定期取得と保存
インフラ要件:
- コンテナ化して環境依存を排除
- 小規模プロジェクトに適した低コストのデプロイ

技術選定

1. バックエンドの選定: Go言語

選定理由:

高速性: Go言語はコンパイル型言語であり、高速な処理が可能です。バッチ処理を定期的に行う要件があるため、高速なデータ処理能力が求められました。
シンプルさ: 標準ライブラリが充実しており、HTTPサーバーの構築が簡単です。Ginフレームワークを使えば、ルーティングやJSONレスポンスの処理がシンプルに記述できます。
スケーラビリティ: 将来的にアプリケーションを大規模化する場合でも対応可能です。

他の選択肢:

Ruby On Rails: 開発効率に優れていますが、Goのほうがパフォーマンスに優れています。今回の新聞コラムWebアプリでは以下の理由で高パフォーマンスが求められました：

大量データの処理: バッチで新聞コラムデータを取得するため、高速に処理できる言語が必要。
検索機能の負荷: ユーザーが頻繁に検索を行う場合、レスポンス速度を優先する必要がある。

Goはコンパイル型言語であり、ネイティブコードに変換されるため、Rails（Rubyのインタプリタ型言語）よりも高速です。この点が大きな差となりました。

2. フロントエンドの選定: Next.js + TypeScript

選定理由:

SSR（サーバーサイドレンダリング）対応: Next.jsはSSRが可能なため、SEOに優れており、検索機能やコラム表示が多い今回のアプリに適しています。
開発効率: TypeScriptを導入することで、型定義による安全性を確保しながらスムーズに開発できます。
拡張性: Next.jsはReactベースで柔軟性があり、将来的な機能追加にも対応しやすいです。

他の選択肢:

React単体: 優れたライブラリですが、SSRやプロジェクト構造を自前で設定する必要があります。Next.jsの方が初期設定が簡単でした。

環境構築手順

1. プロジェクトフォルダの作成

mkdir newspaper-app
cd newspaper-app

プロジェクト用のフォルダを作成します。

2. フォルダ構成の準備

mkdir frontend
mkdir backend
touch docker-compose.yml

プロジェクトをfrontendとbackendに分割し、docker-compose.ymlを作成します。

3. docker-compose.ymlの設定

3-1. 環境変数の設定

touch .gitignore
touch .env

.gitignore

.env

.env

POSTGRES_PASSWORD=password
POSTGRES_DB=db

3-2. dokcer-compose.ymlの設定

dokcer-compose.yml

services:
  backend:
    build:
      context: ./backend/
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    volumes:
      - ./backend:/app 
    depends_on:
      - db
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000 
  db:
    image: "postgres:15-alpine"
    ports:
      - "5432:5432"
    env_file:
      - .env
    volumes:
      - db-store:/var/lib/postgresql/data

volumes:
  db-store:

4. バックエンド環境の設定

4-1. Dockerfileの作成

touch backend/Dockerfile

backend/Dockerfile

FROM golang:latest

WORKDIR /app

3-2. Ginフレームワークのセットアップ

docker-compose run backend sh

コンテナ内で以下を実行：

# go mod init github.com/jijimama/newspaper-app
# go get -u github.com/gin-gonic/gin

3-3. サンプルコードの作成

touch main.go

main.go

package main

import (
	"github.com/gin-gonic/gin"
)

func main() {
  router := gin.Default()
	
  router.GET("/", func(c *gin.Context) {
	c.JSON(200, gin.H{
      "message": "Hello, World!",
	})
  })

  router.Run(":8080")
}

3-4. Dockerfileの更新

backend/Dockerfile

FROM golang:latest

WORKDIR /app

COPY . .

RUN go mod download

RUN go build -o main .

EXPOSE 8080

CMD ["go", "run", "main.go"]

3-5. 環境の起動

docker-compose up backend --build

ブラウザで http://localhost:8080 にアクセスすると以下のレスポンスが返ります：

{"message":"Hello, World!"}

4. フロントエンド環境の設定

4-1. Dockerfileの作成

touch frontend/Dockerfile

frontend/Dockerfile

FROM node:18-alpine

WORKDIR /app

4-2. Next.jsのセットアップ

docker-compose run frontend sh

コンテナ内で以下を実行：

/app # rm ./Dockerfile
/app # npx create-next-app . --typescript
/app # touch Dockerfile

4-3. Dockerfileの設定

FROM node:18-alpine

WORKDIR /app

COPY package.json package-lock.json ./

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

CMD ["npm","run","dev"]

4-4. 環境の起動

docker compose up frontend --build

ブラウザで http://localhost:3000 にアクセスしてNext.jsアプリが表示されることを確認します。

最後に

以上が新聞コラムWebアプリの開発環境構築手順です。この記事を参考にぜひご自身のプロジェクトにも応用してください！

参考文献