React Docker 環境変数 フロントエンド 開発環境

# 【React + Docker】環境変数でAPIのドメインを管理しよう！実践ガイド

こんにちは！フリーランスエンジニアのこたろうです。

フロントエンド開発において、APIのエンドポイントを環境ごとに切り替えたい場面は多いと思います。今回は、React + Docker環境でAPIのベースURLを環境変数で管理する方法を、具体的なコード例とともに解説します。

## 目次

1. 環境構成の説明
2. 環境変数の設定方法
3. Docker環境での実装手順
4. 実装時の注意点
5. トラブルシューティング

## 1. 環境構成の説明

今回の開発環境は以下の構成です：

- フロントエンド: React + Nginx
- バックエンド: Go
- データベース: PostgreSQL
- コンテナ管理: Docker Compose

ディレクトリ構成：

```plaintext
todo/
├── backend/               # Goアプリケーション
├── frontend/             # Reactアプリケーション
├── postgres-data/        # PostgreSQLのデータ
├── docker-compose.yml    # Docker Compose設定
└── .env                  # 環境変数ファイル
```

## 2. 環境変数の設定方法

### 2.1 現状の課題

APIのベースURLがハードコーディングされており、環境ごとの切り替えが困難です：

```javascript
// 修正前：ハードコーディングされたURL
const API_BASE_URL = 'https://www.focus-todo.com:8443/api/tasks';
```

### 2.2 環境変数による解決

`.env`ファイルで環境ごとの設定を管理します：

```env
# .env
REACT_APP_URL_DOMAIN=http://localhost:8080
```

```javascript
// 修正後：環境変数を使用
const API_BASE_URL = `${process.env.REACT_APP_URL_DOMAIN}/api/tasks`;
```

> **Point**: Reactでは環境変数名を`REACT_APP_`で始める必要があります。

## 3. Docker環境での実装手順

### 3.1 Dockerfileの設定

```dockerfile
# Stage 1: ビルド環境
FROM node:18 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

# 環境変数の設定
ARG REACT_APP_URL_DOMAIN
ENV REACT_APP_URL_DOMAIN=$REACT_APP_URL_DOMAIN

RUN npm run build

# Stage 2: 本番環境
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

### 3.2 Docker Composeの設定

```yaml
version: "3.8"

services:
  frontend:
    build:
      context: ./frontend
      args:
        REACT_APP_URL_DOMAIN: ${REACT_APP_URL_DOMAIN}
    ports:
      - "3000:80"
    environment:
      - REACT_APP_URL_DOMAIN=${REACT_APP_URL_DOMAIN}
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
    ports:
      - "8080:8080"
    environment:
      - DATABASE_HOST=database
      - DATABASE_USER=kotaroikeda
      - DATABASE_PASSWORD=kotaro220
      - DATABASE_NAME=tododb
    depends_on:
      - database

  database:
    image: postgres:14
    environment:
      POSTGRES_USER: kotaroikeda
      POSTGRES_PASSWORD: kotaro220
      POSTGRES_DB: tododb
    ports:
      - "15432:5432"
```

### 3.3 APIクライアントの実装

```javascript
import axios from 'axios';

const API_BASE_URL = `${process.env.REACT_APP_URL_DOMAIN}/api/tasks`;

export const getTasks = async () => {
  try {
    const response = await axios.get(API_BASE_URL);
    return response.data;
  } catch (error) {
    console.error('Error fetching tasks:', error);
    throw error;
  }
};
```

## 4. 実装時の注意点

1. **環境変数の命名規則**
   - `REACT_APP_`プレフィックスは必須
   - わかりやすい命名を心がける（例：`REACT_APP_API_URL`）

2. **環境変数の更新反映**
   - 環境変数を変更した場合は再ビルドが必要
   ```bash
   npm run build
   docker-compose up --build
   ```

3. **セキュリティ対策**
   - 機密情報は`.gitignore`に追加
   - 本番環境の値は別途管理

## 5. トラブルシューティング

よくある問題と解決方法：

1. **環境変数が`undefined`になる**
   - `REACT_APP_`プレフィックスを確認
   - `.env`ファイルの配置場所を確認

2. **CORSエラーが発生する**
   - バックエンドのCORS設定を確認
   ```go
   // Goでの設定例
   w.Header().Set("Access-Control-Allow-Origin", "*")
   ```

## まとめ

環境変数を使ったAPIドメインの管理により：
- 環境ごとの設定変更が容易に
- コードの保守性が向上
- セキュリティリスクの軽減

今回の方法を活用することで、より柔軟で管理しやすいアプリケーション開発が可能になります。

## 参考文献
- [Create React App - Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/)
- [Docker Documentation](https://docs.docker.com/)