LoginSignup
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@kngsym2018

Oracle Cloud無償トライアルで簡単なブラウザゲームを作る(無駄にOCIリソースを使用)

Posted at

#本投稿の背景
年始にOracle Cloud無料トライアルを申請したのですが、DBを作るだけではつまらないと思い、
OCI(oracle cloud infrastructure)リソースを無駄に使いながら、簡単なブラウザゲームを作ってみました。

##作ったブラウザゲーム

■ブラウザゲーム概要
①シュートコースを選択
②[シュート]ボタンをクリック
　⇒ゴール or キーパーセーブの判定を行い画面に表示。
　　（勝敗数はDBに記録するので、通算勝敗数を表示）

本記事を見ることで、誰でもブラウザゲームが作成できるように手順を記載しています。
※プログラム(php)、OCI環境、各種パッチ、セキュリティ設定は、ブラウザゲームが最低限動く設定としてますのでご了承ください

##Oracle Cloud構成図
ロードバランサ、APサーバ２台、DBサーバの構成

##本投稿で使用するソフトウェア
Webサーバはapache、ブラウザゲームの処理はPHPで記載、DBはOracleを使用

■使用ソフトウェアのバージョン
・Oracle Linux 7.7
・Apache 2.4.6
・PHP 7.2.27
・Oracle Instance Client 12.2.0.1.0
・Oracle Database 19c 19.0.0.0.0

#本投稿の内容
本投稿は、ブラウザゲームの作成手順を記載しております。
また、作成したOCIリソースを削除する手順も記載しております。

ブラウザゲームを作成する手順
1.Oracle Cloud 無料トライアルの申し込み
2.コンパートメントの作成
3.仮想クラウド・ネットワークの作成
4.sshキーの作成
5.DBの作成
6.APサーバ１号機の作成
7.APサーバ２号機の作成
8.ロードバランサの作成
9.APサーバ１号機 ブラウザアプリの設定
10.APサーバ２号機 ブラウザアプリの設定
11.ブラウザゲームを実行
12.作成したOCIリソース削除

各手順で画面イメージを使用しているため、文章が長くなっております。
手順は折りたたんでおりますので、クリックして展開して参照ください。

#1.Oracle Cloud 無料トライアルの申し込み

こちらの記事を参考ください
https://qiita.com/hrkt/items/223b02461bed5cee9d19

#2.コンパートメントの作成

コンパートメント作成 手順詳細

トライアル環境では、ログインしているユーザーが1つのテナントに対して全ての管理権限を持っているため、新しいコンパートメント(pkgame)を作成します。
※仮想クラウド・ネットワーク、APサーバ、DB、ロードバランサは全て pkgame コンパートメントで作成します

[コンパートメントの作成]をクリック　

コンバートメントの情報を入力　

作成されたコンパートメント(pkgame)の確認

#3.仮想クラウド・ネットワークの作成(VCN)の作成

##3.1 仮想クラウド・ネットワークの作成

仮想クラウド・ネットワークの作成 手順詳細

仮想クラウド・ネットワークを作成して、ロードバランサ用、APサーバ用、DBサーバ用のサブネットを作成します。また、各サブネットにセキュリティリストを作成して通信できるIP、ポートを制限します。

