Prithish's blog on DevOps Engineering

Deploy Portfolio website into AWS S3 bucket

PrithishG's photo
PrithishG
·

3 min read

Deploy Portfolio website into AWS S3 bucket

Table of contents

Prerequisite :

  1. AWS Account - services = IAM, KMS, BUCKET, BUCKET POLICY

  2. GitHub Account - services = Repository, secrets, GitHub actions workflows

  3. Portfolio website or any website

Steps :

  1.  Go to aws -> iam -> user -> create one user along with access keys

    2. now let's create aws bucket :

aws->s3-> create -> name your bucket > create

make sure you make the public option enabled && the static website hosting option is on.

  1. Now it's time to create GitHub actions workflows where we will define our checks along with steps.

for that Github repo > actions > click design actions by your own and start adding your workflows according to your portfolio . In my case it is like this : 

name: Portfolio 
on:
  push:
    branches:
    - main
    - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-east-1

    - name: Deploy my website into s3 bucket
      run: aws s3 sync . s3://pg-portfolio --delete

so on the first part, I have defined branches that are allowed for my portfolio and after in build-and-deploy step I have added my aws user credentials which are stored in AWS_ACCESS_KEY_ID && AWS_SECRET_ACCESS_KEY these two secrets(below are the steps to create secrets) and the defined region as well and the final step is deploying and pushing my actions workflow to the s3 bucket which is pg-portfolio.

Create and store your secrets inside repos
step 1. in your repo go to your setting (make sure you are on repo setting not global GitHub settings. below you can see settings option.

step 2 . you can check in security tab there will be secrets and variables option click that > click new repo secrets > give it a name > store your value .

  1. Now whenever you will save & commit changes in your GitHub action workflows page it will automatically check all the details and perform steps according to the workflows.

    as you can see that workflows succeeded .

  2. Now we have to define bucket policy which will be publicgetObject so fo that i have defined already a bucket policy : 

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

    The main purpose of this policy is to provide my portfolio inside the bucket which will be accessible to the public.

  3. so we are all set for the deployment now add this policy inside the repo as well and start your workflow after all it will be accessible in the bucket.

as you can see all files are available in the bucket.

  1. Now we have to put our landing page inside the bucket initial point for that go to s3bucket > your bucket > properties > click edit static website hosting and add your index.html landing page and click save and you will get one s3 bucket website link where your website will be running smoothly.

click that link and there you go:

if you like this project please hit like button and let me know what all you explored . #keeplearning #keepgrowing .

AWSAWS s3Devopsgithub-actionsGitHubPages