Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

自宅で出来る!ゲームサーバの作り方

17,013 views

Published on

自宅で仮想マシンを使って簡単なゲームサーバの構成を作る方法です。
作った構成で簡単なチャットサーバを実装します。

Published in: Software

自宅で出来る!ゲームサーバの作り方

  1. 1. 自宅で出来る!ゲームサーバの作り方 2015/04/18 上原 光晶 1
  2. 2. 自己紹介 • IT系企業でPGを7年 • ゲームPGを9年ほど • iアプリ6年、スマフォアプリ3年 • 主にサーバ、最近の4年はクライアントも • サーバは主にJava(Tomcat) • クライアントはJava(iアプリ)、C#(Unity) 2
  3. 3. 概要 ゲームサーバ勉強会も含め、様々な勉強会で知識を得る 機会は多いが、実際にそれを試す環境があるとは限らない。 しかし、特にサーバサイドのソフトウェアは多くがオープン ソースで公開されており、個人でも無料で試すことが出来る。 そこで、基本となるWeb+DBベースのゲームサーバ環境の 一例として、簡単なチャットサーバの構築方法をお話したい。 ※ 資料とプロジェクトファイルは、後ほど公開致します。 3
  4. 4. チャットサーバイメージ図 クライアントクライアント Webサーバ DB KVS MySQL Tomcat Redis Webブラウザ Webブラウザ VMware Player 4
  5. 5. • 事前準備 • サーバ環境構築 • 開発環境構築 • サーバ実装 5
  6. 6. • 事前準備 • サーバ環境構築 • 開発環境構築 • サーバ実装 6
  7. 7. 環境 • OS:Windows7 • 仮想マシン環境:VMware Player 7.1.0 • 仮想マシンOS:CentOS 6.6 • 開発環境:Eclipse 4.4.2 Pleiades All in One 7
  8. 8. 環境 • 仮想マシン:VMware Player 7.1.0 • https://my.vmware.com/jp/web/vmware/ free#desktop_end_user_computing/vmware_player/7_0 • VMware-player-7.1.0-2496824.exe 8
  9. 9. 環境 • サーバOS:CentOS 6.6 isoイメージ • http://wiki.centos.org/Download • CentOS-6.6-x86_64-bin-DVD1.iso 9
  10. 10. 環境 • Eclipse 4.4.2 Pleiades All in One • http://mergedoc.sourceforge.jp/index.html#/ pleiades_distros4.4.html • Java版の64bit Full Edition 10
  11. 11. • 事前準備 • サーバ環境構築 • 開発環境構築 • サーバ実装 11
  12. 12. OSインストール • VMware Player起動 • 新規作成で仮想マシン作成 12
  13. 13. OSインストール • CentOS6.6 isoイメージをマウント 13
  14. 14. OSインストール • アカウントを入力 14
  15. 15. OSインストール • 仮想マシン名とフォルダ指定 15
  16. 16. OSインストール • 後は指示通りにすると自動的にインストールが完了 16
  17. 17. サーバ設定 • 言語を日本語に指定し、 先ほど入力したパスワー ドでログインする。 17
  18. 18. サーバ設定 • ターミナルコンソール起動 18
  19. 19. サーバ設定 “su -“ コマンドを入力し、同 じパスワードでrootになれる。 19
  20. 20. サーバ設定 $ コマンド ==> ユーザのアカウントでのコマンド実行 # コマンド ==> rootアカウントでのコマンド実行 ■ ネットワークアクセス制限を解除 # iptables -F # /etc/init.d/iptables save 20
  21. 21. ミドルウェアインストール • 以下の各種ミドルウェアをインストールする • MySQL • Redis • JDK • Tomcat 21
  22. 22. Webサーバ KVS Tomcat Redis MySQLインストール クライアントクライアント DB MySQL Webブラウザ Webブラウザ VMware Player 22
  23. 23. MySQLインストール・初期設定 ■ yumリポジトリ追加 [1] # yum install -y https://dev.mysql.com/get/ mysql-community-release-el6-5.noarch.rpm ■ MySQLパッケージインストール # yum install -y mysql-community-server ■ 文字コード設定 # vi /etc/my.cnf [mysqld] character-set-server=utf8 <= 追記 23
  24. 24. MySQLインストール・初期設定 ■ MySQLの自動起動設定&MySQL起動 # chkconfig mysqld on # /etc/init.d/mysqld start ■ MySQLサーバへアクセスして起動確認 $ mysql -u root … mysql> 24
  25. 25. Webサーバ Tomcat DB MySQL KVS Redis Redisインストール クライアントクライアント Webブラウザ Webブラウザ VMware Player 25
  26. 26. Redisインストール ■ yumリポジトリ追加 [1] # yum install -y http:// rpms.famillecollet.com/enterprise/remi- release-6.rpm ■ Redisパッケージインストール # yum install -y redis ■ 設定変更(他のPCからのアクセスを許可) # vi /etc/redis.conf 以下の行を変更 bind 127.0.0.1 => bind 0.0.0.0 26
  27. 27. Redis初期設定 ■ Redisの自動起動設定&Redis起動 # chkconfig redis on # /etc/init.d/redis start ■ Redisサーバへアクセスして起動確認 $ redis-cli redis 127.0.0.1:6379> 27
  28. 28. DB MySQL KVS Redis Webサーバ Tomcat Java, Tomcatインストール クライアントクライアント Webブラウザ Webブラウザ VMware Player 28
  29. 29. Javaインストール ■ JDK1.8最新版をDL http://www.oracle.com/technetwork/java/javase/ downloads/jdk8-downloads-2133151.html 29
  30. 30. Javaインストール ■ VMware側にコピー ファイルをVMwarePlayerにドラッグ&ドロップすると、デ スクトップにコピーされる ■ インストール # cd /home/server/Desktop/ # yum install -y jdk-8u45-linux-x64.rpm 30
  31. 31. Tomcatインストール ■ パッケージDL http://tomcat.apache.org/download-80.cgi ■ VMware側にコピー Javaと同様 ■ Tomcatインストール # cd /home/server/Desktop/ # tar -zxvf apache-tomcat-8.0.21.tar.gz # mv apache-tomcat-8.0.21 /usr/local/tomcat 31
  32. 32. Tomcat設定 ■ Tomcat Manager用アクセス設定 # cd /usr/local/tomcat/conf # vi tomcat-users.xml 以下を下部(</tomcat-users>の上)に追記 <role rolename=“admin-gui”/> <role rolename=“manager-gui”/> <role rolename=“manager-script”/> <user username=“manager” password=“manager” roles=“admin-gui,manager-gui,manager-script”/> ■ Tomcat起動(仮想マシン再起動のたびに実行) # /usr/local/tomcat/bin/startup.sh 32
  33. 33. Tomcat起動確認 ■ IPアドレス確認 # ifconfig eth0 Link … inet addr:192.168.59.128 … … ■ ホストのWindowsでブラウザ起動し、以下のURLを表示 http://192.168.59.128:8080 33
  34. 34. Tomcat起動確認 ■ マネージャツール確認 Manager Appを開き、Tomcat Webアプリケーションマネー ジャの表示を確認 34
  35. 35. Tomcat起動確認 ■ マネージャツール確認 manager, managerで認証 アプリケーションの一覧が表示されればOK 35
  36. 36. • 事前準備 • サーバ環境構築 • 開発環境構築 • サーバ実装 36
  37. 37. eclipse設定 • eclipse起動 • サーバー・ランタイム作成、Tomcatサーバ作成 • Tomcatのmanager設定 37
  38. 38. Eclipse起動&初期設定 ■ Eclipse起動、workspace作成 workspaceフォルダを指定する 38
  39. 39. Eclipse起動&初期設定 ■ Java EEのレイアウトに変更 39
  40. 40. Eclipse起動&初期設定 ■ Tomcatサーバ設定 [2] サーバータブで新規サーバー追加 40
  41. 41. Eclipse起動&初期設定 ■ Tomcatサーバ設定 Tomcat v8.0を指定して完了 41
  42. 42. Eclipse設定(Tomcat Manager [2]) ■ server.xml <Host appBase=“…> の下に以下を追加 <Context docBase=“${catalina.home}/webapps/ manager” path=“/manager” privileged=“true”/> ■ tomcat-users.xmlに以下を追加 <role rolename=“manager-gui”/> <user username=“manager” password=“manager” roles=“manager-gui”/> ■ Tomcatサーバ起動&アクセス確認 サーバタブでサーバを起動し、ブラウザで以下にアクセス http://localhost:8080/manager 42
  43. 43. プロジェクト新規作成 • Mavenプロジェクト作成(maven-archetype-quickstart) • groupId, artifactId設定して完了 • Javaバージョン、ファセット設定、Tomcatライブラリ追加 • 事前に作成したTomcatサーバにプロジェクト追加して起動 • トップページのHello World!表示を確認(webapp/ index.jsp) 43
  44. 44. プロジェクト新規作成 メニューから、ファイル => 新規 => その他 => Maven => Mavenプロジェクト 44
  45. 45. プロジェクト新規作成 ■ プロジェクト設定 アーキタイプは、[maven-archetype-quickstart」を選択 45
  46. 46. プロジェクト新規作成 ■ プロジェクト設定 アーキタイプパラメータは、例えば以下のように入力 グループId: jp.game.server アーティファクトId: sample-game-server 46
  47. 47. プロジェクト新規作成 ■ プロジェクト設定 プロジェクト・エクスプローラーで右クリック => プロパティー Javaコンパイラー => 「プロジェクト固有の設定を可能にする」 のチェックをOFF Javaのビルド・パス => ライブラリータブ =>「JREシステム・ライブラリー」を「編集」し、「ワークスペー スのデフォルト JRE」をチェック =>「ライブラリーの追加」=>「サーバー・ランタイム」 => 「Tomcat8(Java8)」 47
  48. 48. プロジェクト新規作成 ■ プロジェクト設定 同じく右クリックプロパティの「プロジェクト・ファセット」 で、「ファセット・フォームへ変換」 動的Webモジュールをチェックし、右クリックで「バージョン の変更」=> 3.1に変更し、「より詳しい構成が使用可能」 48
  49. 49. プロジェクト新規作成 ■ プロジェクト設定 コンテンツ・ディレクトリーに「src/main/webapp」入力 49
  50. 50. プロジェクト新規作成 ■ プロジェクト設定 同じく右クリックプロパティの「デプロイメント・アセンブリ」 =>「追加」=>「Javaビルド・パス・エントリー」=> 「Maven依存関係」 50
  51. 51. プロジェクト新規作成 ■ index.jsp作成 src/main/webappを右クリック => 新規 => JSPファイル index.jspを作成し、以下のようにh1タグを追加 <body> <h1>Hello Sample Game Server!</h1> </body> ■ サーバにプロジェクトを追加 プロジェクトフォルダを「ローカル・ホストのTomcat8」に ドラッグ&ドロップ 51
  52. 52. プロジェクト新規作成 ■ 起動確認 同様にサーバを起動し、以下のURLにアクセス http://localhost:8080/sample-game-server/ 「Hello Sample Game Server!」が表示されればOK 52
  53. 53. • 事前準備 • サーバ環境構築 • 開発環境構築 • サーバ実装 53
  54. 54. • [demo1] HTTP GET • [demo2] HTTP POST • [demo3] WebSocket • [demo4] チャットサーバ • [demo5] MySQL • [demo6] Redis 54
  55. 55. [demo1] HTTP GET クライアント Webサーバ Tomcat Webブラウザ HTTP GET 55
  56. 56. [demo1] HTTP GET • サーブレット:HTTPアクセス処理するプログラム • GameServerServlet.java作成 • request.setAttribute, request.getRequestDispatcher • servlet.jsp作成 • request.getAttribute 56
  57. 57. [demo1] jp/game/server/demo1/GameServerServlet.java @WebServlet(“/demo1/servlet”) ・・・アクセス用URL public class GameServerServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("title", “ゲームサーバサンプル"); ・・・受け渡すパラメータ request.setAttribute("body", "ゲームサーバを作るぜ!"); request.getRequestDispatcher(“/demo1/servlet.jsp”). ・・・表示用のJSP forward(request, response); } } 57
  58. 58. [demo1] webapp/demo1/servlet.jsp <%@ page language="java" contentType="text/html; charset=utf8" pageEncoding="utf8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title><%= request.getAttribute("title") %></title> ・・・受け渡されたパラメータ </head> <body> <h1>Demo1 Servlet</h1> <h2><%= request.getAttribute("body") %></h2> </body> </html> 58
  59. 59. [demo2] HTTP POST クライアント Webサーバ Tomcat Webブラウザ HTTP GET/POST 59
  60. 60. [demo2] HTTP POST • GameServerServlet.java • doGetでトップページ表示 • login.jspでログイン画面表示 • doPostでログイン • chat.jspに遷移 60
  61. 61. [demo2] jp/game/server/demo2/GameServerServlet.java @WebServlet("/demo2/servlet") public class GameServerServlet extends HttpServlet { private static final long serialVersionUID = 1L; ・・・ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter(“name"); ・・・クライアントからのパラメータの取得 name = new String(name.getBytes("ISO8859_1"), "UTF-8"); request.setAttribute("name", name); request.getRequestDispatcher("/demo2/chat.jsp").forward(request, response); } } 61
  62. 62. [demo2] webapp/demo2/login.jsp <%@ page language="java" contentType="text/html; charset=utf8" pageEncoding="utf8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>Demo2 Servlet</title> </head> <body> <h1>Demo2 Servlet</h1> <h2><%= request.getAttribute("body") %></h2> <form method="post" action="<%= request.getContextPath() %>/demo2/servlet"> 名前:<input name="name" type="text"/><br/><br/> <input type="submit" value="OK" /> </form> ・・・フォームを使用して、サーバにデータを送信(POST) </body> </html> 62
  63. 63. [demo3] WebSocket クライアント Webサーバ Tomcat Webブラウザ WebSocket 63
  64. 64. [demo3] WebSocket • WebSocket:HTTPベースの双方向通信プロトコル • GameServerWebSocket.java作成 [3] • @OnMessage • ws.jspのJavaScriptでWebSocketインスタンス作成 • onopen時にsend • @OnMessageの動作確認 64
  65. 65. [demo3] jp/game/server/demo3/GameServerWebSocket.java @ServerEndpoint(“/demo3/ws") ・・・WebSocket接続用URL public class GameServerWebSocket { @OnMessage public String onMessage(String message) { ・・・クライアントからのデータ受信時のコールバック System.out.println(message); return message; } } 65
  66. 66. [demo3] webapp/demo3/ws.jsp <%@ page language="java" contentType="text/html; charset=utf8" pageEncoding="utf8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>Demo3 WebSocket</title> <script src="../js/jquery.min.js"></script> <script type="text/javascript"> var url = 'ws://' + location.host + '<%= request.getContextPath() %>/demo3/ws'; var ws = new WebSocket(url); ・・・WebSocketインスタンス生成 ws.onopen = function() { ・・・コネクション接続完了時のコールバック ws.send('Hello WebSocket GameServer’); ・・・サーバにメッセージを送信 }; </script> </head> <body> <h1>Demo3 WebSocket</h1> </body> </html> 66
  67. 67. [demo4] チャットサーバ クライアント Webサーバ Tomcat Webブラウザ HTTP GET/POST, WebSocket クライアント Webブラウザ 67
  68. 68. [demo4] チャットサーバ • GameServerWebSocket.javaを手直しし、ブロードキャスト • chat.jspを手直しし、チャットメッセージ送信&受信機能 • ブラウザ2つ起動して動作確認 68
  69. 69. [demo4] jp/game/server/demo4/GameServerWebSocket.java @ServerEndpoint("/demo4/ws") public class GameServerWebSocket { private String name = ""; @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println("Message:" + message); ・・・ } private void broadcast(String message, Session session) { for (Session s : session.getOpenSessions()) { ・・・現在接続されている全セッション取得 s.getAsyncRemote().sendText(message); ・・・サーバからクライアントへデータ送信 } } } 69
  70. 70. [demo4] webapp/demo4/chat.jsp ・・・ ws.onmessage = function(receive) { ・・・サーバからのメッセージ受信時のコールバック $('#message').html(receive.data + "<br/>" + $(‘#message').html()); ・・・messageのタグに文字列を追加 }; ws.onopen = function() { ws.send('enter,<%= request.getAttribute("name") %>'); }; function send() { ws.send('talk,' + $(‘#inputText')[0].value); ・・・inputTextの文字列をサーバに送信 } ・・・ <span id="message"></span> <br/> <input id="inputText" type="text" placeholder="メッセージ" value=""/> <input type="button" value="送信" onclick=“send();"/> ・・・ボタン押下でsend()メソッド呼び出し ・・・ 70
  71. 71. [demo5] MySQL クライアントクライアント Webサーバ DB MySQL Tomcat Webブラウザ Webブラウザ VMware Player HTTP GET/POST, WebSocket 71
  72. 72. [demo5] MySQL • /etc/my.cnf編集(文字コード) • データベース、テーブル作成(ログインログ、チャットログ) • Mavenでmysql-connector-javaインスコ • Dao.java作成 • ログイン時とチャット発言にログを残すようにする • MySQLにレコードが挿入されていることを確認 72
  73. 73. [demo5] MySQL設定 ■ /etc/my.cnf編集 # vi /etc/my.cnf 以下のように、[mysqld]の行の下に文字コードUTF-8設定の記述を追加し、サーバを再起動 [mysqld] character-set-server=utf8 # /etc/init.d/mysqld restart ■ mavenでmysql-connector-java追加 pom.xmlを編集し、<dependencies>タグの中に以下を追加 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.35</version> </dependency> 73
  74. 74. [demo5] MySQL設定 ■ データベース、テーブル、ユーザ作成 $ mysql -u root - データベース作成 mysql> CREATE DATABASE sample_game_server; mysql> USE sample_game_server; - テーブル作成 mysql> CREATE TABLE login_log (id INT AUTO_INCREMENT PRIMARY KEY, ¥ name VARCHAR(32) NOT NULL, created_at DATETIME NOT NULL); mysql> CREATE TABLE chat_log (id INT AUTO_INCREMENT PRIMARY KEY, ¥ name VARCHAR(32) NOT NULL, message VARCHAR(256) NOT NULL, ¥ created_at DATETIME NOT NULL); - ユーザ作成 mysql> GRANT ALL PRIVILEGES ON sample_game_server.* TO ¥ sampleuser@localhost IDENTIFIED BY 'samplepass'; mysql> GRANT ALL PRIVILEGES ON sample_game_server.* TO ¥ sampleuser@'%' IDENTIFIED BY 'samplepass'; 74
  75. 75. [demo5] jp/game/server/demo5/Dao.java public class Dao { ・・・ public static void addLoginLog(String name) { try ( Connection conn = DriverManager.getConnection(url, userName, userPass); ・・・DBへのコネクション接続 PreparedStatement stmt = conn.prepareStatement(INSERT_LOGIN_LOG); ) { stmt.setString(1, name); stmt.executeUpdate(); ・・・INSERT文実行 } catch (SQLException e) { e.printStackTrace(); } } ・・・ } 75
  76. 76. [demo5] jp/game/server/demo5/GameServerWebSocket.java ・・・ public void onMessage(String message, Session session) throws IOException { ・・・ switch (data[0]) { case "enter": name = data[1]; broadcast(name + "が入室しました。", session); Dao.addLoginLog(name); ・・・ログインログ作成 break; case "talk": String chatMessage = data[1]; broadcast(name + ":" + chatMessage, session); Dao.addChatLog(name, chatMessage); ・・・チャットログ作成 break; default: break; } } ・・・ 76
  77. 77. [demo5] 動作確認 ■ MySQLにログインし、直接テーブルの中身を確認する $ mysql -u root mysql> SELECT * FROM chat_log; +----+----------+-----------------------------+---------------------+ | id | name | message | created_at | +----+----------+-----------------------------+---------------------+ ・・・ +----+----------+-----------------------------+---------------------+ mysql> SELECT * FROM login_log; +----+----------+---------------------+ | id | name | created_at | +----+----------+---------------------+ ・・・ +----+----------+---------------------+ 77
  78. 78. [demo6] Redis クライアントクライアント Webサーバ DB KVS MySQL Tomcat Redis Webブラウザ Webブラウザ VMware Player HTTP GET/POST, WebSocket 78
  79. 79. [demo6] Redis • MavenでJedisインストール • JedisManager.java作成 • key:ユーザ名、value:発言メッセージ • 「keys *」コマンドでキーリスト確認、メッセージが 残っていることを確認 79
  80. 80. [demo6] Redis設定 ■ mavenでjedis追加 pom.xmlを編集し、<dependencies>タグの中に以下を追加 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> <version>2.7.0</version> </dependency> 80
  81. 81. [demo6] jp/game/server/demo6/JedisManager.java public class JedisManager { ・・・ private void initialize() { JedisPoolConfig poolConfig = new JedisPoolConfig(); poolConfig.setMaxIdle(10); poolConfig.setMinIdle(5); poolConfig.setMaxTotal(20); String host = "localhost"; int port = 6379; JedisPool pool = new JedisPool(poolConfig, host, port); ・・・Redisへのコネクション接続 } public void setData(String key, String value) { ・・・Redisにデータを格納 } public String getData(String key) { ・・・Redisからデータを取得 } } 81
  82. 82. [demo6] jp/game/server/demo6/GameServerWebSocket.java @OnMessage public void onMessage(String message, Session session) throws IOException { ・・・ switch (data[0]) { ・・・ case "talk": String chatMessage = data[1]; broadcast(name + ":" + chatMessage, session); Dao.addChatLog(name, chatMessage); JedisManager.getInstance().setData(name, chatMessage); ・・・Redisに、発言者と内容を保存 break; default: break; } } ・・・ 82
  83. 83. [demo6] 動作確認 ■ Redisに直接アクセスし、データを確認 $ redis-cli ・・・Redisクライアントでアクセス redis 127.0.0.1:6379> keys * ・・・保存されているキーを取得 1) "kuwabara" 2) "yoshida" redis 127.0.0.1:6379> get yoshida ・・・指定したキーの保存データを取得 "HELLO!" redis 127.0.0.1:6379> 83
  84. 84. サーバに配備 • VMware上のサーバにてTomcatを起動 • eclipseからwarをexport • Tomcat Managerからwarを配備 • 配備したServletで各種動作確認 84
  85. 85. サーバに配備 ■ CentOSにてTomcatを起動 # /usr/local/tomcat/bin/startup.sh ■ eclipseからwarをExport 85
  86. 86. サーバに配備 ■ Tomcatを起動 # /usr/local/tomcat/bin/startup.sh ■ Tomcat Managerからwarを配備 http://192.168.XX.XX:8080/manager ■ 動作確認 http://192.168.XX.XX:8080/sample-game-server/demo1/servlet 86
  87. 87. 終わりに • チャットメッセージの代わりに、ゲームのプレイデー タを送受信すればオンラインゲームが出来る • 対戦将棋の場合、動かす駒のIDと移動先座標 • MO RPGの場合、キャラIDと移動先、攻撃対象の敵 キャラIDとダメージ値など • 友人に公開したい場合は、クラウドサービスを使うと 良い(友人のIPアドレスを許可する等) 87
  88. 88. 上原 光晶 ご清聴、ありがとうございました 88
  89. 89. 参考資料 [1] http://qiita.com/futoase/items/ 0ca6b61cb88194c90367 [2] http://shitekisyuki.blogspot.jp/2014/07/ eclipsetomcat.html [3] http://qiita.com/opengl-8080/items/ 7ca8484c8579d264e239 89

×