Oracle Cloud (OCI) オブジェクト・ストレージでの静的ウェブサイト(仮) の構築

# はじめに
OCI のオブジェクト・ストレージ・サービスは、残念ながら、**静的ウェブサイトのホスティングに対応していません。**※ 本記事の執筆時点 (2021/11/18) 
しかし、バケットの可視性、または、事前認証済みリクエスト機能などと組合わせることで、疑似的な「**なんちゃって静的ウェブサイト**」を作成することが可能です。

本記事では、その手順について記載していきます。

# 注意事項
あくまで "なんちゃって静的ウェブサイト" になるため、下記のような点にご注意ください。

1. ウェブサイトへアクセスするための URLは、ファイル名を含めたURLパスでアクセスする必要があります。
例) index.html ファイルへアクセスする場合
https://objectstorage.us-ashburn-1.oraclecloud.com/n/yournamespase/b/yourbucketname/o/index.html

2. 相対パス等による記載では オブジェクト間の階層構造を解決できないため、各ファイル上では、相対パスではなく、各オブジェクトのURLパスを指定する必要があります。
例) index.html ファイルから layout.css を参照する場合

```html:index.html
：
<!-- <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. コンソール画面の確認とバケットの作成]](https://oracle-japan.github.io/ocitutorials/beginners/object-storage/#1-%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AE%E7%A2%BA%E8%AA%8D%E3%81%A8%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90) を参考に、バケットを作成します。

本記事では、「**static-websites-bucket**」という名称で作成しています。
つづいて、「バケットの可視性」を変更します。コンソール画面からバケットを作成した場合、デフォルトの可視性はプライベートになっています。（OCI上で適切なアクセス権限を持つユーザーのみがアクセスできる状態）

これを **パブリック** に変更し、誰からもアクセス可能な状態にします。
まず、作成したバケットの「可視性の編集」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/62ba63fb-2b11-6e2c-0d5d-f94b1766fe5b.png)

次に、トグルボタンで「パブリック」を選択し、「変更の保存」をクリックすれば、設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/17a98bd2-cd9c-07c3-b15f-d4a0cd780df5.png)

※尚、限られたアクセスのみにしたい場合は、**事前認証済みリクエストの発行を検討してください**。事前認証済みリクエストの発行方法については、OCI チュートリアル「オブジェクト・ストレージを使う」の [[3. 事前認証済リクエストの作成]](https://oracle-japan.github.io/ocitutorials/beginners/object-storage/#3-%E4%BA%8B%E5%89%8D%E8%AA%8D%E8%A8%BC%E6%B8%88%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90) を参考にしてください。

# 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秒ごとに切替え表示する画面」を作成しています。(画像は「[いらすとや](https://www.irasutoya.com/)」さんの画像を利用しています。)

- 参考サイト：[JavaScriptとCSSで画像をふわっと切り替えるスライドショーを作る]
(https://blog.ver001.com/javascript-slideshow-transition/)

ここで大事なのは、**index.html の中で、cssファイル等の参照パスを「バケットに配置したオブジェクトのURLパス」を指定する点** です。
※参考イメージは下記の通りです。

```html:index.html
<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>
```

:::note warn
本記事ではバケットをパブリックにしているため「オブジェクトのURLパス」を直接指定していますが、「事前認証済みリクエスト」を発行する方法の場合は、一度各ファイルをバケットにアップロードし、事前認証済みリクエストを発行後、そのURLを指定するようにしてください。
:::

### 2-2. コンテンツのアップロード
コンテンツの準備ができたら、バケットにアップロードします。
アップロード手順は、OCI チュートリアル「オブジェクト・ストレージを使う」の [[2. オブジェクトのアップロード、ダウンロード]](https://oracle-japan.github.io/ocitutorials/beginners/object-storage/#2-%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89) を参考にしてください。

この際、**疑似的なフォルダ構成を実現するために、css/images/js などは、接頭辞を付与するようにしてください**。（例：「assets/css/」、「assets/images/」など）

アップロード完了後、以下のような構成になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/ba3e7192-c1cd-6428-1c33-14f4e6c1cb88.png)

# 3. HTMLファイルへのアクセス
コンテンツの準備が完了したので、いよいよ、アクセスしてみます。手順2-2でアップロードした index.html ファイルのトリコロン・メニューから、「オブジェクト詳細の表示」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/54b87957-68e9-3c6e-154d-f46404de1ce9.png)

オブジェクトの詳細画面より、URLパス(URI) のリンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/75fb7834-45f9-99af-66e9-0fc99a2f371f.png)

下記のように、html、css、javascript がそれぞれ機能していることが確認できます。
![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384668/aad9f3c3-a14b-61e8-1c8f-3111b3269fec.gif)


# おわりに
いかがでしたでしょうか。
今回のような利用方法だと、各ファイルの参照構造を踏まえてリンクを貼る必要があったり、URL がオブジェクトの URLパス(URI) そのままになってしまうなど、制約はあるものの、そういった部分を厭わないような簡易なシーンであれば、利用してみるのも良いかもしれません。