はじめに
AWSで静的ウェブサイトを公開する方法は色々ありますが、今回はS3でVueのアプリを公開します。
全体の流れ
- 公開するアプリを作成
- S3で公開するアプリのリソースを格納するバケットを作成
- バケットの設定(ホスティング機能、アクセス許可)
公開するアプリの準備
Vueのアプリを作成します。
npm init vite@latest s3-sample-app -- --template vue
cd s3-sample-app
npm install
公開できるようにビルドします。
npm run build
IAMユーザーの作成
S3で使用するユーザーを作成します。今回はS3のみ使用するので、「既存のポリシーを直接アタッチ」から、「AmazonS3FullAccess」を選択しました。
バケットの作成
アプリのリソースを格納するバケットを作成していきます。
「Amazon S3」のコンソール画面から「バケットを作成」を選択します。設定箇所は「一般的な設定」と「このバケットのブロックパブリックアクセス設定」です。
一般的な設定
「バケット名」は一意である必要があります。「AWSリージョン」は東京を選びます。
このバケットのブロックパブリックアクセス設定
アクセス制御を設定します。
リソースのアップデート
リソースをバケットにアップロードします。
作成したバケットのコンソール(Amazon S3 > バケット > バケット名)の「オブジェクト」タブから「アップデート」を選択します。設定箇所は「ファイルとフォルダ (x)」です
ファイルとフォルダ (x)
公開するビルドしたリソースを選択してください。
静的ウェブサイトホスティングを編集
バケットに対して静的ウェブサイトホスティングを有効にしていきます。
(Amazon S3 > バケット > バケット名)の「プロパティ」タブから「バケットポリシー」の「静的ウェブサイトホスティング」を選択します。
設定箇所は「静的ウェブサイトホスティング」と「インデックスドキュメント」です。
「静的ウェブサイトホスティング」を「有効にする」を選択、「インデックスドキュメント」を指定します。
バケットポリシーの設定
(Amazon S3 > バケット > バケット名)の「アクセス許可」タブから「バケットポリシー」の「編集」
を選択します。「バケットポリシーを編集」のパブリック読み取りアクセスを許可するポリシーをJSONで記述します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::バケット名/*"
]
}
]
}
公開されたサイトを確認する
(Amazon S3 > バケット > バケット名)の「プロパティ」タブから「静的ウェブサイトホスティング」のエンドポイントからサイトを確認できます。
あとがき
簡単すぎる！ただ、現状URLにバケット名、リージョン名が剥き出しです。CloudFront、Route53、ACMでSSL化(https通信)を実装できます。
ポートフォリオではコンテナにRailsとNginx、S3にVueを配置する予定です。VueをS3に配置することでタスク定義のタスクサイズ(CPU、メモリ)を抑えることができます。
参考