{"id":76,"date":"2023-01-12T18:12:34","date_gmt":"2023-01-12T23:12:34","guid":{"rendered":"https:\/\/shagun.dev\/?p=76"},"modified":"2025-01-13T19:46:45","modified_gmt":"2025-01-14T00:46:45","slug":"auto-upload-s3-website-using-github-actions","status":"publish","type":"post","link":"https:\/\/shagun.dev\/?p=76","title":{"rendered":"Deploy website on AWS S3 using Github actions"},"content":{"rendered":"\n<p>AWS Service Used: IAM, S3<br>Github Actions<\/p>\n\n\n\n<p>Before jumping into automating the build. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AWS Service: IAM<\/h3>\n\n\n\n<!--more-->\n\n\n\n<p>1.  Sign in as root user<br>2. Go to IAM service<br>     Create a user with Programatic Access as password<br>     Assign user S3FullAccess permission<br>     Create User<br>     Access key and secret will be available once the user is created. Please copy the both the credentials<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AWS Service: S3<\/h3>\n\n\n\n<p>1. Sign in as same IAM user you just created<br>2. Go to S3 service<br> Create a new bucket, named as &#8220;github-action-workflow&#8221;<br> Properties > Static website hosting, add main page of the website<br> Permissions > Remove &#8220;block public access&#8221;<br> Permissions > Edit Policy<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"578\" src=\"https:\/\/shagun.dev\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-09-at-4.48.49\u202fPM.png\" alt=\"\" class=\"wp-image-137 size-full\" srcset=\"https:\/\/shagun.dev\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-09-at-4.48.49\u202fPM.png 782w, https:\/\/shagun.dev\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-09-at-4.48.49\u202fPM-300x222.png 300w, https:\/\/shagun.dev\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-09-at-4.48.49\u202fPM-768x568.png 768w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Add new statement : S3<br> Add action : GetObject<br> Add resource : arn:aws:s3:::github-action-workflow\/*<\/p>\n<\/div><\/div>\n\n\n\n<p><br>3. Create Bucket<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Github Actions<\/h3>\n\n\n\n<p>1. Create a new repository, say &#8220;githubDemoActions&#8221;<br>2. Go to Settings page &gt; Secrets &gt; Actions<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-1024x567.png\" alt=\"\" class=\"wp-image-106\" srcset=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-1024x567.png 1024w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-300x166.png 300w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-768x425.png 768w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-1536x850.png 1536w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-12.31.02-PM-2-2048x1133.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>3. Add the secret credentials that you got when a user was created in IAM service<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-1024x412.png\" alt=\"\" class=\"wp-image-107\" srcset=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-1024x412.png 1024w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-300x121.png 300w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-768x309.png 768w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-1536x617.png 1536w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.51.24-PM-2-2048x823.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>Name: AWS_S3_BUCKET\nValue: github-action-workflow\n\nName: AWS_ACCESS_ID\nValue: Paste the access key id that was created at the time of user creation\n \nName: AWS_SECRET_ACCESS_KEY\nValue: Paste the secret value that was created at the time of user creation\n<\/code><\/pre>\n\n\n\n<p>4. Clone the repository to your local system<br>5. Add a sample file, say index.html<br>6. Create .github\/workflows folder under your local repository<br>7.  Add app.yaml under workflows directory. Paste the given code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>name: Github Workflow Demo\n\non:\n  push:\n    branches:\n    - master\n\njobs:\n  deploy:\n    name: Github Workflow actions \n    runs-on: ubuntu-latest\n    \n    steps:\n    - name: Checkout\n      uses: actions\/checkout@v4\n      \n    - name: Configure AWS credentials\n      uses: aws-actions\/configure-aws-credentials@v1\n      with:\n        aws-s3-bucket: ${{ secrets.AWS_S3_BUCKET }}\n        aws-access-key-id: ${{ secrets.AWS_ACCESS_ID }}\n        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n        aws-region: ${{ secrets.AWS_REGION }}\n    \n    - name: Deploy to AWS S3\n      run: aws s3 sync . s3:\/\/github-action-workflow<\/code><\/pre>\n\n\n\n<p>8. Now you can check under Actions &gt; Workflow<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-1024x495.png\" alt=\"\" class=\"wp-image-82\" srcset=\"https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-1024x495.png 1024w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-300x145.png 300w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-768x371.png 768w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-1536x742.png 1536w, https:\/\/shagun.dev\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-12-at-2.56.04-PM-2048x990.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>9. The project is now upload to AWS S3<br>10. Copy the index.html link from object property,  the link is public now \u2728<\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AWS Service Used: IAM, S3Github Actions Before jumping into automating the build. AWS Service: IAM<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-devops"],"_links":{"self":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=76"}],"version-history":[{"count":14,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}