はじめに
AWSのS3バケットを利用して画像をアップロードし、それをHTMLファイル (index.html) で表示する方法について解説します。
S3は静的ウェブサイトホスティング機能を提供しており、簡単にウェブサイトを公開することができます。
書こうと思ったきっかけ
最近、クラウドストレージを活用したウェブサイトの構築方法について学ぶ機会がありました。
特に、AWS S3を使った静的サイトホスティングが手軽に実装できる点が魅力的だったため、その手順をまとめてみることにしました。
また、画像をアップロードし、直接HTMLに組み込む方法についても需要があると感じたため、今回の記事を書こうと思いました。
詳しくはこちらも参考にしてみてください。
1. S3バケットの作成
1.1 AWS S3コンソールにアクセス
- AWSコンソールにログインし、「S3」サービスを開きます。
- 「バケットを作成」ボタンをクリックします。
1.2 バケットの設定
-
バケット名: 一意の名前を指定（例:
my-image-bucket）。 - リージョン: 任意のリージョンを選択。
-
パブリックアクセスの設定:
- 「すべてのパブリックアクセスをブロック」のチェックを外し、公開設定を許可。
-
静的ウェブサイトホスティングの有効化:
- 「静的ウェブサイトホスティング」を有効化。
- 「インデックスドキュメント」に
index.htmlを指定。
2. 画像をS3にアップロード
2.1 画像ファイルのアップロード
- S3バケットを開き、「オブジェクト」タブを選択。
- 「アップロード」ボタンをクリックし、画像ファイル（例:
my-image.jpg）をアップロード。 - アップロード後、オブジェクトのURLをコピーしておく（例:
https://my-image-bucket.s3.amazonaws.com/my-image.jpg）。
2.2 画像のパブリックアクセス設定
- アップロードした画像を選択。
- 「アクセス許可」タブを開く。
- 「パブリックアクセスを許可」に変更し、保存。
S3バケットポリシーの編集
S3バケットのアクセス許可タブに移動し、バケットポリシーを編集します。以下のバケットポリシーを追加します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::dev-s3-content/*"
}
]
}
このポリシーは、dev-s3-content/* 以下のすべてのオブジェクトに対して、S3からの公開アクセスを許可します。
Resourceの箇所については、ご自身の環境に合わせて修正してください！
3. index.htmlの作成
以下の index.html を作成し、S3バケットにアップロードします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S3にアップロードした画像</title>
</head>
<body>
<h1>S3にアップロードした画像</h1>
<img src="https://my-image-bucket.s3.amazonaws.com/my-image.jpg" alt="アップロード画像" width="600">
</body>
</html>
ポイント:
-
src属性に S3の画像URL を指定。 -
alt属性を適切に設定。
4. index.htmlをS3にアップロード
4.1 アップロード手順
- S3バケットを開く。
- 「アップロード」ボタンをクリックし、
index.htmlをアップロード。 -
index.htmlのパブリックアクセスを許可。
4.2 ウェブサイトのURL確認
- 「プロパティ」タブの「静的ウェブサイトホスティング」セクションに記載されたURLを確認。
-
https://my-image-bucket.s3-website-ap-northeast-1.amazonaws.com/index.htmlなどのURLにアクセスして、画像が表示されるか確認。
5. カスタムドメインを設定（オプション）
CloudFrontやRoute 53を使用してカスタムドメインを設定できます。
5.1 CloudFrontの設定
- AWSコンソールでCloudFrontを開く。
- 新しいディストリビューションを作成。
- オリジンドメインにS3バケットのURLを指定。
- 「オブジェクトのパブリックアクセス」を有効化。
- CloudFrontのURL（例:
https://d123456789.cloudfront.net/index.html）を取得。
5.2 Route 53でのドメイン設定
- Route 53でドメインを取得。
- CNAMEレコードを作成し、CloudFrontのURLを指定。
まとめ
この方法を使うと、S3バケットに画像をアップロードし、index.html を使って簡単に表示できます。
また、CloudFrontやRoute 53を活用することで、カスタムドメインの設定やCDNの最適化も可能です。
これにより、手軽に静的ウェブサイトを公開し、画像を表示できる環境を構築できます。
おまけ
こんな感じのイメージになります！
