トップ > AWS S3 > 15分でS3を使ったダウンロードサイトを構築する

15分でS3を使ったダウンロードサイトを構築する

AWS S3
記事タイトルとURLをコピーする

こんにちは、2022年10月にサーバワークスに入社した大城と申します。現在AS部IE課で研修中で、沖縄からリモート勤務でAWSを勉強しています。本記事でS3を利用して簡単なダウンロードサイトを作ってみたいと思います。

はじめに

円安が騒がれる現在もS3は１ヶ月、1GBあたり3.5円（2022年10月時点）という価格でデータを保存することができます。99.9999999% (イレブンナイン) の耐久性であり、おそらく我々が生きている間はダウンしないと思われます。そんなS3ですがダウンロードサイトやファイルサーバとして利用するために様々なツール、サービス、ソリューションがあります。今回はawslabsが公開しております AWS JavaScript S3 Explorer を使ってダウンロードサイトを構築してみます。

awslabs について

AWSが公開している便利ツールが多々あるリポジトリです。一番スターが付いているリポジトリ「git-secrets」は一度は聞いたことがあるリポジトリではないでしょうか。

github.com

AWS JavaScript S3 Explorer

awslabsで公開されているツールで、S3バケットの内容をWebブラウザで簡単に閲覧することができます。S3バケット直下にindex.htmlを配置し、S3のポリシー設定と静的ウェブサイトホスティングの設定をするだけで利用できます。

github.com

ユースケース

今回構築する構成は認証機能はありません。そのため機密性の高くないデータを配置するのを想定しています。

  • S3の料金のみで利用したい
  • インストールメディアなど機密性の高くないデータを配置する
  • ブラウザで手軽にS3にアクセスしたい
  • 参照のみできれば良い
  • ソースIPを絞ってアクセスを制限させたい
  • 最低限の機能はほしい
    • パンくずリスト
    • ディレクトリ内のファイル名検索
    • 右クリックでファイルをダウンロードできる

構成

とてもシンプルでS3のみとなります

diagram
構成

構築手順の前提

構築手順では下記の内容が事前に実施されていることを前提としています

  • 作業端末にてaws cliのインストール、認証が終わっていること
  • 作業端末にgit clientがインストール済みであること

構築手順

（目標は15分）

S3バケットを作成します。「バケット名」と「AWSリージョン」を設定して、その他はデフォルトで作成します。

s3_buket_create
s3_buket_create

バケットポリシーを設定します。今回はソースIPを絞りたいので下記の通りとする。（ソースIPは絞ることをおすすめします。README.mdにも記載がありますが、制限を付けないとpublicにアクセスできてしまうことを認識してください。）

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PrivateListGet",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:List*",
        "s3:Get*"
      ],
      "Resource": [
        "arn:aws:s3:::作成したバケット",
        "arn:aws:s3:::作成したバケット/*"
      ],
      "Condition": {
          "IpAddress": {
              "aws:SourceIp": "ソースIPアドレス（CIDR）"
          }
      }
    }
  ]
}

（ここまで５分経過）

CORSの設定は今回不要だったためスキップします

静的ウェブサイトホスティングを設定します

static_website_hosting
static_website_hosting

リポジトリから必要な資材を取得しS3のトップディレクトリに配置します

git clone https://github.com/awslabs/aws-js-s3-explorer
cd aws-js-s3-explorer
aws s3 cp index.html s3://作成したバケット/

（ここまで１０分経過）

テストファイルをアップロードします。今回は下のファイル郡をアップロードしてみます

# ファイル
Installer
├── hoge_1.0.0.tgz
├── hoge_1.1.0.tgz
└── hoge_1.2.0.tgz

aws s3 sync Installer s3://作成したバケット/Installer

ブラウザでアクセスしてみます

  • https://作成したバケット.s3.ap-northeast-1.amazonaws.com/index.html

表示されました

AWS S3 Explorer
ブラウザ画面

（ここまで１５分、ギリギリセーフ）

最後に

古い著書ですが「UNIXという考え方」という本で「よいプログラマはよいコードを書く。偉大なプログラマはよいコードを借りてくる」とあります。私は偉大なプログラマではなく普段コードを書くことがあまりありませんが、先人の言う通りイチからいろいろ作るより、よいツールはお借りして使いましょう。

ここまで読んでいただき、ありがとうございました。（初めてブログを書いたので緊張しました。）

大城 慶明 (記事一覧)

マネージドサービス部

2022年10月サーバーワークスに入社、沖縄からリモート勤務。AWSを勉強中。