FastAPI × React LeafletでGoogle Earth Engineの衛星データを扱う

はじめに

Google Earth Engine（GEE）は、膨大な衛星データを API 経由で取得・解析できる強力なプラットフォームです。本記事では、FastAPI（Python）と React Leaflet（JavaScript）を組み合わせて、GEE の衛星データを Web 地図上に可視化するシンプルな構成例を紹介します。

こんな方におすすめ

• 自社サービスや業務で衛星データを活用したい
• クラウドネイティブな地理空間データ基盤を検討している
• Google Earth Engine の API 活用事例を知りたい

アーキテクチャ概要

• バックエンド: FastAPI（Python）で GEE API をラップし、衛星画像タイルや NDVI 値などを提供
• フロントエンド: React + React Leaflet で地図 UI を構築し、API から取得したタイルを表示
• 認証・API キー管理: Google Cloud のサービスアカウント認証を Docker コンテナ内で完結

なぜフロント・バック分離？

• セキュリティ: Google の認証情報はサーバー側（FastAPI）だけに持たせ、フロントには渡さない
• 拡張性: バックエンド API を拡張すれば、衛星データ以外の地理情報も容易に追加可能
• UI の自由度: React でリッチな地図 UI や分析ダッシュボードを柔軟に実装できる

最小構成のサンプル

本記事の構成・コードは最小限のサンプルです。自社要件に合わせて拡張・カスタマイズ下さい。

1. バックエンド（FastAPI）

from fastapi import FastAPI
import ee
import os, json
from google.oauth2 import service_account

app = FastAPI()

credentials_path = os.getenv('GOOGLE_APPLICATION_CREDENTIALS')
with open(credentials_path) as f:
    info = json.load(f)
credentials = service_account.Credentials.from_service_account_info(
    info, scopes=["https://www.googleapis.com/auth/earthengine"])
project_id = info.get('project_id')
ee.Initialize(credentials, project=project_id)

@app.get("/landsat-tile")
def landsat_tile(lat: float, lon: float):
    point = ee.Geometry.Point([lon, lat])
    img = (ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
            .filterBounds(point).sort('CLOUD_COVER').first())
    tile = img.getMapId({'bands': ['B4', 'B3', 'B2'], 'min': 0, 'max': 0.3})
    tile_url = tile['tile_fetcher'].url_format
    return {"tile_url": tile_url}

2. フロントエンド（React + React Leaflet）

import { MapContainer, TileLayer } from "react-leaflet";

export default function MapView({ tileUrl, center }) {
  return (
    <MapContainer center={center} zoom={13} style={{ height: "500px" }}>     
      <TileLayer url={tileUrl} />
    </MapContainer>
  );
}

3. Docker で認証を完結

Google Cloud のサービスアカウント JSON を`GOOGLE_APPLICATION_CREDENTIALS`としてマウントし、

FastAPI コンテナ内で認証を自動化します。

services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - ./api:/app
    environment:
      - GOOGLE_APPLICATION_CREDENTIALS=/app/credentials/service-account-key.json

これにより、認証情報はサーバー側だけに安全に保持され、フロントエンドには一切渡りません。

このようにフロント側で表示されたら成功です。

まとめ

• Google Earth Engine × FastAPI × React Leafletで、衛星データの可視化基盤を最小構成で実現
• 認証は Docker で安全に完結、フロント・バック分離でセキュア＆拡張性
• 企業の業務 DX や新規サービス開発に、衛星データ活用の第一歩としておすすめです。