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

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

##作ったブラウザゲーム
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e4a9a9b1-20f0-9ae0-164f-f79fcd843176.gif" width=60%>

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


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

##Oracle Cloud構成図
ロードバランサ、APサーバ２台、DBサーバの構成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/0fa5703e-02bf-4cdd-af2b-e55a0718c6d4.png" width=70%>

##本投稿で使用するソフトウェア
Webサーバはapache、ブラウザゲームの処理はPHPで記載、DBはOracleを使用
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/b545708c-54d3-1323-cff7-9b47388ac089.png" width=70%>
■使用ソフトウェアのバージョン
・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.コンパートメントの作成
<details><summary>コンパートメント作成 手順詳細</summary><div>

トライアル環境では、ログインしているユーザーが1つのテナントに対して全ての管理権限を持っているため、新しいコンパートメント(pkgame)を作成します。
※仮想クラウド・ネットワーク、APサーバ、DB、ロードバランサは全て pkgame コンパートメントで作成します
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/89fffc90-d74e-0659-0c79-737030dd3142.png" width=50%>

[コンパートメントの作成]をクリック　
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/bc22589a-e62a-4f1b-eac5-af5ce4a87cce.png" width=90%>

コンバートメントの情報を入力　
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8703e1aa-269d-23a0-3ce1-d96b4cab0d69.png" width=60%>

作成されたコンパートメント(pkgame)の確認
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8bc96885-ca06-1220-71d3-550fd53dd667.png" width=90%>

</div></details>

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

##3.1 仮想クラウド・ネットワークの作成
<details><summary>仮想クラウド・ネットワークの作成 手順詳細</summary><div>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/f65b1f31-4a7d-ae4f-0bc9-e019e63502a6.png" width=70%>

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

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/cc96caaa-ca5b-a153-2c44-35738569fd64.png" width=50%>

