DevelopmentGoogleドメイン + Route53 + S3 + CloudFront + GitHub Actions + Astroで行う静的サイト構築〜公開までの流れ
その2:ファイルアップロードをAWS CLIでできるようにする
AWS CLI
configure
credential
IAM
Principal
profile
recursive
アクセスキー
パブリックキー
ポリシー
配信先であるS3バケットの用意をする で作成されたS3バケットへファイルをアップロードするには、
コンソール画面からドラッグ&ドロップでもアップできるのですが、
これだとFTPでアップしていることとあまり変わらないので、
AWS CLIを使用してファイルアップロードを行えるようにします。
というのも、GitHubからCI/CDでアップロードするためには、
AWS CLIを使用してアップする為です。
ここでは、作成されたS3バケットへのアップロードするために、
ルートアカウント(AWSアカウント)ではなく、IAMユーザー(権限が制限されたアカウント)を作成し、
IAMユーザーからアップロードするための手順を解説していきたいと思います。
AWS CLIとは
AWSの公式サイトには以下のように記載されています。
AWS Command Line Interface (AWS CLI) は、コマンドラインシェルでコマンドを使用して AWS サービスとやり取りするためのオープンソースツールです。
AWS CLI を使用すると、最小限の設定で、任意のターミナルプログラムのコマンドプロンプトから、ブラウザベースの AWS Management Console で提供される機能と同等の機能を実装するコマンドを実行できます。
黒い画面でコマンドを使用することで、コンソール画面を操作することと同じようなことを再現できるということになります。
自動化のためには必須のものになるのかなということなので、
ここで扱うコマンドはそれほど多くはないので、これを機に勉強してみるのも良いのではないでしょうか。
本題:AWS CLIを使用してS3バケットへアップロードする
IAMユーザーによるアップロードを実現するために、
一旦ルートアカウントでアップロード出来ることを確認し、
IAMユーザーでアップロード出来るようにしていきます。
流れは以下のようになります。
- ローカル環境にAWS CLIをインストールする
- AWSアカウントのパブリックキーとプライベートキーを取得しローカル環境に登録する
- S3バケットへアップロードしたいリポジトリを用意する
- リポジトリを実際にアップロードしてみる
- IAMユーザーの作成をする
- IAMユーザーのパブリックキーとプライベートキーを取得する
- 取得した鍵情報をローカル環境に登録する
- IAMユーザーのキーを使用してアップロードする
ローカル環境にAWS CLIをインストールする
とりあえずAWS CLIが使えないことには何もできないので、
PCにAWS CLIをインストールします。
ターミナルを開きコマンドを実行することで、AWS CLIがインストールできるようになります。
ここでの対象はMacユーザーを対象にしています。
それ以外の方は下記のURLより自身の環境に合ったインストール方法をご利用ください。
AWS CLI のインストールと更新の手順
PCのグローバルにインストールされるので、
ユーザーごとにインストールしたい場合は、
上記のリンク先の macOS > AWS CLI をインストールまたは更新する「Command line - Current user」タブに切り替えて、
インストールを行なってください。
# インストール
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
# インストール確認用コマンド
which aws
aws --version
実行コマンドの説明
- curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
- awscli.amazonaws.comから.pkgファイルをダウンロードして、"AWSCLIV2.pkg"という名前でカレントディレクトリにファイルを生成することを表しています。
- sudo installer -pkg AWSCLIV2.pkg -target /
- MacOSのインストーラーを使用して、.pkgファイルをルートディレクトリにインストールをすることを表しています。この時ルートディレクトリからシステム周りのディレクトリに対して働きかけるので、sudoコマンド出ないと実行できません。
- which aws
- どこにインストールされたかを確認するためのコマンドです。
- aws --version
- インストールされたAWS CLIのバージョンを確認するためのコマンです。
上記を行なってインストールができなかった場合は、
下記リンクより解決してください。
AWS CLI に関連するエラーのトラブルシューティング
AWSアカウントのパブリックキーとプライベートキーを取得しローカル環境に登録する
AWS CLIでAWSにアクセスする際の鍵情報ですが、
デフォルトで設定されているわけではないので、
鍵情報を生成する必要があります。
鍵の生成をしていきましょう。
step1
右肩にある自身のAWSアカウンの部分をクリックするとメニューが現れます。
メニューが表示されたら、「セキュリティ認証情報」をクリックして、
セキュリティ認証情報のページへ遷移しましょう。

