今すぐ無料デモ体験！

NocoBase をより速くデプロイする方法

HTTP/2、CDN、サーバー位置選択、圧縮、キャッシュなどの技術を活用して NocoBase のデプロイを最適化し、読み込み時間を大幅に短縮してユーザー体験を向上させる方法を学びます。

多くのユーザーは、NocoBaseをデプロイした後、予想よりも動作が遅いと感じることがあります。これは多くの場合、ネットワーク環境、サーバー設定、またはデプロイアーキテクチャが原因です。最適化テクニックの説明に入る前に、まず不必要な懸念を避けるために、通常のNocoBase読み込み速度の参考値を見てみましょう。

NocoBaseの通常読み込み速度参考

以下はNocoBaseデモ環境でテストされた読み込み速度です:

  • URL入力後、初回アプリ起動までの時間：約2秒
  • アプリ内でのページ切り替え：約50～300ミリ秒

次に、コードを変更することなく、デプロイ設定を調整するだけでアクセス速度を大幅に向上させることができるシンプルながら効果的なデプロイ最適化テクニックをいくつか紹介します：

I. ネットワークとインフラストラクチャの最適化

1. HTTPプロトコルバージョン：簡単にHTTP/2を採用する

【前提条件】

  • HTTPS対応が必要：これは重要です！ほとんどの最新ブラウザはHTTPS接続上でのみHTTP/2をサポートしているため、まずSSL証明書を設定する必要があります。
  • サーバー要件：HTTP/2をサポートするサーバーソフトウェア（Nginx 1.9.5+やApache 2.4.17+など）を使用する必要があります。
  • TLSバージョン：TLS 1.2以上を推奨します（TLS 1.3が最適）。古いSSLバージョンではHTTP/2をサポートしていません。

【ヒント】

従来のHTTP/1.1プロトコルには複数のリクエストを処理する際の制限があります—通常は同時に6〜8接続のみで、これはチケットを買うために列に並んでいるようなもので、簡単に遅延を引き起こします。

250416_http1_en

HTTP/2は「マルチプレキシング」技術を使用して複数のリクエストを同時に処理し、リソースの読み込みを大幅に高速化します。最新のHTTP/3は不安定なネットワークでさらに優れたパフォーマンスを発揮します。

250416_http2_en

【最適化の提案】

  • WebサーバーでのHTTP/2サポートが有効になっていることを確認してください。ほとんどのサーバー（NginxやCaddyなど）で簡単に設定できます。
  • Nginxでは、listenディレクティブの後にhttp2パラメータを追加するだけです：
listen 443 ssl http2;

【検証】

ブラウザの開発者パネルで「ネットワーク」オプションを開き、右クリックして「プロトコル」をチェックすると、現在の接続プロトコルバージョンを確認できます： 20250407145442

私たちのテストによると、全体的な速度は約10％向上し、システムにブロックやリソースが多い場合はパフォーマンスの向上がさらに顕著になります。

2. ネットワーク帯域幅：大きいほど良い、柔軟な請求

【ヒント】

高速道路が地方道よりもスムーズなように、帯域幅はデータ転送の効率を決定します。NocoBaseが初めて読み込まれる際、多くのフロントエンドリソースをダウンロードする必要があり、帯域幅が不足していると簡単にボトルネックになります。

【最適化の提案】

  • 十分な帯域幅を選択する（多くのユーザーに対して50Mbps以上を推奨）、この重要なリソースを節約しないでください。
  • 「従量課金制」の請求方式を推奨します：多くのクラウドプロバイダーはこの柔軟なモデルを提供しており、ピーク時により高い帯域幅を享受しながら、通常の使用時にはコストを抑えることができます。

3. ネットワークレイテンシとサーバーの地理的位置：近いほど速い

【ヒント】

レイテンシはデータ転送の待機時間です。十分な帯域幅があっても、サーバーがユーザーから遠すぎる場合（例：ユーザーが中国にいるがサーバーが米国にある）、長距離のために各リクエストの応答が遅くなる可能性があります。

【最適化の提案】

  • NocoBaseをメインユーザーベースに近い地域にデプロイするようにしてください。
  • ユーザーが世界中に分散している場合は、グローバルアクセラレーションサービス（Alibaba Cloud Global AcceleratorやAWS Global Acceleratorなど）を利用してネットワークルーティングを最適化し、レイテンシを低減することを検討してください。

