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 インストール)

推薦する

HTMLを教える記事

アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...

ReactでのsetStateの使用と同期と非同期の使用

React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリン...

WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

Reactは適応性の高い仮想リストを実装する

目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理:最適化: 0x2 ...

MySQL で datetime 型のデフォルト値を設定する方法

Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...

純粋なCSS3で実装されたネオンライト効果

達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...

HTML 特殊文字変換表

キャラクター小数点文字番号エンティティ名---未使用空間---スペースバー! ! ---感嘆符「 」...

MySQL スケジュール データベース バックアップ (フル データベース バックアップ) の実装

目次1. MySQLデータのバックアップ1.1. データをバックアップするためのmysqldumpコ...

HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要

HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

Vue はアップロードされた画像に透かしを追加する機能を実装します

この記事では、Vueでアップロードされた画像に透かしを追加する具体的な実装コードを参考までに共有しま...