コンパートメント(pkgame)を選択した後、[仮想クラウド・ネットワークの作成]をクリック
※作成したコンパートメントを選択するのですが、表示されるまで少し時間がかかりますので、表示されるまで待ちましょう。
※(時間がたっても作成したコンパートメントが表示されない場合、OCIコンソールのログオフ/ログインも試してください

インターネット・ゲートウェイを追加します。
インターネット・ゲートウェイは、VCNとインターネットとを接続するゲートウェイとなります。
PKGame_VCN作成された後、[インターネット・ゲートウェイ]をクリック

[インターネット・ゲートウェイの作成]をクリック

インターネット・ゲートウェイの名前・作成コンパートメントを選択して作成

インターネット・ゲートウェイが作成される

ルート表に先ほど作成したインターネット・ゲートウェイを追加する
※ルート表はVCN/サブネットがどの経路で外部にアクセスするかを定めるものとなります。インターネットに出るときはインターネットゲートウェイを設定します

仮想クラウド・ネットワーク(VCN)作成で自動で作成されるルート表をクリック

ルート・ルールの追加をクリック

ルート・ルールに作成したインターネット・ゲートウェイを追加する

インターネット・ゲートウェイ(IGW)が追加される

##3.2 セキュリティリストの作成

セキュリティリストの作成 手順詳細

セキュリティリストは、VCN/サブネットの仮想ファイアウォールに設定するルールになります。
ここでは、ロードバランサ用サブネット、APサーバ用サブネット、DBサーバ用サブネット毎にセキュリティリストを作成します。

PKGame_VCNをクリック

###3.2.1 ロードバランサ用サブネットに設定するセキュリティリストの作成
[セキュリティ・リストの作成]をクリック

###3.2.2 APサーバ用サブネットに設定するセキュリティリストの作成

イングレス・ルールは２つ作成します

エグレス・ルールを作成します

イングレース・ルールの確認

エグレース・ルールの確認して、セキュリティリスト作成に戻る

###3.2.3 DBサーバ用 セキュリティリストの作成

APサーバからの1521ポート通信を許可

##3.3 サブネットの作成

サブネットの作成 手順詳細

3.3.1 ロードバランサ用サブネットの作成

### 3.3.2 APサーバ用サブネットの作成 ### 3.3.3 DBサーバ用サブネットの作成

#4.sshキーの作成

sshキーの作成　手順詳細

sshキーの作成についても手順を記載します。

■参考リンク　https://docs.oracle.com/cd/E60665_01/tutorials_ja/JCS_SSH/create_sshkey.html
　https://docs.oracle.com/cd/E97706_01/Content/GSG/Tasks/creatingkeys.htm
##4.1 PuTTYのインストール
以下のURLにアクセス
https://www.putty.org/

##4.2 sshキーの作成 ##4.3 秘密キーの作成

パスフレーズなしで作成するので「はい」をクリック

任意の場所に.ppkファイルを保存

##4.4 公開鍵の作成

テキストに貼り付け、保存します。
必要に応じてキーに名前を付けることができますが、整合性を保つために、
秘密キーと同じ名前を使用し、pubというファイル拡張子を使用します。

#5.DBの作成

DBの作成　手順詳細
１時間弱でDB立ち上がります

#6.APサーバ１号機の作成

##6.1 APサーバ１号機の作成

APサーバ１号機の作成 手順詳細
teratermでログイン ログイン成功

##6.2 APサーバ１号機 OracleDB接続設定

APサーバ１号機のOracleDB接続設定 手順詳細

###6.2.1 Oracle Instance Client、SQLPlusをインストール
こちらのURLにアクセス
https://www.oracle.com/database/technologies/instant-client/linux-x86-64-downloads.html

２つのファイルをダウンロードします
oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm
oracle-instantclient12.2-sqlplus-12.2.0.1.0-1.x86_64.rpm
###6.2.2 Oracle Instance Client設定


ホームディレクトリにコピーされるので、cksumを実行してファイルが正しくされたかを確認

Oracle Instant Client、SQLPlusをインストール

$ sudo yum -y install oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm
$ sudo yum -y install oracle-instantclient12.2-sqlplus-12.2.0.1.0-1.x86_64.rpm

Oracle Instant Clientを共有ライブラリに追加

$ sudo sh -c "echo /usr/lib/oracle/12.2/client64/lib > /etc/ld.so.conf.d/oracle-instantclient.conf"
$ sudo ldconfig
$ sudo ln -s /usr/bin/sqlplus64 /usr/bin/sqlplus

###6.2.3 PHPをインストール

$  sudo su
# cd /etc/yum.repos.d/
# ls
  ⇒ol7-yum.repo　が存在しないことを確認
# wget -O ol7-yum.repo http://yum.oracle.com/public-yum-ol7.repo
# ls
　⇒ol7-yum.repo　が存在していることを確認
# exit

$ sudo yum -y install yum-utils
$ sudo yum-config-manager --enable ol7_developer_php72 
$ sudo yum -y install php php-oci8-12c 
$ php -v
PHP 7.2.27 (cli) (built: Jan 23 2020 19:13:52) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

■参考URL
https://blogs.oracle.com/linux/connect-php-72-to-oracle-database-12c-using-oracle-linux-yum-server

##6.2.4 DB接続
DB接続情報の確認



コピーした情報
pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_nrt174.dbsubnet.pkgamevcn.oraclevcn.com

sqlplus で繋いでみます

$ sqlplus /nolog
SQL> conn sys/設定したパスワード@pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_nrt174.dbsubnet.pkgamevcn.oraclevcn.com as sysdba

Connected.
SQL>
SQL> show con_name

CON_NAME
------------------------------
CDB$ROOT
※CDBに接続する文字列になっていますので、実際にユーザやテーブルするPDB接続する情報を確認します

SQL>
SQL> show pdbs

    CON_ID CON_NAME                       OPEN MODE  RESTRICTED
---------- ------------------------------ ---------- ----------
         2 PDB$SEED                       READ ONLY  NO
         3 DBPKGAME_PDB1                  READ WRITE NO

※PDB$SEED ではい CON_NAMEを控える
※ここでは、DBPKGAME_PDB1  が PDB名

SQL>
SQL>
SQL> exit

PDB接続文字列を編集
image.png

pdbに接続してみる

$ sqlplus /nolog

SQL> conn sys/設定したパスワード@pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_PDB1.dbsubnet.pkgamevcn.oraclevcn.com as sysdba
Connected.

SQL> show con_name

CON_NAME
------------------------------
DBPKGAME_PDB1
※ DBPKGAME_PDB1 に接続された

SCOTTユーザ、テーブルを作成

SQL> show con_name

CON_NAME
------------------------------
DBPKGAME_PDB1
※DBPKGAME_PDB1 になっている事を確認

SQL> CREATE USER scott IDENTIFIED BY TIger123#_  DEFAULT TABLESPACE users;
User created.

SQL>  grant dba to scott;
Grant succeeded.

SQL>exit

$ sqlplus /nolog
SQL> conn scott/TIger123#_@pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_PDB1.dbsubnet.pkgamevcn.oraclevcn.com
Connected.

SQL> create table TBL_TEST(id number);
SQL> insert into TBL_TEST values (100);
SQL> insert into TBL_TEST values (1000);
SQL> commit;

SQL> select * from TBL_TEST;
⇒100、1000の２件表示される

SQL> exit

phpからDB接続できるかを viで.phpファイルを作成して、サンプルコードを編集します

$ cd 
$ sudo vi test.php

サンプルコード（SCOTTのパスワード、PDBの接続文字列は環境に合わせます


<?php
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    $conn = oci_connect('scott', '<scottのパスワード>', '<PDBの接続文字列>');
    $stid = oci_parse($conn, 'SELECT id FROM TBL_TEST');
    oci_execute($stid);
    echo "\n";
    while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {
      foreach ($row as $item) {
        echo $item ."\n";
       }
    }
?>

サンプルphp 実行(100、1000と表示されればPHPでDB接続が正常にされたと判断)

$ php test.php
   100
  1000

■参考URL
OCI Database(DBaaS) の PDB に sqlplus で接続してみる。(Oracle Cloud Infrastructure)

##6.3 APサーバ１号機 HTTPサーバー設定

APサーバ１号機 HTTPサーバー設定 手順詳細

SELinuxが有効になっているので、httpdがSocket通信を許可

$ sudo setsebool -P httpd_can_network_connect on

.htmlでPHPが実行できるように、httpd.conf 設定

$ sudo vi /etc/httpd/conf/httpd.conf

以下の２文を追加します。
LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so
AddType application/x-httpd-php .html

httpd.conf の設定箇所の抜粋

# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so

LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so

※上の 1文「LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so」を追加


<IfModule mime_module>
    #
    # TypesConfig points to the file containing the list of mappings from
    # filename extension to MIME-type.
    #
    TypesConfig /etc/mime.types

  <省略>
    #
    # Filters allow you to process content before it is sent to the client.
    #
    # To parse .shtml files for server-side includes (SSI):
    # (You will also need to add "Includes" to the "Options" directive.)
    #
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml

    AddType application/x-httpd-php .html
    
    ※上の 1文「AddType application/x-httpd-php .html」を
　　　　<IfModule mime_module> </IfModule> の間に追加

    
</IfModule>

APサーバ１号機 Apache HTTPサーバー設定

$ sudo yum -y install httpd

$ sudo firewall-cmd --permanent --add-port=80/tcp

$ sudo firewall-cmd --reload

$ sudo systemctl start httpd

$ sudo systemctl enable httpd.service

index.htmlを作成

$ cd /var/www/html
$ sudo vi index.html
  ⇒ Server1です　と記載して保存

ブラウザで APサーバ 1号機のアドレスを入力して、Server1ですと表示されればOK

■参考URL
Apacheのhttpd.confにPHPを設定する方法

#7.APサーバ２号機の作成

##7.1 APサーバ２号機の作成

APサーバ２号機の作成 手順詳細
teratermでログイン ログイン成功

##7.2 APサーバ２号機 OracleDB接続設定

APサーバ２号機 OracleDB接続設定 手順詳細

###7.2.1 Oracle Instance Client設定

Oracle Instance Clientは、
「6.2.1 Oracle Instance Client、SQLPlusをインストール」でダウンロードしたメディアを使用します

ホームディレクトリにコピーされるので、cksumを実行してファイルが正しくされたかを確認

Oracle Instant Client、SQLPlusをインストール

$ sudo yum -y install oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm
$ sudo yum -y install oracle-instantclient12.2-sqlplus-12.2.0.1.0-1.x86_64.rpm

Oracle Instant Clientを共有ライブラリに追加

$ sudo sh -c "echo /usr/lib/oracle/12.2/client64/lib > /etc/ld.so.conf.d/oracle-instantclient.conf"
$ sudo ldconfig
$ sudo ln -s /usr/bin/sqlplus64 /usr/bin/sqlplus

###7.2.2 PHPをインストール

$  sudo su
# cd /etc/yum.repos.d/
# ls
  ⇒ol7-yum.repo　が存在しないことを確認
# wget -O ol7-yum.repo http://yum.oracle.com/public-yum-ol7.repo
# ls
　⇒ol7-yum.repo　が存在していることを確認
# exit

$ sudo yum -y install yum-utils
$ sudo yum-config-manager --enable ol7_developer_php72 
$ sudo yum -y install php php-oci8-12c 
$ php -v
PHP 7.2.27 (cli) (built: Jan 23 2020 19:13:52) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

###7.2.3 DB接続
6.2.4 DB接続 でSCOTTユーザ、PDBの接続文字列を作成してますので、sqlplusにつなぎます

$ sqlplus /nolog
SQL> conn scott/TIger123#_@pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_PDB1.dbsubnet.pkgamevcn.oraclevcn.com
Connected.
SQL> exit

phpからDB接続できるかを viで.phpファイルを作成して、サンプルコードを編集します

$ cd 
$ sudo vi test.php

サンプルコード（SCOTTのパスワード、PDBの接続文字列は環境に合わせます


<?php
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    $conn = oci_connect('scott', '<scottのパスワード>', '<PDBの接続文字列>');
    $stid = oci_parse($conn, 'SELECT id FROM TBL_TEST');
    oci_execute($stid);
    echo "\n";
    while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {
      foreach ($row as $item) {
        echo $item ."\n";
       }
    }
?>

サンプルphp 実行(100、1000と表示されればPHPでDB接続が正常にされたと判断)

$ php test.php
   100
  1000

##7.3 APサーバ２号機 HTTPサーバー設定

APサーバ２号機 HTTPサーバー設定 手順詳細

SELinuxが有効になっているので、httpdがSocket通信を許可

$ sudo setsebool -P httpd_can_network_connect on

.htmlでPHPが実行できるように、httpd.conf 設定

$ sudo vi /etc/httpd/conf/httpd.conf

以下の２文を追加します。
LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so
AddType application/x-httpd-php .html

httpd.conf の設定箇所の抜粋

# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so

LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so

※上の 1文「LoadModule php7_module /usr/lib64/httpd/modules/libphp7.so」を追加


<IfModule mime_module>
    #
    # TypesConfig points to the file containing the list of mappings from
    # filename extension to MIME-type.
    #
    TypesConfig /etc/mime.types

  <省略>
    #
    # Filters allow you to process content before it is sent to the client.
    #
    # To parse .shtml files for server-side includes (SSI):
    # (You will also need to add "Includes" to the "Options" directive.)
    #
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml

    AddType application/x-httpd-php .html

    ※上の 1文「AddType application/x-httpd-php .html」を
　　　　<IfModule mime_module> </IfModule> の間に追加


</IfModule>

APサーバ２号機 Apache HTTPサーバー設定

$ sudo yum -y install httpd

$ sudo firewall-cmd --permanent --add-port=80/tcp

$ sudo firewall-cmd --reload

$ sudo systemctl start httpd

$ sudo systemctl enable httpd.service

index.htmlを作成

$ cd /var/www/html
$ sudo vi index.html
  ⇒ Server２です　と記載して保存

ブラウザで APサーバ ２号機のアドレスを入力して、Server２ですと表示されればOK

#8.ロードバランサの作成

ロードバランサの作成 手順詳細

ブラウザを開き、IPアドレスを入力して ENTER キーを押します。
ブラウザのウィンドウにフォーカスした状態で、F5キーを何度か押します。
画面がリロードされ、「Server1です」 という表示と 「Server2です」 という表示が切り替わることを確認します。

うまく切り替わるようであれば、無事にロードバランサーの構成が正しく動作しています。

■参考URL
ロードバランサーでWebサーバーを負荷分散する - Oracle Cloud Infrastructureアドバンスド

#9.APサーバ１号機 ブラウザアプリの設定

APサーバ１号機 ブラウザアプリの設定 手順詳細

##9.1 勝敗記録テーブルの作成
SCOTTユーザに勝敗記録テーブル(tblresult)を作成します。

$ sqlplus /nolog
SQL>  conn scott/TIger123#_@pkgame.dbsubnet.pkgamevcn.oraclevcn.com:1521/DBPKGAME_PDB1.dbsubnet.pkgamevcn.oraclevcn.com
Connected.
SQL>
SQL> create table tblresult(win number,lose number) tablespace users;

SQL> insert into tblresult values(0,0);
1 row created.

SQL>  commit;
Commit complete.

SQL>   select * from tblresult;

       WIN       LOSE
---------- ----------
         0          0

SQL> exit

##9.2 APサーバ１号機 画像のダウンロード・AP１号機にアップロード
いらすとや から画像をダウンロードします

https://www.irasutoya.com/2013/09/blog-post_7989.html
https://www.irasutoya.com/2013/10/blog-post_9489.html
https://www.irasutoya.com/2013/09/blog-post_331.html

画像の上で[右クリック] - [名前を付けて画像を保存]でファイルを保存します。

ダウンロードした画像をホームディレクトリにコピー

$ cd
$ ls
  ⇒soccer_catch.png、soccer_goalee_man.png、soccer_score_man.png　が存在する事を確認
$ sudo mv *.png /var/www/html/
$ cd /var/www/html

$ ls -Z *.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_catch.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_goalee_man.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_score_man.png

⇒SELinux が有効の場合、user_home_t  ⇒ httpd_sys_content_t に変更しないと、画像が表示されない 
　⇒restrcon コマンドで変更

$ sudo restorecon *.png
$ ls -Z *.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_catch.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_goalee_man.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_score_man.png

##9.3 APサーバ１号機 ブラウザアプリ(.html)の設定
.htmlは2つ設定します。(pkgame1.html、pkgame2.html)
vi でファイルを開き、スクリプトをコピー＆アドレス変更して、保存ください

$ cd /var/www/html
$ sudo vi pkgame1.html
$ sudo vi pkgame2.html

pkgame1.html の内容

xxx.xxx.xxx.xxx の部分をAPサーバ１号機のIPアドレス(グローバル) に更新

pkgame1.html

<html>
<head>
<meta charset="utf-8">
<title>PK戦</title>
</head>
<body>
試合会場は APサーバ１号機

<!-- action= のIPアドレスはAPサーバ1号機のアドレスに変更 -->
<form method="POST" action="http://xxx.xxx.xxx.xxx/pkgame2.html">

<!-- src= のIPアドレスはAPサーバ1号機のアドレスに変更 -->
<img src="http://xxx.xxx.xxx.xxx/soccer_goalee_man.png" width="400" height="300"/>
<br>
<label>シュートコースを選択してください：</label>


<br>
    <label><input type="radio" name="dirc" value="1" checked="checked">真ん中</label><br>
    <label><input type="radio" name="dirc" value="2">左</label><br>
    <label><input type="radio" name="dirc" value="3">右</label><br>


<input type="submit" value="シュート" />
</form>
</body>
</html>

pkgame2.html の内容

xxx.xxx.xxx.xxx の部分をAPサーバ１号機のIPアドレス(グローバル) に更新
ooo.ooo.ooo.ooo の部分をロードバランサのIPアドレスに更新
△△△△△　の部分をSCOTT ユーザのパスワードに更新
□□□□□ の部分を pdbの接続文字列に更新

pkgame2.html

<html>
<head>
<meta charset="utf-8">
<title>PK戦</title>
</head>
<body>
<?php

    $dirc = $_POST["dirc"];

    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    
    # DB接続ユーザ、パスワード、DB接続(PDB)文字列を記載
    $conn = oci_connect('scott', '△△△△△', '□□□□□');

    # 1~3 の乱数を生成
    $stmt = oci_parse($conn, 'select trunc(dbms_random.value(1,4))  KEEPER  from dual');
    oci_execute($stmt);    
    
    while (oci_fetch($stmt)) {
        $keeper = oci_result($stmt, 'KEEPER') ;
    }    

    # 取得した乱数と、ブラウザで選択したコース(1:真ん中、2:左、3:右)が同じの場合、キーパーセーブ
    if(intval($dirc)==strval(intval($keeper))){
      
       echo '<h1>キーパーセーブ!!!</h1>';
       # src= のIPアドレスはAPサーバ1号機のアドレスに変更
       echo '<img src="http://xxx.xxx.xxx.xxx/soccer_catch.png"  width="300" height="300"/>';

       # 負けに＋１カウント
       $sql ="update tblresult set lose = lose + 1";
    }else{
       echo '<h1>ゴール!!!</h1>';
       # src= のIPアドレスはAPサーバ1号機のアドレスに変更
       echo '<img src="http://xxx.xxx.xxx.xxx/soccer_score_man.png"  width="300" height="300"/>';
       # 勝ちに＋１カウント
       $sql ="update tblresult set win = win + 1";
    }    
    
    echo '<BR><BR>';

    $stmt = oci_parse($conn, $sql);
    oci_execute($stmt);    
 
    # 勝敗表(tblresult)を検索して、画面に表示
    $sql = 'SELECT WIN, LOSE FROM tblresult';
    $stid = oci_parse($conn, $sql);
    oci_execute($stid);
 
    while (oci_fetch($stid)) {
        echo '<h1>通算成績は、';
        echo oci_result($stid, 'WIN') . '勝 、 ';
        echo oci_result($stid, 'LOSE') . '敗</h1>';
    }    
   
       
?>

<!-- href= のIPアドレスはロードバランサーのアドレスに変更 -->
<a href="http://ooo.ooo.ooo.ooo/pkgame1.html"> 戻る </a>


</body>
</html>

動作確認は、
ブラウザを開き、[AP１号機のグローバルIPアドレス/pkgame1.html] を入力して ENTER キーを押します。
以下の画面が表示され[シュート]ボタンをクリックして、結果がでればOKです。

※結果ページ(pkgame2.html)の[戻る]リンクはロードバランサのURLになっており、
APサーバ２号機の.html設定がされていないため、場合によっては、[Not Found]になりますが、「10.APサーバ２号機 ブラウザアプリの設定」をすれば[Not Found]は解消されます。

※画面左上に「試合会場は APサーバ１号機」　となっている事を確認します

#10.APサーバ２号機 ブラウザアプリの設定

APサーバ２号機ブラウザアプリの設定 手順詳細

##10.1 APサーバ２号機 画像のアップロード
9.2 でダウンロードした画像を、APサーバ２号機のホームディレクトリにコピー

$ cd
$ ls
  ⇒soccer_catch.png、soccer_goalee_man.png、soccer_score_man.png　が存在する事を確認
$ sudo mv *.png /var/www/html/
$ cd /var/www/html

$ ls -Z *.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_catch.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_goalee_man.png
-rw-r--r--. opc  opc  unconfined_u:object_r:user_home_t:s0 soccer_score_man.png

⇒SELinux が有効の場合、user_home_t  ⇒ httpd_sys_content_t に変更しないと、画像が表示されない 
　⇒restrcon コマンドで変更

$ sudo restorecon *.png
$ ls -Z *.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_catch.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_goalee_man.png
-rw-r--r--. opc  opc  unconfined_u:object_r:httpd_sys_content_t:s0 soccer_score_man.png

##10.2 APサーバ２号機 ブラウザアプリ(.html)の設定
.htmlは2つ設定します。(pkgame1.html、pkgame2.html)
vi でファイルを開き、スクリプトをコピー＆アドレス変更して、保存ください

$ cd /var/www/html
$ sudo vi pkgame1.html
$ sudo vi pkgame2.html

pkgame1.html の内容

xxx.xxx.xxx.xxx の部分をAPサーバ２号機のIPアドレス(グローバル) に更新

pkgame1.html

<html>
<head>
<meta charset="utf-8">
<title>PK戦</title>
</head>
<body>
試合会場は APサーバ２号機

<!-- action= のIPアドレスはAPサーバ２号機のアドレスに変更 -->
<form method="POST" action="http://xxx.xxx.xxx.xxx/pkgame2.html">

<!-- src= のIPアドレスはAPサーバ２号機のアドレスに変更 -->
<img src="http://xxx.xxx.xxx.xxx/soccer_goalee_man.png" width="400" height="300"/>
<br>
<label>シュートコースを選択してください：</label>


<br>
    <label><input type="radio" name="dirc" value="1" checked="checked">真ん中</label><br>
    <label><input type="radio" name="dirc" value="2">左</label><br>
    <label><input type="radio" name="dirc" value="3">右</label><br>


<input type="submit" value="シュート" />
</form>
</body>
</html>

pkgame2.html の内容

xxx.xxx.xxx.xxx の部分をAPサーバ２号機のIPアドレス(グローバル) に更新
ooo.ooo.ooo.ooo の部分をロードバランサのIPアドレスに更新
△△△△△　の部分をSCOTT ユーザのパスワードに更新
□□□□□ の部分を pdbの接続文字列に更新

pkgame2.html

<html>
<head>
<meta charset="utf-8">
<title>PK戦</title>
</head>
<body>
<?php

    $dirc = $_POST["dirc"];

    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    
    # DB接続ユーザ、パスワード、DB接続(PDB)文字列を記載
    $conn = oci_connect('scott', '△△△△△', '□□□□□');

    # 1~3 の乱数を生成
    $stmt = oci_parse($conn, 'select trunc(dbms_random.value(1,4))  KEEPER  from dual');
    oci_execute($stmt);    
    
    while (oci_fetch($stmt)) {
        $keeper = oci_result($stmt, 'KEEPER') ;
    }    

    # 取得した乱数と、ブラウザで選択したコース(1:真ん中、2:左、3:右)が同じの場合、キーパーセーブ
    if(intval($dirc)==strval(intval($keeper))){
      
       echo '<h1>キーパーセーブ!!!</h1>';
       # src= のIPアドレスはAPサーバ２号機のアドレスに変更
       echo '<img src="http://xxx.xxx.xxx.xxx/soccer_catch.png"  width="300" height="300"/>';

       # 負けに＋１カウント
       $sql ="update tblresult set lose = lose + 1";
    }else{
       echo '<h1>ゴール!!!</h1>';
       # src= のIPアドレスはAPサーバ２号機のアドレスに変更
       echo '<img src="http://xxx.xxx.xxx.xxx/soccer_score_man.png"  width="300" height="300"/>';
       # 勝ちに＋１カウント
       $sql ="update tblresult set win = win + 1";
    }    
    
    echo '<BR><BR>';

    $stmt = oci_parse($conn, $sql);
    oci_execute($stmt);    
 
    # 勝敗表(tblresult)を検索して、画面に表示
    $sql = 'SELECT WIN, LOSE FROM tblresult';
    $stid = oci_parse($conn, $sql);
    oci_execute($stid);
 
    while (oci_fetch($stid)) {
        echo '<h1>通算成績は、';
        echo oci_result($stid, 'WIN') . '勝 、 ';
        echo oci_result($stid, 'LOSE') . '敗</h1>';
    }    
   
       
?>

<!-- href= のIPアドレスはロードバランサーのアドレスに変更 -->
<a href="http://ooo.ooo.ooo.ooo/pkgame1.html"> 戻る </a>


</body>
</html>

動作確認は、
ブラウザを開き、[AP２号機のグローバルIPアドレス/pkgame1.html] を入力して ENTER キーを押します。
以下の画面が表示され[シュート]ボタンをクリックして、結果がでればOKです。

※画面左上に「試合会場は APサーバ２号機」　となっている事を確認します

#11.ブラウザゲームを実行
ブラウザを開き、[ロードバランサのIPアドレス/pkgame1.html] を入力して ENTER キーを押します。

APサーバ１号機とAPサーバ2号機に接続が振り分けされます。
※判断は画面左上の「試合会場は APサーバ１号機」、「試合会場は APサーバ２号機」

#12.作成したOCIリソース削除

作成したOCIリソース削除 手順詳細

##12.1 作成したロードバランサの削除



##12.2 作成したコンピュートの削除
APサーバ１号機、APサーバ２号機を削除






##12.3 作成したDBの削除




##12.4 作成した仮想クラウド・ネットワークの削除




##12.5 作成したコンパートメントの削除
pkgameコンパートメントを削除します



##12.6 コンパートメント内にあるリソースの確認
コンパートメントになにかリソースが残っている場合、コンパートメントが削除できません。
コンパートメントになにかリソースが残っているかを確認する方法は以下のとおりです。


https://console.ap-tokyo-1.oraclecloud.com/a/query
にアクセス

コンパートメントにあるすべてのリソースが表示されます。

#最後に
Oracle Cloud無償トライアルを使用して、コンピュート、DB(VMマシン)は最低限動くスペックで検証や本ブラウザゲーム環境を構築しました。
また、Oracle Cloudを使用しないときは、コンピュート、DBノードを停止することで、300米ドルの無償クレジット内で検証ができました。

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?