I have already explained in my previous post how can you auto upload your project changes on push action with S3 using Github workflows. Today, we will learnt about deployment part of it.
Here is the link to previous blog where you can learn about continuous integration of the code:
Click the emoticon 👩💻
After completing all the steps and replacing your index.html with react project in the local repository. Now is the time to update main.yaml or app.yaml file
name: Deploy React App
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v4
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Install dependencies
run: npm install
- name: Test
run: npm test
env:
CI: true
- name: Generate build
run: npm run build
# Share artifact inside workflow
- name: Share artifact inside workflow
uses: actions/upload-artifact@v1
with:
name: github-workflow
path: build
deploy:
runs-on: ubuntu-latest
# once the application has been successfully tested and the build has been produced
# Then we can start with deployment
needs: build
steps:
# Download previously shared build
- name: Get artifact
uses: actions/download-artifact@v1
with:
name: react-github-actions-build
# Set the credentials from repository settings/secrets
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-s3-bucket: ${{ secrets.AWS_S3_BUCKET }}
aws-access-key-id: ${{ secrets.AWS_ACCESS_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
# Copy the files from build folder to the S3 bucket
- name: Deploy to S3
run: aws s3 sync ./your-folder-name s3://aws-s3-bucket-name
Here, how Github actions look like
From onwards whenever you push the code to master it will going to deploy it on S3 bucket.
You can get the link of the index.html from the S3 > choose your bucket > properties > object url.
Kudos!! You deployed your react app on S3 using workflow 🥳