APC 技術ブログ

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

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

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

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

OCI
＜ techblogAPCについて（はじめにお読み下さい） ＞

はじめに

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

説明すること

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

事前準備

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