【検証】

pingコマンドを使用して、異なる地域からのレイテンシをテストします。 このアプローチでは、地域に応じて1〜3倍以上のアクセス速度の向上が最も顕著に現れます。 12タイムゾーンにまたがる場合、13秒： 20250416130618

2タイムゾーンにまたがる場合、8秒： 20250409131039

現在の地域内、約3秒： 20250409130928

II. デプロイメントアーキテクチャの最適化

4. サーバーデプロイメントとプロキシ方法：最適なアーキテクチャを選択

【前提条件】

  • サーバー権限：Nginxなどのサービスを設定するには、rootまたはsudo権限が必要です。
  • 基本的なスキル：基本的なサーバー設定の知識が必要ですが、心配しないでください。具体的な設定例を提供します。
  • ポートアクセス：ファイアウォールがポート80（HTTP）と443（HTTPS）へのアクセスを許可していることを確認してください。

【ヒント】

ユーザーがNocoBaseにアクセスする際、リクエストは直接サーバーに送られます。適切なデプロイメント方法を使用すると、サーバーはリクエストをより効率的に処理し、より迅速に応答できます。

【異なるソリューションと推奨事項】

静的リソース用のリバースプロキシを使用せずにNocoBaseを起動する（非推奨）:

  • デメリット：この方法は簡単ですが、高い同時実行性や静的ファイルの処理において性能が低下します。開発とテストにのみ適しています。
  • 推奨：可能であればこの方法は避けてください。

参照「インストールドキュメント」

リバースプロキシなしでは、ホームページの読み込みに約6.1秒かかります 20250409131357

NginxやCaddyをリバースプロキシとして使用する（強く推奨）:

  • メリット：リバースプロキシサーバーは、同時接続の効率的な処理、静的ファイルの提供、負荷分散の実装、HTTP/2設定の簡素化が可能です。
  • 推奨：本番環境では、アプリケーションのデプロイ（ソースコードデプロイ / create-nocobase-app / Dockerイメージ）後にNginxまたはCaddyをリバースプロキシとして使用してください。

参照「デプロイメントドキュメント」

Nginxプロキシを使用すると、ホームページの読み込みは約3〜4秒かかります 20250409131541

20250416081410

負荷分散によるクラスターデプロイメントを使用する（高い同時実行性と高可用性のシナリオに適しています）:

  • メリット：複数のインスタンスをデプロイしてリクエストを処理することで、システム全体の安定性と同時実行能力を大幅に向上させることができます。
  • 具体的なデプロイメント方法については、**クラスターモード**を参照してください。

5. CDNを使用して静的リソースを高速化する

【前提条件】

  • ドメイン要件：登録済みドメイン名とそのDNS設定を管理する能力が必要です。
  • SSL証明書：ほとんどのCDNサービスはSSL証明書の設定を必要とします（無料のLet’s Encrypt証明書を使用できます）。
  • サービス選択：ユーザー地域に基づいて適切なCDNプロバイダーを選択してください（中国本土のユーザーにはICP登録のあるCDNが必要です）。

【ヒント】 CDN（コンテンツデリバリーネットワーク）は静的リソースを世界中のノードにキャッシュし、ユーザーが最も近いノードからリソースを取得できるようにします。これは近くの水源から水を得るようなもので、読み込みの遅延を大幅に削減します。

さらに、CDNの最大の利点はオリジンサーバーの負荷と帯域幅の圧力を大幅に軽減する能力にあります。CDNなしで多くのユーザーが同時にNocoBaseにアクセスすると、すべての静的リソースリクエスト（JavaScript、CSS、画像など）はサーバーに直接届き、帯域幅の飽和、パフォーマンスの低下、さらにはサーバーのクラッシュを引き起こす可能性があります。これらのリクエストをCDNに分散させることで、サーバーはコアビジネスロジックの処理に集中でき、ユーザーにより安定した体験を提供できます。

20250416_0826

【最適化の提案】

  • サーバーを設定して、静的リソースリクエストをCDNを通じて配信します。
  • ユーザーの位置に基づいて適切なCDNプロバイダーを選択します：
  • グローバルユーザー：Cloudflare、Akamai、AWS CloudFront；
  • 中国本土ユーザー：Alibaba Cloud CDN、Tencent Cloud CDN、Baidu Cloud Acceleration。設定例：
