Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@nakasato310

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

Posted at

はじめに

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

この記事は2023年8月時点の情報に基づき作成しました。最新の情報については、製品ドキュメントなどをご確認ください

どんな時に利用するのか？

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

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

主なユースケース・利用シーンとしては以下になります

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

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

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

  1. 静的Webサイトをホスティングするオブジェクト・ストレージのバケットを作成します。ここではstaticwebsiteというバケットを作成します
    image.png

  2. 作成したバケットstaticwebsiteを開き、可視性の編集をクリックします
    image.png

  3. 可視性をパブリックに変更し、変更の保存をクリックします
    image.png

  4. バケットの可視性がパブリックに変更されます
    image.png

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

    • HTMLファイル(test.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

  6. バケットに以下のように登録します。HTMLファイルはバケットにそのまま登録し、画像ファイルはimageフォルダを作成し、その中に登録します

    [バケット]
    ├─test.html
    └─image
        └─SampleImage2.jpg

image.png

  1. test.htmlのオブジェクト詳細の表示を開き、URLパスをコピーします
    image.png

  2. 別ブラウザを開き、先ほどコピーしたURLパスを開きます。問題なく表示されることを確認します
    image.png

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

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

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

  1. OCMのWebブラウザUIにサインインし、開発者→「コンポーネント」のすべてのコンポーネントの表示をクリックします
    image.png

  2. 右上の作成→リモート・コンポーネントの作成を選択します
    image.png

    1. コンポーネントの名前の指定に、このリモートコンポーネントの名前を入力します。ここではStaticWebSite入力します
    2. コンポーネントURLに、先ほどバケットに登録した静的WebサイトのHTMLファイルのURLパスをそのまま入力します
    3. 設定URLは利用しません。任意のURLを登録します。その他の項目はデフォルト値のままとします。最後に登録をクリックします
      image.png

  3. リモート・コンポーネントStatitWebSiteが作成されます
    image.png

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

1.リモート・コンポーネントを配置するWebサイトをサイト編集画面（サイト・ビルダー）で開きます。今回はfirstSiteを利用します
image.png

  1. 編集モードに切り替え、左メニューのコンポーネント→カスタムを開きます。先ほど作成したリモート・コンポーネント(StaticWebSite)をドラッグ＆ドロップでページ内に配置します
    image.png

  2. バケットでホスティングした静的Webサイトが埋め込み表示されます。必要に応じて、StaticWebSiteの設定メニュよりコンポーネントの高さなどを調整します
    image.png

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

  4. サイトを公開（オンライン状態のサイトの場合は再公開）します
    image.png

  5. サイトをオンライン状態に設定し、公開サイトにアクセスします。バケットに登録した静的Webサイトがサイト内で埋め込みされることを確認します
    image.png

おわりに

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

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

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

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

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?