コンパートメント(pkgame)を選択した後、[仮想クラウド・ネットワークの作成]をクリック
※作成したコンパートメントを選択するのですが、表示されるまで少し時間がかかりますので、表示されるまで待ちましょう。
※(時間がたっても作成したコンパートメントが表示されない場合、OCIコンソールのログオフ/ログインも試してください
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ee5a5df7-f96b-8524-a1a6-26fb1b3d4177.png" width=90%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/3bed98f4-8205-3e59-6377-4eec08b249b9.png" width=90%>

インターネット・ゲートウェイを追加します。
インターネット・ゲートウェイは、VCNとインターネットとを接続するゲートウェイとなります。
PKGame_VCN作成された後、[インターネット・ゲートウェイ]をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7bee0610-4768-b519-bf04-97eff011ef1d.png" width=90%>
[インターネット・ゲートウェイの作成]をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a54b538c-6c61-ee09-93b6-7037a439f1af.png" width=90%>

インターネット・ゲートウェイの名前・作成コンパートメントを選択して作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/d625be61-3946-a3ab-e211-025d723398b0.png" width=70%>

インターネット・ゲートウェイが作成される
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ff6973d6-a6cd-e6ba-ae63-eff6838a77c8.png" width=90%>

ルート表に先ほど作成したインターネット・ゲートウェイを追加する
※ルート表はVCN/サブネットがどの経路で外部にアクセスするかを定めるものとなります。インターネットに出るときはインターネットゲートウェイを設定します
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a3736b68-54d0-399d-a0a0-3813344cff81.png" width=90%>

仮想クラウド・ネットワーク(VCN)作成で自動で作成されるルート表をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7dea1131-0723-3b05-32b5-f328a61ffc26.png" width=90%>

ルート・ルールの追加をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/72842c05-25ef-23f2-99ca-881f26a8e72b.png" width=90%>

ルート・ルールに作成したインターネット・ゲートウェイを追加する
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ee1447e0-9207-31df-b337-f0bbdff39e66.png" width=70%>

インターネット・ゲートウェイ(IGW)が追加される
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/5d3ba63b-1519-9d5d-4a25-5cca2f73fe16.png" width=90%>

</div></details>

##3.2 セキュリティリストの作成
<details><summary>セキュリティリストの作成 手順詳細</summary><div>

セキュリティリストは、VCN/サブネットの仮想ファイアウォールに設定するルールになります。
ここでは、ロードバランサ用サブネット、APサーバ用サブネット、DBサーバ用サブネット毎にセキュリティリストを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/f2b19775-6346-871f-2294-691955cf034d.png" width=90%>


 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/cc96caaa-ca5b-a153-2c44-35738569fd64.png" width=50%>

PKGame_VCNをクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/896f6342-0fad-5234-b19b-53221e96b7eb.png" width=90%>

###3.2.1 ロードバランサ用サブネットに設定するセキュリティリストの作成
[セキュリティ・リストの作成]をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e4442fe2-bee3-3f60-430c-5fb47f928635.png" width=90%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ededdf2c-6ccb-acf8-3539-ad4c42f782b6.png" width=70%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/20543dea-3d6b-b516-7c86-49f3468c636c.png" width=70%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a1ce16db-0ff9-23a5-eb2b-128a315945b7.png" width=90%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/68d46b4d-14aa-116c-e36d-612412187a2a.png" width=90%>


###3.2.2 APサーバ用サブネットに設定するセキュリティリストの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/bef7ab15-c4ec-f30d-a63c-77ea88b8707e.png" width=90%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6fe3edf2-7aa0-207e-304c-2bf1008044b1.png" width=70%>

イングレス・ルールは２つ作成します
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8a559ff3-4c88-4c10-4f53-c60b601c053f.png" width=70%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/57fa26d1-9328-373c-d7de-23cd5343d8fb.png" width=70%>

エグレス・ルールを作成します
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/d08a3524-d843-e549-e22c-f4d5f8f87eb4.png" width=70%>


 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/08fd452b-2307-2cff-a727-703fe1ceaadc.png" width=90%>

イングレース・ルールの確認
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ae404756-4faf-2b5d-7f76-795dac1be760.png" width=90%>
エグレース・ルールの確認して、セキュリティリスト作成に戻る
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/fc971c47-6ef9-6ebc-d821-ec7aecb07649.png" width=90%>


###3.2.3 DBサーバ用 セキュリティリストの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/434fddbb-b371-8194-8722-67929dee7c98.png" width=90%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/4d1c7427-0685-7b92-8d96-f1f4792ea2f4.png" width=70%>

APサーバからの1521ポート通信を許可
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/08ab2099-03e1-dee5-0764-979c1232c69f.png" width=70%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/228186b7-e6dd-679d-5d6a-fda68c4188e1.png" width=90%>


 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6c9c8862-c828-6a40-ca0f-30c316fd4623.png" width=90%>

</div></details>

##3.3 サブネットの作成
<details><summary>サブネットの作成 手順詳細</summary><div>

### 3.3.1 ロードバランサ用サブネットの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/9ef60165-de16-10b0-9621-dbbacb76cb17.png" width=40%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7e1e851b-f615-2a0c-7f84-614af24657a7.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ea603b46-3873-964b-901e-60d6b2d452d4.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/67089c19-bef6-382c-0cdd-8814b99fc36d.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/acadbf66-9f2e-dee3-2827-17b10b48e746.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c80e5866-260f-62f2-ee03-15d04d431880.png" width=70%>
### 3.3.2 APサーバ用サブネットの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e44f0235-0a06-0b86-ccf0-095a86769530.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/25e5b214-b9e3-11fd-6ac1-3187a2dddecb.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a33d22cc-3846-9032-07dd-acc6cf59d479.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/f6b6c040-e459-c34e-cb1d-c517e297dc45.png" width=70%>
### 3.3.3 DBサーバ用サブネットの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/b612eb9f-be68-9a1d-8ce0-c00540c6417f.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/fdb9d9c0-071b-a300-f052-6372cbd5a66f.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/4eeaeda8-317f-84c9-d0bf-c9998a0d9ceb.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/b046d874-044f-f16d-5d7c-64ec25c8f84b.png" width=70%>
</div></details>

#4.sshキーの作成
<details><summary>sshキーの作成　手順詳細</summary><div>


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/ 

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/dc1b9e2f-568f-59a6-0702-80f7324ec67a.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/4e98dbc9-2616-ceee-e806-83be0b46290c.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/5f370615-f2f8-fd68-0f45-238a9443aab6.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/3affc065-700d-56d0-eb2e-3dfbebe3d7a6.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/1079fdff-99b3-2ab0-73a7-2a1cbe2b47ec.png" width=50%>
##4.2 sshキーの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/bc23e48b-59f6-5957-7d80-912e985f3327.png" width=30%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/aec62db6-ea6c-5a46-5188-b92c5fd51db5.png" width=50%>
##4.3 秘密キーの作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/75905baa-f08a-ec91-2880-69d583a792ef.png" width=50%>


パスフレーズなしで作成するので「はい」をクリック
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e80b3553-5459-81ec-7e76-6cdc186bdbe4.png" width=30%>
任意の場所に.ppkファイルを保存
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/abeb1599-b2a4-8133-a426-57014239c091.png" width=30%>

##4.4 公開鍵の作成
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/15cb2044-9fce-a6c9-1569-25406ec11121.png" width=50%>

テキストに貼り付け、保存します。
必要に応じてキーに名前を付けることができますが、整合性を保つために、
秘密キーと同じ名前を使用し、pubというファイル拡張子を使用します。
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7ae17f95-0246-1935-a1d7-a042f696c91c.png" width=50%>





</div></details>

#5.DBの作成

<details><summary>DBの作成　手順詳細</summary><div>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/85217c5b-6225-d687-e5b6-cf8d9d9fd958.png" width=50%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/5a8e4e63-cdae-321c-3cc8-99e45d7d1ec8.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/214f089b-cb70-069a-c293-914c9b7b1450.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/239c04c3-53ad-6bc8-6779-ac074fc64504.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6bbb6efb-c47a-db1d-651b-c6c5e906c054.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/942960e5-8028-a72b-50c8-5e177cec499a.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/82f2be98-758c-d842-0e93-0c1914ffba6c.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7139ca41-17d5-d2a5-89e5-8a40d197d1b1.png" width=70%>
１時間弱でDB立ち上がります
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/24613468-a8c4-4622-a078-bbfae4445024.png" width=70%>

</div></details>

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

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

<details><summary>APサーバ１号機の作成 手順詳細</summary><div>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ccb6ba56-4efe-9eb1-0b9a-7b8ef2166d5a.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/343382e8-3378-a9c0-7c81-164874bf5aab.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/cefe59d3-b64f-8c03-52e0-da5d79c24621.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/fcea5c6d-c77e-53a9-1def-8ea3269f5162.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c10d7a81-a1d1-ed7e-8087-77ee021fa944.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/52166fc1-2c7f-481b-f37a-7a9cabd1102c.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6332bed4-6d7c-56fa-adf7-816dadb08c0e.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/2876c930-b9fb-97be-8747-91545dc8bed6.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/2ca563eb-7c3e-36a0-f51e-da9fd805a535.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/083d0f36-42c1-2414-a178-84364a1031f0.png" width=70%>
teratermでログイン
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/0d5d7ceb-6322-7152-671e-db84b3436a7e.png" width=40%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/eecc6b39-92f3-5b98-1851-3271ef70b7ee.png" width=40%>


 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c010aa9d-a647-03c2-474e-35d3051b2ecf.png" width=40%>
ログイン成功
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8ed7f74f-9935-1419-fff8-eadacc42aabb.png" width=40%>


</div></details>

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

<details><summary>APサーバ１号機のOracleDB接続設定 手順詳細</summary><div>

###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設定
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/be3e8602-daea-2a60-6c16-88476e079495.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6af9067d-056e-20c1-f370-fa271b5dc38b.png" width=40%>
ホームディレクトリにコピーされるので、cksumを実行してファイルが正しくされたかを確認
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/113244fa-cb90-4a89-9413-c49f184a0fc0.png" width=50%>

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接続情報の確認
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/882e82d4-1520-86e7-df46-760bd5bd2573.png" width=40%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/2c656018-9aba-6704-2b70-6a4228e0f713.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a27469d2-4151-42a7-7fe2-afa2744339e4.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/cc63cad2-006e-78ef-2f55-f3d1d76baa61.png" width=50%>

コピーした情報
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/01d820a0-4d71-7555-3f0f-5e1198848000.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

<?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)](https://qiita.com/ora_gonsuke777/items/5029e8cb64fbd9fd62ce)


</div></details>

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

<details><summary>APサーバ１号機 HTTPサーバー設定 手順詳細</summary><div>

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
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7ac739b2-678a-4c5f-d9b1-670ccdfd6b3e.png" width=30%>


■参考URL
  [Apacheのhttpd.confにPHPを設定する方法](https://qiita.com/ponsuke0531/items/e27c3dafcc9741ef3e73)


</div></details>

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

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

<details><summary>APサーバ２号機の作成 手順詳細</summary><div>


 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ccb6ba56-4efe-9eb1-0b9a-7b8ef2166d5a.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/3465e909-b5c5-b478-58d7-5a2a2993737e.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8008afcc-d1fe-d2a3-36a9-1b0f90af0764.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6ffa8fe4-5ad2-87e8-d38d-d67b00fc8b9d.png" width=70%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c10d7a81-a1d1-ed7e-8087-77ee021fa944.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/52166fc1-2c7f-481b-f37a-7a9cabd1102c.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6332bed4-6d7c-56fa-adf7-816dadb08c0e.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/2876c930-b9fb-97be-8747-91545dc8bed6.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/2ca563eb-7c3e-36a0-f51e-da9fd805a535.png" width=70%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/9beddd60-1422-12c8-a83c-388ec6013321.png" width=70%>
teratermでログイン
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/0d5d7ceb-6322-7152-671e-db84b3436a7e.png" width=40%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/48a404dc-5fd9-9848-e647-bb65c7cf6f11.png" width=40%>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c010aa9d-a647-03c2-474e-35d3051b2ecf.png" width=40%>
ログイン成功
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/58dbb5ff-b228-4bbb-d725-5573a95aeb2d.png" width=40%>

</div></details>

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

<details><summary>APサーバ２号機 OracleDB接続設定 手順詳細</summary><div>

###7.2.1 Oracle Instance Client設定

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

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/be3e8602-daea-2a60-6c16-88476e079495.png" width=50%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6af9067d-056e-20c1-f370-fa271b5dc38b.png" width=40%>
ホームディレクトリにコピーされるので、cksumを実行してファイルが正しくされたかを確認
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/08a4e986-22eb-73a6-489d-1729a627ad4a.png" width=50%>



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

<?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
```
</div></details>

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

<details><summary>APサーバ２号機 HTTPサーバー設定 手順詳細</summary><div>

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
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/5fcaba6c-b4b9-b79a-be51-8dd40abfb296.png" width=30%>

</div></details>

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

<details><summary>ロードバランサの作成 手順詳細</summary><div>

 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/fc1b5a31-29ca-aab6-bdef-09ba3550b3df.png" width=40%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/b7289528-4682-4983-d9f7-1fa2c8783a41.png" width=90%>
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/bd41e3ae-bd84-1cb8-442c-cf3a4d932c35.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/b075a823-90b7-cc4b-139f-68a6c4d01da1.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/0c8e0b39-c5ef-5ea1-a4e9-f82c35323ae9.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ecdc33b9-1ee1-ff98-d1ed-51fdfb3e0a18.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/4ecdf5fb-0165-a28f-471f-d6fdc1e3c7c8.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e5be3ac3-b6ba-53d8-417f-0e601592f09a.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/1b7ae3ad-0a83-38e0-fc4e-33bd32cd974a.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/abbfca9b-e497-759e-04c3-5142370d454c.png" width=70%>

ブラウザを開き、IPアドレスを入力して ENTER キーを押します。
ブラウザのウィンドウにフォーカスした状態で、F5キーを何度か押します。
画面がリロードされ、「Server1です」 という表示と 「Server2です」 という表示が切り替わることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c2dee302-9760-9f2b-9a06-e0a12206cfad.png" width=40%>

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


■参考URL
  [ロードバランサーでWebサーバーを負荷分散する - Oracle Cloud Infrastructureアドバンスド](https://community.oracle.com/docs/DOC-1019312)


</div></details>

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

<details><summary>APサーバ１号機 ブラウザアプリの設定 手順詳細</summary><div>


##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

画像の上で[右クリック] - [名前を付けて画像を保存]でファイルを保存します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a28902a0-ed40-8a7d-770a-87e01fb091ab.png" width=60%>


ダウンロードした画像をホームディレクトリにコピー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a1f851ef-4505-73bc-2104-cb9c526736fc.png" width=60%>


```
$ 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アドレス(グローバル) に更新

```html: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の接続文字列に更新

```html: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]は解消されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/750df6d0-50dc-9b71-6380-aa6e557710e9.png" width=40%>
※画面左上に「試合会場は APサーバ１号機」　となっている事を確認します

</div></details>

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

<details><summary>APサーバ２号機ブラウザアプリの設定 手順詳細</summary><div>

##10.1 APサーバ２号機 画像のアップロード
9.2 でダウンロードした画像を、APサーバ２号機のホームディレクトリにコピー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/91923fe3-e801-c946-327e-79b6afae323d.png" width=60%>


```
$ 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アドレス(グローバル) に更新

```html: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の接続文字列に更新

```html: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です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/29a03876-9e9e-4fdc-3c0b-16fc2466a525.png" width=40%>

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

</div></details>

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

APサーバ１号機とAPサーバ2号機に接続が振り分けされます。
※判断は画面左上の「試合会場は APサーバ１号機」、「試合会場は APサーバ２号機」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/99e4d5cb-1c6a-7fcf-4a26-26d9347c468c.png" width=40%>


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

<details><summary>作成したOCIリソース削除 手順詳細</summary><div>


##12.1 作成したロードバランサの削除
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8011bccc-20ff-7343-d358-778417bdd79a.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/cc02e66c-3577-1ad8-db77-3e35d5ce787f.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/3f2a8ce2-5886-b7c3-102c-30b3e3601850.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7f5ad5a4-25f6-bd16-3727-ae9050912dc6.png" width=90%>

##12.2 作成したコンピュートの削除
APサーバ１号機、APサーバ２号機を削除
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6533261e-3253-74ee-9dca-d7b23207228e.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/6878cd83-8672-2a84-2209-25c23efb7009.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/0d9c47ee-4a31-fd25-cffc-26faa403b4a3.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/18827c7b-84a8-91c0-0e34-ec6aa574e512.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c51f7fb7-57b3-53ee-455f-c1cc294f9652.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8e814655-7212-7f19-9e48-c2dcb815182c.png" width=90%>
##12.3 作成したDBの削除
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a384ccf3-09e4-6c80-db22-b01a9429a28b.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/e4776b59-858d-dc1b-79dc-f83d229c9949.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/7383589c-7c22-ed27-8457-33b2efd184a5.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/271f0413-5b20-b134-97b5-e1fbd7688bfb.png" width=90%>
##12.4 作成した仮想クラウド・ネットワークの削除
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/78113aa4-2bce-efae-bf4c-080480817c00.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/f1cb2ec7-2463-bc53-afb9-c82d1485be0b.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/959521b4-d499-dc8d-4ab8-562d1fa7ba41.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a71c96cb-811a-b490-e057-5002a27aaa8b.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/657ff738-76d9-0747-04eb-2f7db8419f51.png" width=90%>

##12.5 作成したコンパートメントの削除
pkgameコンパートメントを削除します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/c5099e12-105c-81a9-c87f-92ed452eda0d.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/a6b76777-37cc-4805-9a93-48b20d3c3e9c.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/ef318702-35a4-0407-70b9-f101c159ec65.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/380cc7e8-fb9b-8b13-de2a-23e4789b3505.png" width=90%>

##12.6 コンパートメント内にあるリソースの確認 
コンパートメントになにかリソースが残っている場合、コンパートメントが削除できません。
コンパートメントになにかリソースが残っているかを確認する方法は以下のとおりです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/84aede6c-c4c3-4124-5aea-0659a6ad9abd.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/eac1ce26-686c-840b-b3d8-c176b23d2509.png" width=90%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/aa92389f-cb06-72fe-cc2f-9626201ffbf1.png" width=50%>


https://console.ap-tokyo-1.oraclecloud.com/a/query
にアクセス
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/287c671c-d5cd-66c1-c763-90645091e278.png" width=70%>

コンパートメントにあるすべてのリソースが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/8f2028b8-3a71-a1dd-47bf-988a00eda0ef.png" width=70%>

</div></details>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261475/3882f483-fc37-cc58-80bb-f67ff149821a.png" width=40%>