More than 3 years have passed since last update.

AWS S3にAngularのプロジェクトを配置して公開する(初心者向け)

Last updated at 2020-02-13Posted at 2020-02-13

1 / 18

S3×Angularということで、S3にAngularのプロジェクトを置いて、ホスティングする方法です。

セキュリティ周りに関しては説明していません。とにかく公開したい人向けです。

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:::【ここをバケット名に置換】/*"
       ]
     }
   ]
}