step2
左記下記のページに遷移がされたら、
ページをアクセスキーエリアまでスクロールして、
「アクセスキーを作成」をクリックし生成画面に遷移してください。

step3
チェックボックスにチェックをつけ、
「アクセスキーを作成」ボタンをクリックしてください。
「ルートユーザーのキーは推奨されていません」と書かれていますが、
とりあえずテスト用なので、気にしないで進めましょう。

step4
アクセスキーが生成されました。
この時シークレットアクセスキーは必ず控えておきましょう。
もしくは、
.csvファイルをダウンロードしてください。
どちらも行わずに完了ボタンを押した際には、キー情報が書かれたCSVファイルのダウンロードを進められるので、
必ず.csvファイルをダウンロードしてください。
※ 鍵情報を手元に残さなかった場合、シークレットキーを再取得する方法がなく、一度アクセスキーを削除したのちに再生成して取得する形になるので気をつけてください。

step5
赤枠の箇所にアクセスキーが表示されれば、
コンソール画面での準備は完了です。

step6
aws configure をターミナル画面で実行すると、
4回入力を求められます。
アクセスキーID、シークレットアクセスキー、リージョン、出力形式の4つです。
キーに関しては先のSTEPで取得したものを入力し、
リージョン、出力形式は自身の環境に合ったものを選択してください。
aws configure
AWS Access Key ID [None]: [アクセスキーIDを入力してください]
AWS Secret Access Key [None]: [シークレットアクセスキーを入力してください]
Default region name [None]: ap-northeast-1
Default output format [None]: [json or xml]
キーが登録されたことを確認します。
awsのクレデンシャル情報を確認すると下記のように表示されます。
さきほど登録した情報は [default] として登録されます。
cat ~/.aws/credentials
[default]
aws_access_key_id = XXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
S3バケットへアップロードしたいリポジトリを用意する
今回、用意したリポジトリはAstroを選択しました。
モダンな開発環境ということで今一番新しいもので選んだため特に理由はありません。
Astroの初期ディレクトリは左記下記のようになります。
tree -L 1
.
├── README.md
├── astro.config.mjs
├── dist
├── node_modules
├── package.json
├── public
├── src
├── tsconfig.json
└── yarn.lock
リポジトリを実際にアップロードしてみる
鍵情報、リポジトリが揃ったので、コンパイルで生成される distディレクトリ 配下のファイルをアップロードしてみましょう。
アップロードしたいリポジトリのルート位置に移動し、下記のコマンドを実行してみましょう。
aws s3 cp dist/ s3://test.whyisthis.dev/ --recursive
upload: dist/xxxxx to s3://tools.whyisthis.dev/xxxxx
AWSアカウント(ルートアカウント)でアップロードしているので、
configureでの入力が間違っていなければまず間違いなく失敗しないのではないかと思います。
若干コマンドについて解説すると
aws s3: AWSのS3を対象としていることを明示しています。
cp dist/: アップロード対象は dist ディレクトリをコピーしてください。
s3://test.whyisthis.dev/: アップロード先になります。
--recursive: 指定フォルダ(dist)内のファイルを全て再帰的にアップしてください。
IAMユーザーの作成をする
S3バケットのみにアクセスできる権限を持たせた、IAMユーザー(ユーザーアカウント)を作成します。
step1
AWSトップページから、検索ボックスに「IAM」と入力すると、
IAMとつくサービスが表示されます。
一番上に表示される、IAMを選択し遷移します。

step2
遷移後、左側のメニューの中から、「ユーザー」を選択し、
右側のコンテンツが切り替わったのち、
「ユーザーを追加」を押してユーザー作成画面に遷移します。

step3
ユーザー名を設定し、
「次へ」ボタンを押して次のステップへ移行します。
マネージメントコンソールは特に必要ないので、ここではチェックをつけません。

step4
これから作るユーザーは何ができるのかを設定する画面になります。
許可のオプションでは、
「ポリシーを直接アタッチする」を選択し、
許可ポリシーのエリアを表示させます。
検索ボックスに「S3」と入力することで、
S3に関するポリシーのみに絞り込むことができます。
その中から「AmazonS3FullAccess」にチェックをつけて、
S3バケットへのフルアクセスを許可します。
「次へ」ボタンを押して次のステップへ移行します。

step5
入力の確認画面になるので、
ユーザーの作成を行うことで、
S3バケットへフルアクセスしかできないユーザーの作成が完了します。

