H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプレイすることです。ネイティブゲームはパッケージ化して共有することができ、ミニゲームをリリースするまでのプロセスは長いです。では、H5ミニゲームはどのように共有すればよいのでしょうか。この記事では、nginx を介して Alibaba Cloud でビルドされた H5 ゲームをホストする方法を説明します。

コンテンツ:

  1. nginxをダウンロードして設定する
  2. ゲームビルドファイルをクラウドサーバーにアップロードする
  3. nginxはポートごとに複数の仮想ホストを設定します

開発環境:

Alibaba Cloud サーバー: Ubuntu 14.04.5 LTS (GNU/Linux 4.4.0-93-generic x86_64)

nginx: nginx/1.4.6 (Ubuntu)

WinSCP: 5.15.3

詳細な手順:

1. nginxをダウンロードして設定する

始める前に、nginx とは何かについて簡単に説明しましょう。nginx は軽量の Web サーバー/リバース プロキシ サーバーおよび電子メール (IMAP/POP3) プロキシ サーバーであり、BSD のようなプロトコルでリリースされています。メモリの占有量が少なく、強力な同時実行機能を備えているのが特徴です。

リバースプロキシとは、インターネット上の接続要求を受け付け、内部ネットワーク上のサーバーにその要求を転送し、サーバーから取得した結果をインターネット上の接続要求元のクライアントに返すプロキシサーバーです。このとき、プロキシサーバーは外部からはサーバーのように見えます。

負荷分散は、実際にはトラフィックを複数のサーバーに分散して実行し、各サーバーの負荷を軽減します。複数のサーバーが連携してタスクを完了することで、データ スループットが向上し、ネットワーク機器とサーバーの帯域幅が拡大し、スループットが増加し、ネットワーク データ処理機能が強化され、ネットワークの柔軟性と可用性が向上します。

nginx を使用すると、静的リソースと動的リソースを分離できます。変更されない静的リソースは nginx に配置され、動的リソースは TomCat サーバーで実行されます。静的リソースにアクセスするときは、TomCat を要求せずに nginx に直接要求できるため、サーバーへの負荷が軽減されます。

現在、APT ソースに基づくインストールとソース コード パッケージのコンパイルによるインストールの 2 つのインストール方法がサポートされています。ただし、最新バージョンをインストールする場合は、ソース コード パッケージをダウンロードしてコンパイルし、インストールする必要があります。この記事では、APT ソースのインストール方法を使用します。別のインストール方法を知りたい場合は、Baidu で検索してください。

1.1 ソフトウェアソースの更新

sudo apt-getアップデート

1.2 nginxをインストールする

sudo apt-get でnginxをインストールします

注: インストールされたファイルの場所:

/usr/sbin/nginx: メインプログラム

/etc/nginx: 設定ファイルを保存します

/usr/share/nginx: 静的ファイルを保存します

/var/log/nginx: ログを保存します

1.3 nginxが正常にインストールされているかどうかを確認する

nginx -v

1.4 nginxを起動する

サービス nginx 開始

1.5 起動後、ブラウザにサーバーのパブリック IP を入力すると、nginx のウェルカム ページが表示されます。これは、nginx が正常にインストールされたことを意味します。

2. ゲームビルドファイルをクラウドサーバーにアップロードする

2.1 クラウド サーバーにファイルをアップロードするには、WinSCP というツールが必要です。このソフトウェアは Baidu Cloud にアップロードされています。パブリック アカウントのバックグラウンドで「WinSCP」と返信すると入手できます。何も考えずにインストールできます。

2.2 ファイルをアップロードする前に、クラウド サーバーにゲーム ビルド ファイルを保存するためのフォルダーを作成する必要があります。2 つのゲームのビルド ファイルを保存するため、2 つのサブフォルダーを作成しました。ディレクトリは次のとおりです (ルート ディレクトリに作成しましたが、実際の状況に応じて作成できます)。

/www/80

/www/81

2.3 フォルダーを作成したら、WinSCP を使用してゲーム ビルド ファイルをアップロードできます。ビルド済みのゲームを 2 つ用意し、すべてのビルド ファイルを選択して右クリックし、上記で作成したディレクトリにアップロードします。

3. nginxはポートごとに複数の仮想ホストを設定します

始める前に、nginx 設定ファイルについて簡単に説明しましょう。

