<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
設定ファイルなどを S3 にアップロードすることが多くなり、面倒になってきています・・・。 
そこで GitHub にファイルをマージした時に自動でアップロードしたくなったのでちょっと試してみました。
<h1 id="%E4%BB%8A%E5%9B%9E%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%9B%9E%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89" aria-hidden="true"></a> 今回の構成はこちら</h1>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">├── .github
│ └── workflows
│ └── upload-to-s3.yaml
├── README.md
├── images
│ ├── sampleA.webp
│ └── sampleB.webp
└── sample.html
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container">sample.html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Sample HTML Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello, World!&lt;/h1&gt;
 &lt;p&gt;This is a sample HTML page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>images には適当にChatGPTで生成した画像を２枚保存
リポジトリはこちら 
<iframe id="zenn-embedded__b28132fa0a6a7" src="https://embed.zenn.studio/card#zenn-embedded__b28132fa0a6a7" data-content="https%3A%2F%2Fgithub.com%2FMo3g4u%2Fgithub-actions-fileupload-to-s3" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/Mo3g4u/github-actions-fileupload-to-s3" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/Mo3g4u/github-actions-fileupload-to-s3</a>
※実際に試す場合はご自身の GitHubユーザー名 / GitHubリポジトリ名 に置き換えてください
<h1 id="s3-%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E6%BA%96%E5%82%99%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#s3-%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E6%BA%96%E5%82%99%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> S3 バケットを準備します</h1>
今回は以下のバケットを作成しておきました。
<ul>
<li>リージョン： us-east-1</li>
<li>バケット名：github-actions-fileupload-to-s3</li>
</ul>
<h1 id="oidc-%E7%94%A8%E3%81%AB-id-%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#oidc-%E7%94%A8%E3%81%AB-id-%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> OIDC 用に ID プロバイダを作成します</h1>
次のサイトを参考に ID プロバイダを作成しておきます。 
GitHub Actions で OIDC を使用して AWS 認証を行う 
<iframe id="zenn-embedded__fa123542d48ec" src="https://embed.zenn.studio/card#zenn-embedded__fa123542d48ec" data-content="https%3A%2F%2Fzenn.dev%2Fkou_pg_0131%2Farticles%2Fgh-actions-oidc-aws" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/kou_pg_0131/articles/gh-actions-oidc-aws" style="display:none" target="_blank">https://zenn.dev/kou_pg_0131/articles/gh-actions-oidc-aws</a>
<h1 id="%E4%BB%8A%E5%9B%9E%E7%94%A8%E3%81%AE%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%9B%9E%E7%94%A8%E3%81%AE%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> 今回用のロールを作成します</h1>
ロール名：github-actions-fileupload-to-s3
<div class="code-block-container">
<div class="code-block-filename-container">信頼ポリシー</div>
<pre class="language-json"><code class="language-json">{
 "Version": "2012-10-17",
 "Statement": [
 {
 "Sid": "",
 "Effect": "Allow",
 "Principal": {
 "Federated": "arn:aws:iam::&lt;AWSアカウントID&gt;:oidc-provider/token.actions.githubusercontent.com"
 },
 "Action": "sts:AssumeRoleWithWebIdentity",
 "Condition": {
 "StringEquals": {
 "token.actions.githubusercontent.com:aud": "sts.amazonaws.com"
 },
 "StringLike": {
 "token.actions.githubusercontent.com:sub": "repo:Mo3g4u/github-actions-fileupload-to-s3:*"
 }
 }
 }
 ]
}
</code></pre>
</div>カスタマーインラインでポリシーを追加
<div class="code-block-container">
<div class="code-block-filename-container">許可</div>
<pre class="language-json"><code class="language-json">{
 "Version": "2012-10-17",
 "Statement": [
 {
 "Effect": "Allow",
 "Action": [
 "s3:PutObject",
 "s3:ListBucket",
 "s3:DeleteObject"
 ],
 "Resource": [
 "arn:aws:s3:::github-actions-fileupload-to-s3",
 "arn:aws:s3:::github-actions-fileupload-to-s3/*"
 ]
 }
 ]
}
</code></pre>
</div><h1 id="github-actions-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#github-actions-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> GitHub Actions を作成します</h1>
<ul>
<li>main ブランチにプッシュされた場合に実行されるようにしています</li>
<li>OIDC で認証しています
<ul>
<li>参考:<a href="https://zenn.dev/kou_pg_0131/articles/gh-actions-oidc-aws" target="_blank">GitHub Actions で OIDC を使用して AWS 認証を行う</a>
</li>
</ul>
</li>
<li>sample.html は cp でアップロードしてみました</li>
<li>images は sync でファイルを同期してみました
<ul>
<li>
<code>--delete</code> をつけることでファイルが無くなった場合にS3から削除してくれるようになります</li>
</ul>
</li>
<li>
<code>AWS_ROLE_TO_ASSUME</code> には作成したロールの ARN を入れておきます。</li>
<li>
<code>AWS_REGION</code> は今回 us-east-1 を入れておきます。</li>
</ul>
<div class="code-block-container">
<div class="code-block-filename-container">upload-to-s3.yaml</div>
<pre class="language-yaml"><code class="language-yaml">name: Upload to S3

on:
 push:
 branches:
 - main

permissions:
 id-token: write
 contents: read

jobs:
 upload:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout code
 uses: actions/checkout@v2
 - name: Set up AWS Credentials
 uses: aws-actions/configure-aws-credentials@v2
 with:
 role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
 aws-region: ${{ secrets.AWS_REGION }}
 - name: Upload to S3
 run: |
 aws s3 cp sample.html s3://github-actions-fileupload-to-s3/sample.html
 - name: Sync images folder to S3
 run: |
 aws s3 sync images s3://github-actions-fileupload-to-s3/images --delete
</code></pre>
</div>あとは main に push したら GitHub Actions が動き出してくれます。
<h1 id="%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%84%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D">
<a class="header-anchor-link" href="#%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%84%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> ちょっとつまずいたところ</h1>
<code>aws sync</code> をつかったところで 権限エラーがでました。 
つぎのページを見て解決しました。 
<iframe id="zenn-embedded__2ef764ccc88e" src="https://embed.zenn.studio/card#zenn-embedded__2ef764ccc88e" data-content="https%3A%2F%2Frepost.aws%2Fja%2Fknowledge-center%2Fs3-access-denied-listobjects-sync" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://repost.aws/ja/knowledge-center/s3-access-denied-listobjects-sync" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://repost.aws/ja/knowledge-center/s3-access-denied-listobjects-sync</a>
<code>aws sync</code>に<code>--delete</code>をつけないとS３側のファイルが削除されませんでした。 
それに合わせて当たり前ですが <code>s3:DeleteObject</code> も必要になりました。
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
わりと簡単にできることがわかりました。 
私の今回の目的は設定ファイルのアップですが、S3 にサイトデータをアップするのにも使えますね! 
どんどん自動化していこうと思います！

GitHub Actions で S3 にファイルアップロードする

OIDC 用に ID プロバイダを作成します

Discussion