# 静的リソースをCDNドメインにリダイレクト
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    rewrite ^(.*)$ https://your-cdn-domain.com$1 permanent;
}
  • 小規模プロジェクトでは、Cloudflareの無料プランが良いCDN高速化を提供できます：
  1. Cloudflareアカウントを登録し、ドメインを追加します；
  2. DNSを変更してドメインをCloudflareのサーバーにポイントします；
  3. コントロールパネルで適切なキャッシュレベルを設定します。

特別な注意点：すべてのユーザーが同じ地域にいる場合でも、CDNの使用を強く推奨します。CDNはサーバーの負担を効果的に軽減し、特に高トラフィック期間中のシステム全体の安定性を向上させるからです。

III. 静的リソースの最適化

6. サーバー圧縮とキャッシュ設定

【前提条件】

  • CPUリソース：圧縮によりサーバーのCPU負荷が増加するため、サーバーには十分な処理能力が必要です。
  • Nginxモジュールサポート：Gzip圧縮は通常組み込まれていますが、Brotli圧縮には追加モジュールのインストールが必要な場合があります。
  • 設定権限：サーバー設定を変更する権限が必要です。

【ヒント】

圧縮を有効にし、合理的なキャッシュ戦略を実装することで、データ転送量と繰り返しリクエストを大幅に削減できます。これは基本的にリソースを「スリム化」して読み込み速度を向上させるようなものです。 20250416081719

【最適化の提案】

  • 最も簡単な解決策：Cloudflareの無料CDNサービスを使用すると、Gzip圧縮が自動的に有効になります。
  • GzipまたはBrotli圧縮を有効にします。Nginxでは次のように設定できます：
# Gzip圧縮を有効にする
gzip on;
gzip_comp_level 6;
gzip_min_length 1000;
gzip_proxied any;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

# Brotli圧縮がサポートされている場合は、より効率的な圧縮のために有効にする
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  • 静的リソースに適切なキャッシュヘッダーを設定して、繰り返しの読み込みを減らします：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
    access_log off;
}

7. SSL/TLSの使用とパフォーマンスの最適化

【前提条件】

  • SSL証明書：有効なSSL証明書が必要です（無料のLet’s Encrypt証明書を使用できます）。
  • サーバー設定権限：SSL設定を変更できる必要があります。
  • DNS設定：OCSP Staplingのための信頼性の高いDNSリゾルバーを設定します。

【ヒント】 セキュリティは常に最優先ですが、不適切なHTTPS設定は遅延を追加する可能性があります。ここでは、セキュリティを確保しながら高いパフォーマンスを維持するためのいくつかの最適化トリックを紹介します。

【最適化の提案】

  • 現在最速のTLSバージョンであるTLS 1.3を使用します。Nginxで設定する方法：
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305;
  • 証明書検証時間を短縮するためにOCSP Staplingを有効にします：
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;
  • セッション再利用を通じて繰り返しのハンドシェイク時間を削減します：
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

【地域間最適化効果】

特別な説明：以下は地域間/12タイムゾーンにまたがるシナリオでの最適化効果で、前述のローカルアクセスシナリオ（約3秒）とは本質的に異なります。地理的距離によるネットワーク遅延は避けられませんが、最適化によって速度を大幅に向上させることができます：

Http2 + CDNキャッシュ + Gzip圧縮 + Brotli圧縮を組み合わせた場合： 最適化前（地域間アクセス）、13秒： 20250416130618 最適化後（地域間アクセス）、8秒： 20250409173528

この例は、地理的位置が離れている場合でも、適切な最適化措置によって読み込み時間を約40％短縮し、ユーザー体験を大幅に改善できることを示しています。

IV. モニタリングとトラブルシューティング

8. パフォーマンスモニタリングと基本的な分析

【前提条件】

  • アクセス可能性：ほとんどのオンラインテストツールを使用するには、Webサイトが公開アクセス可能である必要があります。
  • 基本的なスキル：パフォーマンスメトリクスの基本的な意味を理解する必要がありますが、各主要指標について説明します。

【ヒント】

ボトルネックがどこにあるかを知らずに正確に最適化するのは困難です。いくつかの無料ツールを使用してWebサイトのパフォーマンスを監視し、問題を特定するのに役立てることをお勧めします。

【最適化の提案】

以下の無料ツールを使用してWebサイトのパフォーマンスをチェックします：

