BETA

S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較

投稿日:2020-01-01
最終更新:2020-01-01

S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

##イントロダクション
Amplify Consoleの楽さをより実感するために、あえてS3にもデプロイして静的サイトとしてホストします。
静的サイトといえど、Webアプリとして動作します。

コンテンツ

S3バケットの作成

AWSコンソール > S3 > バケットを作成するボタンを押下

適当なバケット名前を入力し、次へ進んでください。
オプションの設定は、デフォルトのまま進みます。
アクセス許可の設定は、「パブリックアクセスをすべてブロック」チェックをOFFにして進みます。

最後のページ確認でバケット作成ボタン押下により、S3バケットが作成されます。

Webアプリケーションのビルド&デプロイ

Webアプリケーションをビルドします。

$ npm run build  

ビルドエラーなく完了すると、distフォルダにデプロイするファイルが発行されています。
このdistフォルダの中身を作成したS3バケットにアップロードします。

$ aws s3 cp ./dist s3://**********/ --recursive --acl public-read --cache-control "max-age=604800"  

(※xxxxxxxxxxは作成したバケット名に置き換えてください。)

S3の作成したバケットに、distフォルダの中身がアップロードされていることを確認しておいてください。

S3バケットのバケットポリシー設定

作成したバケット > アクセス権限 > バケットポリシー と選択してゆき、
バケットポリシーエディターに以下を設定し、保存します。
(※xxxxxxxxxxは作成したバケット名に置き換えてください。)

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


保存すると、このように、「このバケットにはパブリックアクセス権限があります」というメッセージが表示されます。(バケットにファイルが1つも存在しない場合、この処理は失敗します。)

S3の Static website hostingを有効にする

作成したバケット > プロパティ > Static website hosting を選択し、以下を設定して保存します。
このバケットを使用してウェブサイトをホストする : チェックON
インデックスドキュメント : index.html

アクセスしてみる

Static website hostingの上部に記載されているエンドポイントにアクセスし、アップロードしたWebサイトが正しく表示され、Webアプリとして問題なく動作することを確認してください。

あとがき

いかがでしょうか。
S3の静的サイト作成に対して、Amplifyのアプリ作成、最初の作成の手間こそさほど違いませんが、デプロイの手間の差は結構大きいと感じます。

S3静的サイトホスティングの場合、まずはアプリをビルドし、ビルドが完了するのを待ち、S3にアップロードする、という一連の作業が必要となります。
Amplify Consoleの場合、リポジトリにコミットするだけです。
ビルドを待つ必要もないし、別途アップロードする手間もない。エラーがあれば中止してくれる。

デプロイは何度もする作業ですので、この差は大きいのです。

独自ドメインの設定をするのも、Amplify Consoleのほうが圧倒的に楽なのですが、それについては別記事にしたいと思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@w2or3w の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう