はじめに

こんにちは、株式会社エーピーコミュニケーションズクラウド事業部の鈴木歩です。
今日は Object Storage で静的 Web サイトホスティングをやってみたいと思います。

説明すること

Object Storage のバケットを作れて、ファイルをアップロードできること
Object Storage の HTML ファイルを一般公開できること
Object Storage のバケットを削除できること

事前準備

インターネットに繋がっているパソコン
任意の Web ブラウザ
OCI アカウント
- 発行方法はこちら【OCI】Oracle Cloud Infrastructure（OCI）アカウントのつくりかた - APC 技術ブログ
- 発行してからログインできるようになるまでには時間がかかることがあります。私の場合、16 時間かかりました。
テスト用 HTML ファイル
- サンプルファイルは最後に記述します

Step1：バケットを作成して公開設定する

OCI にログインして、Oracle Cloud コンソールを開きます。
開いたら左上の三本線マークを押してメニュー一覧を開きます。

メニュー一覧で「ストレージ」→「バケット」と開きます。

表示されたバケット一覧画面で「バケットの作成」ボタンを押します。

任意の「バケット名」を入力して「作成」ボタンを押します。
ちなみに、バケット名は　リージョン内で一意　のようです。

表示されたバケットの詳細画面で「可視性の編集」ボタンを押します。
ポップアップで表示されたメニューで「パブリック」を選び、「設定の変更」ボタンを押します。

Step2：ファイルをアップロードする

表示されたバケットの詳細画面でスクロールして「アップロード」ボタンを押します。
指定された場所にファイルをドラッグアンドドロップして「アップロード」ボタンを押します。
処理が終了すると、「閉じる」ボタンに変化するので押します。

次にフォルダを作成します。「他のアクション」メニューから「新規フォルダの作成」を押します。
フォルダの「名前」を入力して「作成」ボタンを押します。

作ったフォルダ内にファイルをアップロードしたい時は、アップロード画面で「オブジェクト名の接頭辞」に「ファイル名」と末尾に / をつけてからアップロードします。

Step3：URL を確認して Web ブラウザから表示する

表示されたバケットの詳細画面でオブジェクト直下にある index.html の 3 点リーダーを押して、「オブジェクトの詳細の表示」を押します。
赤枠で囲った部分の URL をコピーします。

コピーした URL を Web ブラウザに貼り付けます。するとアップロードした HTML ファイルが表示されます！
ちなみに、サンプルファイルでは「Go to Page*」を押すと JavaScript を使って子フォルダの HTML を表示します。
URL からも子フォルダの HTML に遷移してちゃんと表示されていることがわかります。

Step4：バケットの削除

表示されたバケットの詳細画面で「削除」ボタンを押します。
バケット名を押して「削除」ボタンを押します。

まとめ

AWS と比べた時に親切な画面周りと感じました。（VM の時と同じ感想）
- パラメータ入力画面がシンプルだったり
上記の強みと裏返しで、S3 と比べて機能が少なさそうと感じました。
- OAC が無い？（そもそも OCI で提供している CDN が無い？）
- アクセス権コントロールで細かいチューニングできなさそう
AWS はオブジェクトストレージを Web システムの１つのモジュールとして利用する面があるが、 OCI は内部向けの純粋なストレージという側面が強いのかもしれません。

Appendix：サンプルファイル

ディレクトリ構造は以下のようにします。

/
|-- index.html
|-- page1/
|   |-- index.html
|-- page2/
|   |-- index.html
|-- page3/
    |-- index.html

オブジェクト直下の HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Website with Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Welcome to the Main Page</h1>
    <p>Select a page to visit:</p>
    <button onclick="goToPage('page1')">Go to Page 1</button>
    <button onclick="goToPage('page2')">Go to Page 2</button>
    <button onclick="goToPage('page3')">Go to Page 3</button>
    <script>
        function goToPage(page) {
            window.location.href = page + '/index.html';
        }
    </script>
</body>
</html>

Page1 下の HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        .current-page {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="current-page">You are on Page 1</h1>
    <p>This is the first page.</p>
    <button onclick="goBack()">Go back to Main Page</button>
    <script>
        function goBack() {
            window.location.href = '../index.html';
        }
    </script>
</body>
</html>

Page2 下の HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        .current-page {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="current-page">You are on Page 2</h1>
    <p>This is the second page.</p>
    <button onclick="goBack()">Go back to Main Page</button>
    <script>
        function goBack() {
            window.location.href = '../index.html';
        }
    </script>
</body>
</html>

Page3 下の HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        .current-page {
            color: orange;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="current-page">You are on Page 3</h1>
    <p>This is the third page.</p>
    <button onclick="goBack()">Go back to Main Page</button>
    <script>
        function goBack() {
            window.location.href = '../index.html';
        }
    </script>
</body>
</html>

おわりに

私達クラウド事業部はクラウド技術を活用した SI/SES のご支援をしております。 www.ap-com.co.jp

また、一緒に働いていただける仲間も募集中です！ご興味持っていただけましたらぜひお声がけください。 www.ap-com.co.jp

APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

【OCI】OCIのObjectStorageで静的Webページ公開してみた