IBM Cloud Docs
静的 Web サイトの構築

静的 Web サイトの構築

このチュートリアルでは、バケットの作成、コンテンツのアップロード、新規 Web サイトの構成など、 IBM Cloud® Object Storageで 静的 Web サイトをホスト する方法を示します。

IBM Cloud Object Storage を使用して静的 Web サイトをホスティングすることで、パブリック・アクセスのための静的コンテンツが提供され、柔軟性、配信容易性、および高可用性がユーザーに提供されます。 このチュートリアルには、 cURLAWS CLI、および コンソールの使用方法が記載されています。 このチュートリアルのパスを選択するには、このトピックのタイトルの上にある手順を切り替えるためのリンクを使用します。

シナリオ

このチュートリアルのシナリオでは、関連するステップを強調するために、Web ホスティングをその要点に単純化します。 このチュートリアルではすべての構成オプションについて説明するわけではありませんが、このチュートリアルを正しく完了すると、Web でアクセス可能なコンテンツが作成されます。

始める前に

以下のようにして、開始する必要があるものがあることを確認します。

  • IBM Cloud プラットフォーム用のアカウント
  • IBM Cloud Object Storage のインスタンス
  • 固定形式のコンテンツ (テキスト (HTML を使用するのが最適です) やイメージ・ファイルなど)

使用する IBM Cloud Object Storage のインスタンスに対する適切なアクセス権限があること、またはこのチュートリアルで使用するバケットに対する適切な 権限 があることを確認します。

このチュートリアルで IBM Cloud CLI を使用するには、 Object Storage プラグインを構成 して、使用するサービス・インスタンスと、新規バケットを作成するデフォルトのリージョンを指定する必要があります。

パブリック・アクセス用に構成されたバケットの作成

静的 Web サイト用のバケットを作成するには、パブリック・アクセスが必要です。 パブリック・アクセスを構成するためのいくつかのオプションがあります。 具体的には、 ObjectReader IAM 役割 を使用すると、バケットの内容がリストされないようにする一方で、静的コンテンツをインターネットで表示することができます。 コンテンツのリストを表示できるようにするには、バケットに対する ContentReader IAM 役割 を使用します。

バケットの作成

CLI プラグインを構成した後、以下のコマンド例に示すように、バケットを作成するためのプレースホルダー・コンテンツを置き換えます。

ibmcloud cos bucket-create --bucket <bucketname>

コンソールにログインし、 IBM Cloud Object Storageのインスタンスを作成した後、バケットを作成することができます。 「バケットの作成 (Create bucket)」というラベルのボタンをクリックし、図 1 に示すオプションから選択します。 「バケットのカスタマイズ (Customize your bucket)」というカードを選択します。

バケットのカスタマイズ

Web サイト内の静的ファイルのコンテナーは、指定可能なバケットに置かれます。 作成する名前は固有でなければならず、個人情報または識別情報を含んでいてはなりません。また、2 つのピリオド、ドット、またはハイフンを連続して使用することはできません。また、名前の先頭と末尾は英数字 (ASCII 文字セット項目 3 から 63) でなければなりません。 例については、図 2 を参照してください。

静的 Web サイトの名前バケット

パブリック・アクセスの設定

このチュートリアルのすべてのシナリオで、 コンソールの UI を使用して、新しい Web サイトへの パブリック・アクセス を許可します。

静的 Web サイト・コンテンツをホストするバケットを作成する場合、バケット作成プロセスの一部としてパブリック・アクセスを有効にするオプションがあります。 バケットへのパブリック・アクセスを有効にするオプションについては、図 3 を参照してください。 示されている「索引文書」と「エラー文書」のオプションの説明については、 Web サイトのオプションの構成 のセクションを参照してください。 次のステップに示すように、コンテンツをバケットにアップロードする前に、このステップで基本構成を完了することができます。

パブリック・アクセスの有効化

バケットへのコンテンツのアップロード

ホストされた静的 Web サイト・ファイルの内容は、自然に情報とメディアに焦点を当てています。 静的 Web サイトのコンテンツを作成するための一般的なアプローチは、 StaticGenにリストされているオープン・ソース生成プログラムです。 このチュートリアルでは、以下の 2 つのファイルのみが必要です。

  • 通常は HTML で作成され、 index.html という名前の索引ページ。サイトへの訪問者のためにデフォルトでロードされます。
  • error.html という名前の HTML およびここにもあるエラー・ページ。通常、このエラー・ページは、訪問者が存在しないオブジェクトまたはパブリック・アクセス権限を持たないオブジェクトにアクセスしようとしたときにロードされます。

イメージ、PDF、ビデオなどの他のファイルもバケットにアップロードできます (ただし、このチュートリアルでは要件の最小セットのみに焦点を当てます)。

このチュートリアルの目的に合わせて、索引およびエラー処理用の HTML ページをローカル・ディレクトリーに配置します。 以下のサンプル・コマンドに示すように、プレースホルダーの内容を置き換えて、HTML ファイルをアップロードします。

ibmcloud cos object-put --bucket BUCKET_NAME --key KEY [--body FILE_PATH]

静的 Web サイトをホストするための基本構成が既に完了している場合があります。 バケットに名前を付けて構成すると、ファイルをコンソールに直接アップロードできます。 図 4 に示すように、このステップはオプションであり、新しいホストされた Web サイトのテストの前の任意の時点で実行できます。

ファイルのアップロード

チュートリアルの残りの部分では、索引ページのオブジェクト・キーは index.html であり、エラー文書のキーは error.html であると想定しますが、接尾部またはキーには任意の適切なファイル名を使用できます。

Web サイトのオプションを構成します

このチュートリアルで説明できるオプションよりも多くのオプションがあります。このチュートリアルの目的で設定する必要があるのは、静的 Web サイト機能の使用を開始するための構成のみです。

適切な構成情報を含む JSON ファイルを作成します。

{
  "ErrorDocument": {
    "Key": "error.html"
  },
  "IndexDocument": {
    "Suffix": "index.html"
  }
}

Web サイトを構成するためのコマンド例に示されているように、プレースホルダー・コンテンツを置き換えます。

ibmcloud cos bucket-website-put --bucket BUCKET_NAME --website-configuration file://<filename.json>

ホストされた静的 Web サイトの基本構成によって、コンテンツが表示されるタイミングと方法が決定されるため、バケットの作成中にこのステップを完了した可能性があります。 Web サイトへの訪問者がキーまたは Web ページの提供に失敗した場合は、代わりにデフォルト・ファイルが表示されます。 ユーザーにエラーが発生した場合、エラー・ページのキーによって、訪問者が受け取るコンテンツが決まります。 デフォルト・ページとエラー・ページの構成オプションが、参照用に繰り返されます。

オプションの構成

新しい Web サイトのテストと訪問

サンプル・コマンドを使用して HTTP ヘッダーを提供するようにバケットを構成したら、新規サイトをテストするために必要なことは、サイトの URL にアクセスすることだけです。 プレースホルダーを、このチュートリアルで前に行った独自の選択に置き換えた後で、示されているプロトコル (http) に注意してください。

http://<bucketname>.s3-web.<endpoint>/

新しいサイトのテストを成功させることで、さらに多くのオプションを検討し、コンテンツを追加することができます。

次のステップ

IBM Cloud Object Storage でホストされる静的 Web サイトの構成オプションについて詳しくは、 API 資料を参照してください。