AWS S3にAngularアプリをデプロイする手順

背景

Angularアプリを作成したので、Webで起動できるようにしてみたかった
Angularアプリ自体はすでに作成している前提として進めていきます

ざっくり手順

1. Angularアプリ資源を作成する

2. S3バケットを作成する

3. 資源をアップロードする

4. S3を静的ウェブホスティングするように設定する

Angularアプリ資源を作成する

1. Angularアプリを作成する

2. ターミナルでAngularプロジェクトのディレクトリに移動し、 ng build --prodコマンドでビルドを行う

プロジェクト配下に/distフォルダが生成され、アプリ資源一式が格納される

S3バケットを作成する

1. Amazon S3コンソールにアクセスする

2. バケットを作成する

   1. ダッシュボードで[バケットを作成する]を選択する
   2. リージョン内で一意なバケット名を付け、適当なリージョンを選択し次に進む
   3. バージョニングの設定を行えるが、すべて無効のまま次に進む
   4. S3のバケットのアクセス許可を設定できるが、デフォルトのまま次に進む
   5. [バケットの作成]を選択をするとバケットが作成される

資源をアップロードする

1. 作成したS3のバケット名を選択してバケットに移動する

2. ビルドして生成された「/dist」フォルダ以下の資源をバケットにドラック&ドロップしアップロードする

S3を静的ウェブホスティングするように設定する

1. S3の[アクセス権限]タブを選択する

2. [ブロックパブリックアクセス]を選択して、[編集]からパブリックアクセスをすべてブロックのチェックを外す
   

3. [バケットポリシー]を選択する

4. バケットポリシーエディターで下記のように設定する

    {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": " arn:aws:s3:::angular-test-backet/*"
           }
       ]
   }

各設定項目に関しては以下の通り

• version:使用するポリシー言語のバージョンを指定する。2012-10-17バージョンが最新らしい

• statement:このポリシーのメイン要素、以下の要素のコンテナになる

  • sid:複数のステートメントを区別するためのステートメントID
  • Effect:AllowまたはDenyを使用して付与、あるいは拒否するアクセス許可設定を指定する
  • Principal:アクセスを許可するアカウント、ロールを指定する
  • Action:ポリシーで許可あるいは拒否するアクションのリスト
  • Resource:アクションが適用されるリソースのリスト

今回はリソースをARN(Amazonリソースネーム)で指定している
S3バケット一覧画面にて、ARNを取得したいバケットにチェックを入れるとポップアップが表示され、バケットのARNを取得することができる
今回は取得したARNをResourceに貼り付け、末尾に「/* 」を付加して全リソースへのアクセス許可を付加している。　
5.　バケット内の[プロパティ]タブを選択し[Static website hosting]を選択する。
6. インデックスドキュメントに[index.html]を入力して保存する。
7. もう一度[Static website hosting]を選択し、画面上部に表示されているエンドポイントURLにアクセスするとS3に保存したWebアプリが表示される。