はじめに
OCI のオブジェクト・ストレージ・サービスは、残念ながら、静的ウェブサイトのホスティングに対応していません。※ 本記事の執筆時点 (2021/11/18)
しかし、バケットの可視性、または、事前認証済みリクエスト機能などと組合わせることで、疑似的な「なんちゃって静的ウェブサイト」を作成することが可能です。
本記事では、その手順について記載していきます。
注意事項
あくまで "なんちゃって静的ウェブサイト" になるため、下記のような点にご注意ください。
-
ウェブサイトへアクセスするための URLは、ファイル名を含めたURLパスでアクセスする必要があります。
例) index.html ファイルへアクセスする場合
https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespase/b/yourbucketname/o/index.html -
相対パス等による記載では オブジェクト間の階層構造を解決できないため、各ファイル上では、相対パスではなく、各オブジェクトのURLパスを指定する必要があります。
例) index.html ファイルから layout.css を参照する場合
：
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> は不可 -->
<!-- href パラメータには事前認証済みリクエストまたはパブリック・バケットの場合はオブジェクトのURLパスを設定 -->
<link rel="stylesheet" type="text/css" href="https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespase/b/yourbucketname/o/style.css" />
：
1. オブジェクト・ストレージの作成と設定
まず始めにオブジェクト・ストレージのバケットを作成します。
OCI チュートリアル「オブジェクト・ストレージを使う」の [1. コンソール画面の確認とバケットの作成] を参考に、バケットを作成します。
本記事では、「static-websites-bucket」という名称で作成しています。
つづいて、「バケットの可視性」を変更します。コンソール画面からバケットを作成した場合、デフォルトの可視性はプライベートになっています。（OCI上で適切なアクセス権限を持つユーザーのみがアクセスできる状態）
これを パブリック に変更し、誰からもアクセス可能な状態にします。
まず、作成したバケットの「可視性の編集」ボタンをクリックします。
次に、トグルボタンで「パブリック」を選択し、「変更の保存」をクリックすれば、設定は完了です。
※尚、限られたアクセスのみにしたい場合は、事前認証済みリクエストの発行を検討してください。事前認証済みリクエストの発行方法については、OCI チュートリアル「オブジェクト・ストレージを使う」の [3. 事前認証済リクエストの作成] を参考にしてください。
2. コンテンツの作成・配置
つづいてアップロード用のコンテンツを作成します。
今回、下記のような構成でコンテンツを配置していきます。
※ オブジェクト・ストレージにはフォルダの概念がありませんが、接頭辞を利用し、疑似的な階層構造を実現しています。
-
バケットの構成
バケット: static-websites-bucket
├ assets
│ ├ css
│ │ └ layout.css
│ ├ images
│ │ ├ image1.png
│ │ ├ image2.png
│ │ ├ image3.png
│ │ ├ image4.png
│ │ ├ image5.png
│ │ └ image6.png
│ └ js
│ └ transition.js
└ index.html
2-1. コンテンツの準備
今回のコンテンツは下記のWebサイトを参考に、「複数の画像ファイルを0.5秒ごとに切替え表示する画面」を作成しています。(画像は「いらすとや」さんの画像を利用しています。)
- 参考サイト：[JavaScriptとCSSで画像をふわっと切り替えるスライドショーを作る]
(https://blog.ver001.com/javascript-slideshow-transition/)
ここで大事なのは、index.html の中で、cssファイル等の参照パスを「バケットに配置したオブジェクトのURLパス」を指定する点 です。
※参考イメージは下記の通りです。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespace/b/static-websites-bucket/o/assets%2Fcss%2Fstyle.css" />
<title>Sample OS Web</title>
</head>
<body>
-- 中略 --
<div class="slide">
<img src="https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespace/b/static-websites-bucket/o/assets%2Fimages%2Fimage1.png" />
-- 中略 --
</div>
<script type="text/javascript" src="https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespace/b/static-websites-bucket/o/assets%2Fjs%2Ftransition.js"></script>
</html>
本記事ではバケットをパブリックにしているため「オブジェクトのURLパス」を直接指定していますが、「事前認証済みリクエスト」を発行する方法の場合は、一度各ファイルをバケットにアップロードし、事前認証済みリクエストを発行後、そのURLを指定するようにしてください。
2-2. コンテンツのアップロード
コンテンツの準備ができたら、バケットにアップロードします。
アップロード手順は、OCI チュートリアル「オブジェクト・ストレージを使う」の [2. オブジェクトのアップロード、ダウンロード] を参考にしてください。
この際、疑似的なフォルダ構成を実現するために、css/images/js などは、接頭辞を付与するようにしてください。（例：「assets/css/」、「assets/images/」など）
アップロード完了後、以下のような構成になります。
3. HTMLファイルへのアクセス
コンテンツの準備が完了したので、いよいよ、アクセスしてみます。手順2-2でアップロードした index.html ファイルのトリコロン・メニューから、「オブジェクト詳細の表示」をクリックします。
オブジェクトの詳細画面より、URLパス(URI) のリンクをクリックします。
下記のように、html、css、javascript がそれぞれ機能していることが確認できます。
おわりに
いかがでしたでしょうか。
今回のような利用方法だと、各ファイルの参照構造を踏まえてリンクを貼る必要があったり、URL がオブジェクトの URLパス(URI) そのままになってしまうなど、制約はあるものの、そういった部分を厭わないような簡易なシーンであれば、利用してみるのも良いかもしれません。