step6
ユーザーの作成が完了したら、
一覧に表示されるようになり、
ユーザー一覧に確認できると思います。

IAMユーザーのパブリックキーとプライベートキーを取得する
作成したIAMユーザーにアクセスキーを生成します。
基本的にはAWSアカウントと同じですが、アクセスキーに制約を持たせるという点で異なります。
step1アクセスキーを生成・取得のためにユーザー名をクリックし、
画面を詳細に切り替えます。

step2
詳細画面が表示されたら、
「セキュリティ認証情報」タブに切り替えたのち、
アクセスキーエリアまでスクロールして、
「アクセスキーを作成」をクリックし作成していきます。

step3
AWSアカウント(ルートアカウント)の時は、
管理者権限で全ての権限を持っているので、
生成する・しないのみの操作でしたが、
IAMユーザーではアクセス方法を選択してあげる必要があります。
AWS CLIでS3バケットにnアクセスしたいので、
一番上の「コマンドラインインターフェイス」を選択します。
次に、チェックボックスにチェックを入れて、
「次へ」ボタンをクリックし、次のステップへ移行します。

step4
アクセスキーが何をするためのものなのかを入力します。
こちらは後でも編集可能なので、特に重要ではありません。
識別できる程度で問題ないです。

step5
アクセスキーの生成が完了しました。
AWSアカウントでの鍵生成と同じく、再ダウンロードはできないので、
必ず保存もしくは控えるようにしましょう。
完了ボタンを押して終了します。

step6
無事アクセスキーが生成されたことを確認できます。

取得した鍵情報をローカル環境に登録する
AWSアカウントの時と同じですが、
AWSアカウントとIAMユーザーを区別したいので、
オプションをつけてプロファイルを作成します。
実行コマンドは以下になります。
aws configure --profile project
このコマンドで登録することで、
アカウント(アクセスキー)を区別することができます。
実際どうやって登録されているかというと左記下記のように表示されます。
※登録順に書き込まれるので、先にプロファイルで鍵情報を登録した場合、
defaultが先頭にはなりません。
cat ~/.aws/credential
[default]
aws_access_key_id = XXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[project]
aws_access_key_id = XXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
IAMユーザーのキーを使用してアップロードする
前に行ったコマンドを使用するのですが、
アクセスキーはIAMユーザーのキーを使用したいので、
コマンドに鍵はこちら(IAMユーザーのキー)を使用するという明示を行います。
aws s3 cp dist/ s3://test.whyisthis.dev/ --recursive --profile project
configureで付与したものと同じ--profile projectで、
IAMユーザーのキーの使用を明示したことになります。
しかしながら、この設定だけでは不十分で、
AWSアカウントで作成されたS3バケットへIAMユーザーがファイルをアップロードすると、
アクセス許可が降りていないためアップロードできません。
左記下記のような状態です。

IAMユーザーが作成したS3バケットであれば問題なくアップできるのですが、
今回はAWSアカウントによって作成されたS3バケットへアクセスしたいので、
前記事「その1:配信先であるS3バケットの用意をする」のバケットポリシーの設定を行なった箇所に
アクセス許可の Statement を追加してやります。
{
"Sid": "AllowAccessToBucket",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::012345678901:user/test-whyisthis-backet"
},
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:DeleteObject"
],
"Resource": "arn:aws:s3:::test.whyisthis.dev/*"
},
内容を少し解説すると
PrincipalにIAMユーザーを登録する場合、keyにAWSをとり、valueにARNのstringもしくは配列(ARNが入る)を設定します。
Actionでは、IAMユーザーにS3バケット内のファイル取得、作成、更新、削除の許可を与えます。
Resourceには対象となるS3バケットのARN情報を設定します。
これでIAMユーザーにAWSアカウントで作成したS3バケットへのアクセス許可を設定したので、
コマンドをあらためて実行するとファイルアップロードが行えるようになっているかと思います。
まとめ
コマンドラインからこれでアップロードができるようになりました。
ここではIAMユーザーについて幾つか設定することがあり、若干ではありますが複雑な箇所もあったかと思います。
しかしながら、全てをAWSアカウントで行う危うさを排除するためにも、
IAMユーザーの作成と権限の移譲は必須の項目なのではないかなと思います。
次回は、「GitHubとS3を繋ぎGitHub ActionsでCI/CDを設定する」内容になります。
最後に、
今回画像に使っているS3バケット、IAMは記事を書くために作成・使用しています。
アクセスはできませんので悪しからず。