はじめに
OCIのObject Storageは、現時点ではAWS S3のような静的ウェブサイトホスティングの機能をネイティブにサポートしておりませんが
API Gatewayを組み合わせて設定することで静的コンテンツのウェブサイトをホストすることができます。
利用するサービス
- Object Storage
- API Gataway
前提条件
・ API Gataway を作成するパブリックサブネットが作成されていること
・ パブリックサブネットはセキュリティリストで443ポートへの接続が許可されていること
1. Object Storageの準備
1-1. テスト用ウェブサイトコードの用意
今回は以下のようなコードを使用して試してみます。
- index.html
- app.js
- styles.css
index.htmlはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>静的サイトホスティング - ログインテスト</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>静的サイトホスティング - ログイン検証</h1>
<p>以下のフォームにユーザー名とパスワードを入力してください。</p>
<form id="loginForm">
<label for="username">ユーザー名:</label>
<input type="text" id="username" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" required>
<br>
<button type="submit">ログイン</button>
</form>
<p id="message"></p>
<script src="app.js"></script>
</body>
</html>
app.jsはこちら
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username === "admin" && password === "password123") {
document.getElementById("message").textContent = "ログイン成功！";
document.getElementById("message").style.color = "green";
} else {
document.getElementById("message").textContent = "ログイン失敗: ユーザー名またはパスワードが違います。";
document.getElementById("message").style.color = "red";
}
});
styles.cssはこちら
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
text-align: center;
padding: 50px;
}
h1 {
color: #007bff;
}
form {
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: inline-block;
}
input {
margin: 5px;
padding: 8px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
1-2. Object Storage Bucketの作成
ハンバーガーメニーから「ストレージ」＞「オブジェクト・ストレージとアーカイブ・ストレージ」＞「バケット」を開きます。
バケットの作成を行います。
- バケット名：任意（例：staticsitehosting）
- デフォルト・ストレージ層：標準
- 暗号化：「Oracle管理キーを使用した暗号化」
- リソース・ロギング：無効
1-3. ファイルのアップロード
今回テストに使用する以下のファイルを、作成したバケットにアップロードします。
- index.html
- app.js
- styles.css
1-4. 事前認証済みリクエストの作成
作成したバケットを開き、左のリソース欄から「事前承認済リクエスト」を押します。
「事前承認済リクエストの作成」を押します。
- 名前：任意（例：標準バケット-xxxx）
- 事前認証済リクエスト・ターゲット：バケット
- アクセスタイプ：任意（例：オブジェクトの読取りを許可）
- オブジェクト・リストの有効化：チェックしない
- 有効期限：任意
事前承認済リクエストが作成されると、事前認証済リクエストのURLが表示されます。
後ほど、API Gatawayの設定時に使用するのでURLをメモしておきます。
※事前認証済リクエストのURLは再度表示されないので、忘れないように控えておいてください。
2. API Gatawayの作成と設定
2-1. API Gatewayの作成
ハンバーガーメニューから「開発者サービス」＞「API管理」＞「ゲートウェイ」を開きます。
2-2. ゲートウェイの作成
ゲートウェイの作成を行います。
- 名前：任意（例：
staticsitehosting） - タイプ：パブリック
- ネットワーク：パブリックサブネットが作成されているVCNを指定します。
- サブネット：443ポートの許可されているパブリックサブネットを作成します。
- 証明書：デフォルト
ゲートウェイが作成され、状態がアクティブになったことを確認します。
2-3. デプロイメントの作成
作成したゲートウェイを開き、デプロイメントの作成を行います。
① 基本情報
- 「最初から」
- 名前：
root - パス接頭辞：
/
APIリクエスト・ポリシーは特に設定せず次に進みます。
② 認証
「認証なし」を選択し、次に進みます。
③ ルート
デプロイメントのベース パスを拡張するルーティングの設定をします。
- パス：
/{req*} - メソッド：GET
- 「複数バックエンドの追加」
- セレクタ：パス
- セレクタパス名：
req
バックエンドの定義を押して設定項目を入力します。「定義」を押して入力を完了します。
- バックエンドの名前：
default - 一致タイプ：
いずれかの - 式：入力しない
- デフォルトに設定：チェックを入れる
- バックエンド・タイプ：HTTP
- URL：先程作成した事前認証済みURLの末尾に
index.htmlを付けて入力
(例) https://objectstorage.us-ashburn-1.oraclecloud.com/p/XXXX/n/tenancyname/b/bucketname/o/index.html
jsファイルについてルールを追加します。再度「バックエンドの追加」を押して設定項目を入力します。「定義」を押して入力を完了します。
- バックエンドの名前：
js - 一致タイプ：
ワイルドカード - 式：
*.js - デフォルトに設定：チェックを入れない
- バックエンド・タイプ：HTTP
- URL：先程作成した事前認証済みURLの末尾に
${request.path[req]}を付けて入力
(例) https://objectstorage.us-ashburn-1.oraclecloud.com/p/XXXX/n/tenancyname/b/bucketname/o/${request.path[req]}
cssファイルについても、上記jsと同様にルールを追加します。再度「バックエンドの追加」を押して設定項目を入力します。「定義」を押して入力を完了します。
- バックエンドの名前：
css - 一致タイプ：
ワイルドカード - 式：
*.css - デフォルトに設定：チェックを入れない
- バックエンド・タイプ：HTTP
- URL：先程作成した事前認証済みURLの末尾に
${request.path[req]}を付けて入力
(例) https://objectstorage.us-ashburn-1.oraclecloud.com/p/XXXX/n/tenancyname/b/bucketname/o/${request.path[req]}
「次」を押します。
④ 確認画面で、デプロイメントの設定内容を確認して「作成」を押します。
3. 接続確認
作成したデプロイメント「root」がアクティブになっていることを確認します。
エンドポイントURLを確認して、ブラウザで開いてみます。
★期待通り表示されました！
さらに、指定したユーザー名とパスワードを入力してすると、「ログイン成功！」と表示されます。
- ユーザー名：admin
- パスワード：password123
html、js、ccsそれぞれ機能していることが確認できます。
成功です！
参考
- 静的Webサイト・ホスティングのためのOCI Object StorageおよびOracle API Gatewayの設定 https://docs.oracle.com/ja/learn/oci-api-gateway-web-hosting/index.html#objectives