開発ガイド

BaiZe Frameworkで開発を始めるための完全ガイド

1

プロジェクト構築

環境セットアップからプロジェクトの初期化まで
2

Javaプロジェクト構造

バックエンドアーキテクチャの理解
3

Java機能開発

実際の機能開発方法を学ぶ
4

Vue3プロジェクト構造

フロントエンドアーキテクチャの理解
5

Vue3機能開発

フロントエンドコンポーネントの開発
6

コード生成

コード生成器の使用方法
7

バックエンドデプロイ

Spring Bootアプリケーションの本番デプロイ
8

フロントエンドデプロイ

Vue3アプリケーションの本番デプロイ
9

Nginx設定

リバースプロキシと最適化

目次

9. Nginx設定

1. 完全なNginx設定例

BaiZe Frameworkのフロントエンドとバックエンドの完全なNginx設定例を以下に示します。

前提条件

  • バックエンドアプリケーションポート：8888
  • バックエンドアプリケーションパス：/baiZe-admin-api
  • フロントエンド静的ファイルパス：/home/baize-admin/dist

1.1 完全なNginx設定ファイル

server {
    listen 80;
    server_name your-domain.com;

    # ファイルアップロードサイズ制限
    client_max_body_size 100m;

    # フロントエンド静的ファイル
    location / {
        alias /home/baize-admin/dist/;
        try_files $uri $uri/ /index.html last;
        index index.html;

        # index.htmlホームページはキャッシュしない
        expires -1;

        # 静的リソースファイル（index.html以外）を30日間キャッシュ
        if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|css|js)$) {
            expires 30d;
        }
    }

    # バックエンドAPIプロキシ
    location /baiZe-admin-api/ {
        proxy_pass http://127.0.0.1:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocketサポート（必要な場合）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # タイムアウト設定
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # gzip圧縮
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

2. 設定の詳細説明

2.1 フロントエンド静的ファイル設定

location / {
    alias /home/baize-admin/dist/;
    try_files $uri $uri/ /index.html last;
    index index.html;

    # index.htmlホームページはキャッシュしない
    expires -1;

    # 静的リソースファイルを30日間キャッシュ
    if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|css|js)$) {
        expires 30d;
    }
}

設定項目の説明：

  • alias：フロントエンド静的ファイルのディレクトリを指定
  • try_files：Vue Routerのhistoryモード対応、存在しないパスはindex.htmlに転送
  • expires -1：index.htmlはキャッシュしない（デプロイ後の即時反映のため）
  • ifブロック：画像、CSS、JS等の静的リソースは30日間キャッシュ

2.2 バックエンドAPIプロキシ設定

location /baiZe-admin-api/ {
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # WebSocketサポート
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    # タイムアウト設定
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
}

設定項目の説明：

  • proxy_pass：バックエンドアプリケーションのアドレスを指定
  • proxy_set_header：リクエストヘッダーの設定、クライアント情報をバックエンドに転送
  • proxy_http_version 1.1：HTTP/1.1を使用（WebSocketサポートのため）
  • proxy_*_timeout：各種タイムアウト設定

2.3 gzip圧縮設定

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

設定項目の説明：

  • gzip on：gzip圧縮を有効化
  • gzip_min_length：1KB以上のファイルのみ圧縮
  • gzip_buffers：圧縮バッファ設定
  • gzip_comp_level：圧縮レベル（1-9、6が推奨）
  • gzip_types：圧縮対象のMIMEタイプ
  • gzip_vary on：Varyヘッダーを追加
  • gzip_disable：IE6はgzipを無効化

3. HTTPS設定（SSL/TLS）

HTTPSを使用する場合の設定例：

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    # SSL証明書設定
    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/privkey.pem;

    # SSL設定
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 1d;

    # HSTS
    add_header Strict-Transport-Security "max-age=63072000" always;

    # その他の設定は上記と同じ
    client_max_body_size 100m;

    location / {
        alias /home/baize-admin/dist/;
        try_files $uri $uri/ /index.html last;
        index index.html;
        expires -1;

        if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|css|js)$) {
            expires 30d;
        }
    }

    location /baiZe-admin-api/ {
        proxy_pass http://127.0.0.1:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
}

# HTTPからHTTPSへのリダイレクト
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

4. 複数環境の設定

テスト環境、プレリリース環境、本番環境等の複数環境に対応する場合、server_nameで区別します：

# テスト環境
server {
    listen 80;
    server_name test.baize.vip;

    # ... 設定内容
}

# プレリリース環境
server {
    listen 80;
    server_name pre.baize.vip;

    # ... 設定内容
}

# 本番環境
server {
    listen 80;
    server_name baize.vip;

    # ... 設定内容
}

5. 設定の適用と再起動

# 設定ファイルのテスト
nginx -t

# 設定の再読み込み
nginx -s reload

# Nginxの再起動
systemctl restart nginx

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

6.1 404エラー

  • フロントエンド：aliasパスが正しいか確認
  • バックエンド：proxy_passとbackendのcontext-pathが一致するか確認

6.2 CORSエラー

  • バックエンド設定でCORSが有効になっているか確認
  • proxy_passのパスが正しいか確認

6.3 502 Bad Gateway

  • バックエンドアプリケーションが起動しているか確認
  • ポート番号が正しいか確認
  • ファイアウォール設定を確認