Alibaba Cloud OSSを使った静的Webサイトの公開方法

5722 ワード
StaticWeb AlibabaCloud OSS(AlibbaCloud) AlibabaCloud テキストリンク

Static Website の構築

他のクラウドと同様に、Alibaba Cloudにもオブジェクトストレージを使った静的ウェブサイトを公開する事ができます。わざわざサーバを用意する必要がないので便利ですよね。

OSS（Object Storage Service）の設定

それでは、実際に管理画面から静的ウェブページを作ってみようと思います。











index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Hello World.</h1>
  </body>
</html>
404.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8">
    <style>
      html{
        display: table;
        height: 100%;
        width: 100%;
        text-align: center;
      }
      body{
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h1>Error 404: Page not found</h1>
    <p>Sorry, but the page you were trying to view does not exist.</p>
  </body>
</html>

アクセスして確認する

以下のURLが作成されたのでアクセスすると無事に表示できました。
https://staticweb-sample.oss-ap-northeast-1.aliyuncs.com/

存在しないページにアクセスすると404.html が表示されます。
https://staticweb-sample.oss-ap-northeast-1.aliyuncs.com/aaa

まとめ

静的コンテンツを簡単に公開する事ができました。独自ドメインの設定などもできるようなので実運用でも問題なく使えるのではないでしょうか。