... #グローバル ブロック イベント { #イベント ブロック...
}

http #http ブロック {
  ... #http グローバル ブロック サーバー #server ブロック { 
    ... #サーバーグローバルブロックの場所 [パターン] #場所ブロック {
      ...
    }
    場所 [パターン] 
    {
      ...
    }
  }
  サーバ
  {
   ...
  }
  ... #http グローバル ブロック }

グローバル ブロック: nginx にグローバルに影響するディレクティブを構成します。一般的には、nginx サーバーを実行しているユーザー グループ、nginx プロセス pid の保存パス、ログの保存パス、構成ファイルの導入、生成が許可されるワーカー プロセスの数などがあります。

イベント ブロック:構成は、nginx サーバーまたはユーザーとのネットワーク接続に影響します。各プロセスの最大接続数、接続要求を処理するために選択するイベント駆動型モデル、複数のネットワーク接続を同時に受け入れるかどうか、複数のネットワーク接続のシリアル化を有効にするかどうかなどがあります。

http ブロック:複数のサーバーをネストし、プロキシ、キャッシュ、ログ定義、およびサードパーティ モジュールのその他のほとんどの機能と構成を構成できます。ファイルのインポート、MIME タイプの定義、ログのカスタマイズ、ファイル転送に sendfile を使用するかどうか、接続タイムアウト、単一接続要求の数など。

サーバー ブロック:仮想ホストの関連パラメータを設定します。1 つの http に複数のサーバーが存在する場合があります。

ロケーション ブロック:リクエストのルーティングとさまざまなページの処理を構成します。

理解を深めるための設定ファイルを次に示します。

############ 各ディレクティブはセミコロンで終わる必要があります。 #################
#user administrator administrators; #ユーザーまたはグループを設定します。デフォルトは nobody nobody です。
#worker_processes 2; #生成可能なプロセスの数。デフォルトは 1 です
#pid /nginx/pid/nginx.pid; # 実行中の nginx プロセスのストレージ アドレスを指定します。 file error_log log/error.log debug; # ログのパスとレベルを指定します。この設定は、グローバル ブロック、http ブロック、サーバー ブロックに配置でき、レベルは次のとおりです: debug|info|notice|warn|error|crit|alert|emerg
イベント {
  accept_mutex on; #集団パニックを防ぐためにネットワーク接続のシリアル化を設定します。デフォルトはオンです
  multi_accept on; #プロセスが複数のネットワーク接続を同時に受け入れるかどうかを設定します。デフォルトはオフです
  #epoll を使用; #イベント駆動モデル、select|poll|kqueue|epoll|resig|/dev/poll|eventport
  worker_connections 1024; #最大接続数、デフォルトは512
}
http {
  include mime.types; #ファイル拡張子とファイルタイプのマッピングテーブル default_type application/octet-stream; #デフォルトのファイルタイプ、デフォルトは text/plain
  #access_log off; #サービスをキャンセル loglog_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #カスタム形式access_log log/access.log myFormat; #combined はログ形式のデフォルト値ですsendfile on; #sendfile によるファイル転送を許可します。デフォルトはオフで、http ブロック、サーバー ブロック、場所ブロックで使用できます。
  sendfile_max_chunk 100k; #各プロセスによる呼び出しごとに転送できるチャンクの数は、設定値を超えることはできません。デフォルト値は 0 で、上限がないことを意味します。
  keepalive_timeout 65; #接続タイムアウト、デフォルトは 75 秒、http、server、location ブロックで指定できます。

  アップストリーム mysvr {  
   サーバー 127.0.0.1:7878;
   サーバー 192.168.10.121:3333 バックアップ; #ホットバックアップ}
  error_page 404 https://www.baidu.com; #エラーページサーバー{
    keepalive_requests 120; #単一接続リクエストの上限。
    listen 4545; #リッスンポート server_name 127.0.0.1; #リッスンアドレスの場所 ~*^.+$ { #要求された URL フィルタリング、通常の一致、~ は大文字と小文字を区別し、~* は大文字と小文字を区別しません。
      #ルート パス; #ルート ディレクトリ#index vv.txt; #デフォルト ページ proxy_pass http://mysvr を設定; #mysvr で定義されたサーバー リストへのリダイレクトを要求 deny 127.0.0.1; #拒否された IP
      allow 172.18.5.54; #許可されたIP      
    } 
  }
}

