[Oracle Cloud] OCI Object Storageでホスティングした静的WebサイトをOCMのサイトに埋め込み表示する

# はじめに

この記事では、Oracle Cloud Infrastructure(OCI)のオブジェクト・ストレージでホスティングした静的Webサイトを、**Oracle Content Management(OCM)** のサイト機能で作成したWebサイト内に埋め込み表示する方法を紹介します。

:::note info
この記事は**2023年8月**時点の情報に基づき作成しました。最新の情報については、製品ドキュメントなどをご確認ください
:::
# どんな時に利用するのか？

**ランディングページ**や**プロモーションサイト**など、コンテンツ管理システム(CMS)で管理するコーポレート・サイトとは別に公開する**静的なWebページをホスティングする環境が必要な場合**に、オブジェクト。ストレージを利用できます

さらに、CMSで管理するコーポレート・サイトから静的Webサイトに対してリンクを貼るだけでなく、サイト訪問者に静的Webサイトをコーポレート・サイトの一部として使ってもらう場合に、OCMの機能(リモート・コンポーネント)を利用できます

主なユースケース・利用シーンとしては以下になります
+ **外部の制作会社**にプロモーションサイトの開発を依頼。成果物として納入されたコンテンツ一式(HTML,画像,CSS,JavaScriptなど)を静的Webサイトとしてオブジェクト・ストレージでホスティングする
+ OCMで管理するコーポレート・サイトの一部として、上記プロモーションサイトを提供する（静的Webサイトをコーポレート・サイト内に埋め込み表示する）


# 1. 静的WebサイトをOCIオブジェクト・ストレージでホスティングする

静的Webサイトをオブジェクト・ストレージでホスティングします。以下の記事を参考に作業を進めます

https://qiita.com/Skogkatter112/items/beb3b0a5cd203ed53628

https://medium.com/oracledevs/how-to-serve-website-static-files-from-the-oci-object-storage-bd79ca0805c7

1. 静的Webサイトをホスティングするオブジェクト・ストレージの**バケット**を作成します。ここでは**staticwebsite**というバケットを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ceffb6d8-a327-fbb6-0311-b91dfe5784aa.png)

1. 作成したバケット`staticwebsite`を開き、**可視性の編集**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/0ebfe6fa-41ef-9a80-45f5-d769a9f2b14d.png)

1. 可視性を**パブリック**に変更し、**変更の保存**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/0ad4ed8f-0bda-8d0a-3c05-d82c71ceef66.png)

1. バケットの可視性が**パブリック**に変更されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/956d574e-503c-3ddd-ef39-81aef9dc4a9a.png)

1. 静的Webサイトを構成するコンテンツ一式を`staticwebsite`バケットに登録します。ここでは以下のようなVue.jsのサンプルコードを含むHTMLファイル(test.html)と画像ファイル(SampleImage2.jpg)をそれぞれ登録します

    - **HTMLファイル(test.html)**
        ```HTML:test.html
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="utf-8">
          <title>Vueサンプル</title>
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <style>
            body {
                background-color: #D3D3D3;
                color: #000000;
            }
        </style>
        <body>
        <div id="app"><h1>{{ text }}</h1></div>
        <div>
            <img src="image/SampleImage2.jpg" alt="SampleImage2.jpg">
            <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    text: "これはVueで出力したテキストです",
                  }
            });
        </script>
        </body>
        </html>
        ```

    - **画像ファイル(image/SampleImage2.jpg)**
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/285a6268-2fb9-55d6-a63b-f9fc8c849734.png)

1. バケットに以下のように登録します。HTMLファイルはバケットにそのまま登録し、画像ファイルは**image**フォルダを作成し、その中に登録します
    ```
    [バケット]
        ├─test.html
        └─image
            └─SampleImage2.jpg
    ```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/aae118f1-149e-b4c1-3745-716ecb3ba154.png)

1. `test.html`の**オブジェクト詳細の表示**を開き、**URLパス**をコピーします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6635a63c-c1c5-9377-3065-9bd59e63ac3b.png)

1. 別ブラウザを開き、先ほどコピーした**URLパス**を開きます。問題なく表示されることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/35359319-46a3-c12b-1cdc-66b5339de7df.png)


