1
0

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 3 years have passed since last update.

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

Posted at

Static Website の構築

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

OSS(Object Storage Service)の設定

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

01.png
02.png
03.png
04.png
05.png
06.png
07.png
08.png
09.png
10.png
11.png

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/

12.png

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

13.png

まとめ

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

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?