仮想ホスト技術を使用すると、実際のホストを多数の「仮想」ホストに分割できます。各仮想ホストには独立したドメイン名と IP アドレスがあり、完全なインターネット サーバー (www、FTP、電子メール) 機能を備えています。仮想ホストは互いに完全に独立しています。外部から見ると、各仮想ホストは独立したホストとまったく同じです。

仮想ホストには、IP ベースの仮想ホスト、ポートベースの仮想ホスト、名前ベースの仮想ホストの 3 種類があります。この記事では、複数の仮想ホストに対してポートベースの設定を使用します。他の 2 つの設定を知りたい場合は、Baidu で検索してください。

3.1 この記事ではポート 80 と 81 を開きます。ポート 80 はデフォルトのポートです。開始する前に、Alibaba Cloud サーバーでポート 81 を開く必要があります。

3.2 Alibaba Cloud サーバーの設定が完了したら、リモートでサーバーにログインしてポートが正常に開かれているかどうかを確認できます。ポートが検出されない場合は、手動で開く必要があります。

ステータスを確認します:

iptables -L -n 

ポート 81 が利用できない場合は、ポート 81 を開く必要があります。

開いているポート:

iptables -I 入力 -p tcp --dport 81 -j 受け入れ

ポートを閉じるには:

iptables -D 入力 -p tcp --dport 81 -j 受け入れ

3.3 ポートを開いたら、nginx.conf ファイルを設定する必要があります。nginx.conf 設定ファイルについては、上記で簡単に説明しました。ポートを介して複数の仮想ホストを設定する場合は、新しく開いたポートをリッスンするサーバーを追加するだけです。

  サーバー{
    listen 80; // ポート80をリッスンします server_name test80.superyu.com;
    root /www/80; // プロジェクトディレクトリの場所 / {
      インデックス index.html index.htm;
    }
    
    エラーページ 500 502 503 504 /50x.html;
    場所 = /50x.html {
      ルートhtml;
    }  
  }
  
  サーバー{
    listen 81; // ポート81をリッスンします server_name test81.superyu.cn;
    root /www/81; // プロジェクトディレクトリの場所 / {
      インデックス index.html index.htm;
    }
    
    エラーページ 500 502 503 504 /50x.html;
    場所 = /50x.html {
      ルートhtml;
    }    
  }

3.4 nginx.conf ファイルを設定したら、nginx を再起動して効果を確認します。

nginx をシャットダウンせずに設定ファイルを更新するには、次のコマンドを入力します。

nginx -s リロード

3.5 エディターに http://public network:port と入力すると、次の効果を確認できます。

やっと:

H5 ゲームを nginx サーバーにデプロイする方法に関するこの記事はこれで終わりです。より関連性の高い nginx デプロイ h5 コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue プロジェクトを nginx にデプロイする方法 (履歴モード)
  • ThinkPHP プロジェクトを Nginx にデプロイするチュートリアル
  • nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法
  • Vue プロジェクト nginx を非ルート ディレクトリにデプロイするときに空白が更新される問題を解決する
  • nginx で vue プロジェクトをデプロイするときに js css ファイルが見つからない問題の解決策
  • vue プロジェクトを nginx/tomcat サーバーにデプロイする実装
  • nginx で Vue プロジェクトをデプロイする方法
  • Nginx に React プロジェクトをデプロイする方法の例
  • vue-cli で構築されたプロジェクトにアクセスするために nginx をデプロイする方法
  • uWSGI と Nginx を使用して Flask プロジェクトをデプロイする方法の例
  • Nginx で Angular プロジェクトを展開する際の落とし穴

<<:  Vueを使用して天気コンポーネントをロードする方法の詳細な説明

>>:  Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)

推薦する

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

CentOS のデフォルトの SSH ポート番号を変更する方法の例

LinuxサーバーのデフォルトのSSHポート番号は通常22なので、ほとんどのユーザーはセキュリティ上...

mysql 簡単な操作例を表示

この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...

MySQLは既存のコンテンツを保持し、後でコンテンツを追加します

このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...

MySQL の例 DTID マスタースレーブ原理の分析

目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

MySqlデータベースの基礎知識のまとめ

目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...

優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

Tomcat maxPostSize設定実装プロセス分析

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル (Win7 の場合)

Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

Reactのコンポーネント作成方法のまとめ

目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...