# 2. OCMで作成したWebサイトに静的Webサイトを埋め込み表示する

OCMで作成したWebサイトに別のWebサイトを埋め込み表示の方法はいくつかあります。ここでは、**リモート・コンポーネント**を利用します。以下の記事を参考に作業を進めます

https://qiita.com/nakasato310/items/b3b45402eb6371c844a7

## 2.1 リモート・コンポーネントの作成

1. OCMのWebブラウザUIにサインインし、**開発者→「コンポーネント」のすべてのコンポーネントの表示**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e32a35fb-ead0-fe87-9993-c0b3b543d34c.png)

1. 右上の**作成→リモート・コンポーネントの作成**を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/71527eb9-81ed-53d1-848b-2bb33c25aced.png)

    1. `コンポーネントの名前の指定`に、このリモートコンポーネントの名前を入力します。ここでは**StaticWebSite**入力します
    1. `コンポーネントURL`に、**先ほどバケットに登録した静的WebサイトのHTMLファイルのURLパス**をそのまま入力します
    1. 設定URLは利用しません。任意のURLを登録します。その他の項目はデフォルト値のままとします。最後に**登録**をクリックします
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/83110c95-c307-c91b-9cab-aefce1e5de83.png)

1. リモート・コンポーネント`StatitWebSite`が作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/1b04ce4b-4aa6-907a-b265-02a3396f7aec.png)


## 2.2 リモート・コンポーネントをサイト上に配置する

1.リモート・コンポーネントを配置するWebサイトをサイト編集画面（サイト・ビルダー）で開きます。今回は**firstSite**を利用します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b43e44dc-0b19-79cd-fef8-b9e11ff2ec15.png)

1. 編集モードに切り替え、左メニューの**コンポーネント→カスタム**を開きます。先ほど作成したリモート・コンポーネント(StaticWebSite)をドラッグ＆ドロップでページ内に配置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/10abb71e-ec09-eb9b-1c08-984c0d8b61f4.png)

1. バケットでホスティングした静的Webサイトが埋め込み表示されます。必要に応じて、StaticWebSiteの設定メニュよりコンポーネントの高さなどを調整します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/8d1becc6-99fd-e142-dc1a-1f4a95a01ac8.png)

1. サイト編集画面で**保存**し、続けて**コミット**を実行します

1. サイトを**公開**（オンライン状態のサイトの場合は**再公開**）します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/643a673d-a495-853d-166c-a4aef1e079fe.png)

1. サイトをオンライン状態に設定し、公開サイトにアクセスします。バケットに登録した静的Webサイトがサイト内で埋め込みされることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/fc9c668e-4e02-b930-c438-e66cf04fbc2e.png)

# おわりに

OCIのオブジェクト・ストレージでホスティングした静的Webページを、OCMで作成したサイト内で埋め込み表示する方法について紹介しました。

静的Webページの構成ファイル一式を直接オブジェクト・ストレージに登録するため、これらは**OCMの管理対象外**となります。そのため

- バージョン管理、履歴管理
- 検索性や管理性(とくに静的Webサイトが増えてきた場合)
- カスタム・ドメイン対応
- URLパスのカスタマイズ
- セキュリティ
- CDN

など、いくつかの項目について考慮が必要となりますが、実現方式のアイデアとしてこの記事をご活用いただければ幸いです

# （参考）製品ドキュメント

- **OCI Object Storage**
    - [製品ドキュメント(英語)](https://docs.oracle.com/en-us/iaas/Content/Object/home.htm)
    - [製品ドキュメント(日本語翻訳版)](https://docs.oracle.com/ja-jp/iaas/Content/Object/home.htm)
- **Oracle Content Management**
    - [製品ドキュメント（英語）](https://docs.oracle.com/en/cloud/paas/content-cloud/books.html)
    - [製品ドキュメント（日本語翻訳版）](https://docs.oracle.com/cd/E83857_01/paas/content-cloud/books.html)

:::note warn
製品ドキュメントの英語原本と日本語翻訳版です。翻訳されるまでに時差がありますので、最新情報の確認は 英語版のドキュメントをご利用ください
:::