Introduction
Angular is an open-source web application framework. It is a TypeScript-based free and development platform for building WEB, desktop, and mobile applications.
Amazon S3 stands for the Simple Storage Service. It is a service (object storage) that provides industry-leading scalability, data availability, storage, security, and performance. It can also be used to retrieve any amount of data from anywhere.
GitHub is a source code and file storage service hosting platform for version control and collaboration using the git tool. To automate the software workflow service GitHub Actions service is used.
Requirement
- Angular CLI
- IDE
- Node.js and npm
- Git
Getting Started
I. Create and configure the AWS Account on the Amazon S3 Service
- Sign in to the AWS Management console by accessing the site https://aws.amazon.com/s3/.
- Open the Amazon S3 console.
- Choose Create Bucket.
- Fill the details i.e. Bucket name, enter the DNS-compliant name for the bucket.
- In Regions, select the AWS Region.
- Under Object Ownership, disable or enable ACLs. It determines who can specify access to objects.
- In Block all public access, select the Block Public Access settings that you want to apply to the bucket.
- In Bucket Versioning, disable or enable it. Versioning is used to retrieve, preserve and restore every version of every object stored in the Amazon S3 Bucket.
- If you want to add some Tags, use the Tags option (It is optional).
- Under Default encryption, disable or enable the Server-Side encryption. It automatically encrypts new objects stored in the bucket.
- To enable or disable the S3 Object Lock, choose Advanced settings and disable or enable it.
Choose Create Bucket.
II. Github Actions to deploy Angular code to S3 Bucket
- Sign in to your GitHub account.
- Create a new Repository.
- Now, Add secrets to configure the key with Access Key ID and Secret Access key as mentioned below:
Click on menu Settings–>Secrets (from Side Menu)–>New Repository Secret–>Add secret. - Access key configured.
III. Create the Angular Application
- Create the application with the Angular base structure using the @angular/cli.
- Add the below yml file.
- Synchronize the application on the GitHub repository that was created.
- After the synchronization of the application on the GitHub repository, the GitHub Actions build the application and synchronize with the Amazon S3 bucket.
Notes:
- The AWS_ACCESS_KEY_ID and AWS_SECRET_KEY settings were done in the GitHub repository.
- Add your bucket name as a value in the AWS_S3_BUCKET.
- Under aws-region, use your bucket region.
- The “dist/consumer-admin-web/” setting is the application build folder.
name: deploy
on:
workflow_run:
workflows: [formatting]
types: completed
jobs:
on-success:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
steps:
- run: echo 'The triggering workflow passed'
build:
runs-on: ubuntu-latest
env:
AWS_S3_BUCKET: zehntech-consumer
AWS_ACCESS_KEY_ID: ${{secrets.AWS_ACCESS_KEY_ID}}
AWS_SECRET_ACCESS_KEY: ${{secrets.AWS_SECRET_ACCESS_KEY}}
aws-region: ap-south-1 # Use your bucket region here
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@master
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Dependencies
run: npm install
# - name: Install Angular
# run: npm install -g @angular/cli@9.0.7
- name: Production Build
run: npm run build --prod
# Deploy to S3
# This is a third party action used to sync our production build app with the AWS S3 bucket
# For security purpose I am using secrets configured in project repo setting.
- name: Deploy to S3
uses: jakejarvis/s3-sync-action@v0.5.1
with:
# --acl public read => makes files publicly readable(i.e. makes sure that your bucket settings are also set to public)
# --delete => permanently deletes files in S3 bucket that are not present in latest build
args: --acl public-read --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_PRODUCTION_BUCKET_NAME }} # S3 bucket name
# note: use IAM role with limited role for below access-key-id and secret-access-key
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # Access Key ID
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # Access Secret Key
SOURCE_DIR: "dist/consumer-admin-web/" # build folder now
on-failure:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'failure' }}
steps:
- run: echo 'The triggering workflow failed'
IV. GitHub Actions Flow
- Validate the run of the GitHub Actions flow by accessing the created repository.
- Now click on the Actions button–>Job deploy–>Click on each step to validate the run.
3. The run of the GitHub Actions flow is validated.
Conclusion
Whenever you make the changes to your git repository, the updated code is deployed on the s3 bucket.
by Zehntech