以下の主要メトリクスに注目します：

  • ページ読み込み時間
  • サーバー応答時間
  • DNS解決時間
  • SSLハンドシェイク時間

一般的な問題の解決策：

  • DNS解決が遅い？ DNSサービスの変更やDNS事前解決の有効化を検討します。
  • SSLハンドシェイクが遅い？ SSL設定を最適化し、セッション再利用を有効にします。
  • サーバー応答が遅い？ サーバーリソースをチェックし、必要に応じてアップグレードします。
  • 静的リソースの読み込みが遅い？ CDNの実装とキャッシュ戦略の調整を試みます。

デプロイメント最適化クイックチェックリスト

以下のチェックリストは、NocoBaseデプロイメントを迅速にチェックして最適化するのに役立ちます：

  1. HTTPバージョンチェック

    • HTTPS有効（HTTP/2の前提条件）
    • HTTP/2有効
    • 条件が許せばHTTP/3のサポートを検討

  2. 帯域幅評価

    • 十分なサーバー帯域幅（最低10Mbps推奨、50Mbps以上が望ましい）
    • 固定帯域幅ではなく従量課金モデルの検討

  3. サーバー位置の選択

    • サーバーの位置をユーザー地域に近づける
    • 世界中のユーザー向けにグローバルアクセラレーションサービスの使用を検討

  4. デプロイメントアーキテクチャ

    • 静的リソースとAPIを分離するためにNginx/Caddyをリバースプロキシとして使用
    • 必要に応じて、マルチインスタンスデプロイメントと負荷分散技術を採用

  5. CDNの実装

    • CDNを通じて静的リソース配信を高速化
    • 適切なキャッシュ戦略を設定
    • CDNがHTTP/2またはHTTP/3をサポートしていることを確認

  6. 圧縮とキャッシング

    • GzipまたはBrotli圧縮を有効化
    • 適切なブラウザキャッシュヘッダーを設定

  7. SSL/TLSの最適化

    • ハンドシェイク速度を向上させるためにTLS 1.3を使用
    • OCSP Staplingを有効化
    • SSLセッション再利用を設定

  8. パフォーマンスモニタリング

    • 定期的にパフォーマンステストツールを使用してWebサイトを評価
    • 主要メトリクス（読み込み、応答、解決、ハンドシェイク時間）を監視
    • 特定された問題に基づいて最適化

よくある質問

【Q】サーバーがユーザーと異なる地域にデプロイされており、アクセスが遅いです。どうすればよいですか？

【A】最良の解決策は、主要ユーザーと同じ地域にクラウドサーバーを選択することです。それが不可能な場合は、次のこともできます：

  1. CDNサービスを利用して静的リソースを高速化する；
  2. グローバルアクセラレーションサービスを活用してネットワークルーティングを最適化する；
  3. 可能な限りすべての圧縮とキャッシュ最適化措置を有効にする。

【Q】なぜNocoBaseは初回読み込みが遅く、その後は速いのですか？

【A】初回読み込みが遅いのは正常で、初期に多くのリソースをダウンロードする必要があるためです。

公式デモを例にすると、初回読み込みは通常約3秒かかります。その後、URLを入力してアプリケーションにアクセスする際の読み込み時間は約1～2秒ですが、アプリケーション内でのページ切り替えは非常に高速で、約50～300ミリ秒とレイテンシが非常に低くなっています。

20250416130719

過度に長い読み込み時間の場合は、まだ最適化の余地があります：

  1. HTTP/2が有効になっていることを確認する；
  2. CDN高速化を実装する；
  3. Gzip/Brotli圧縮を有効にする；
  4. サーバー帯域幅が十分かどうかを確認する。

【Q】現在共有ホスティングを使用しており、Nginx設定を変更できません。どうすればよいですか？

【A】この場合、最適化オプションは少ないですが、以下をお勧めします：

  1. CDNサービス（Cloudflareなど）の使用を試みる；
  2. アプリケーション内で調整可能なパラメータを最適化する；
  3. 条件が許せば、より多くのカスタム設定をサポートするVPSへのアップグレードを検討する。

これらのシンプルかつ実用的なデプロイメント最適化戦略を通じて、NocoBaseのアクセス速度を大幅に向上させ、ユーザーにスムーズな体験を提供することができます。多くの最適化措置は数時間以内に完了でき、コード変更を必要とせず、簡単に結果を示すことができます。

× View Image