S3のバケットを作る

用語

バケット…フォルダの一つ上の概念容量無制限のハードディスクみたいなもの。バケット名は世界中で一意である。

バケット作成手順1(バケット名を決める)

世界で一つだけのバケット名を決めてください。

バケット作成手順2(オプションの設定)

今回はそのまま「次へ」を押下してください。

バケット作成手順3(アクセス許可の設定)

ここでは、アップロードされるファイルに対するアクセスに誰をブロックするかを指定します。今回はひとまずすべてのチェックを外します。

バケット作成手順4(確認)

確認画面が表示されるので「バケットを作成」を押下するとバケットが作られます。

【Tips】AWS CLIを使うと

AWS CLIを使えば

aws s3 ls

で作ったバケットを確認できます。

作ったバケットにAngularの資材を配置する

ng build

コマンドをAngularのプロジェクト配下で実行すると/distディレクトリにコンパイルされたファイルが生成されます。

これを上記で作ったS3のバケットにアップロードします。方法は2つ。

【方法1】GUIで！

先ほど作成したバケットに下記の通りドラッグアンドドロップなどでdist/プロジェクト名フォルダ内
を全選択してアップロードします。

「アップロード」を押下します

【方法2】CUIで！

aws s3 sync dist/Angularのプロジェクト名 s3://作成したバケット名
> 例：aws s3 sync dist/Angular-With-S3 s3://angular-s3-trial

ホスティング(公開するため)の設定をする

設定1(ホスティングの設定)

バケットを選択するとサイドバーが出現するので「プロパティ」をクリック

「Static website hosting」からホスティングのための設定をします。

設定2(バケットポリシーの設定)

続いて、バケットポリシーを設定します。
アクセス権限タブ > バケットポリシーに下記の内容を貼り付けて保存します。

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::【ここをバケット名に置換】/*"
       ]
     }
   ]
}

保存を押すと全世界に公開されます。

http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com/を開いてみてください！

(CLIでアップロードした場合のみ)ContentTypeを指定

ここで一度、公開されたサイトを開いてみます。

真っ白な画面が表示されます。

コンソールを見てみると、いくつかのjsが、ただのテキストファイルtext/plainとして読み込まれています。
S3上でjsファイルにContentTypeを定義する必要があります。

コンソールでエラーが出ているファイルを選択します。

プロパティから

メタデータを選択し、

text/plainからtext/javascriptに書き換えます(チェックボックスを入れて編集できます)

同様にエラーが出ているJavaScriptファイルに対応していきます。

全て対応したら再度読み込んでみましょう

キャッシュが残っていると再発する場合があるので、キャッシュを削除して再読み込みしてみましょう。

【Tips】Chromeの場合、Ctrl + F5でキャッシュを削除して再読み込みしてくれます。