Github Actions To deploy angular site to AWS cloudfront & S3

(0 comments)

Prerequisites Github Secrets:

  • AWS_ACCESS_KEY_ID   :   AWS IAM user access having S3 and cloudfront permissions
  • AWS_SECRET_ACCESS_KEY
  • AWS_REGION
  • AWS_S3_BUCKET_NAME
  • AWS_CLOUDFRONT_ID

Please Follow Below in sequence (click below "read more" to read full article):

  1. Create ".github/cicd.yml" file in your github repo
  2. put following content in it. Replace text written in < SOME TEXT > according to your deployment and project settings.
on:
  push:
    branches:
      - < YOUR BRANCH NAME ON PUSH OF IT TO TRIGGER BUILD >

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./

    steps:

    - name: Check out Git repository
      uses: actions/[email protected]

    - uses: actions/[email protected] #this installs node and npm for us
      with:
        node-version: '14.x'

    - uses: actions/[email protected] # this allows for re-using node_modules caching, making builds a bit faster.
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - name: NPM Install
      run: npm install
    
    - name: NPM Install Angular
      run: npm install -g @angular/cli > /dev/null

    - name: NPM build Angular
      run: npm run build

    - name: Sync to S3
      uses: raulanatol/[email protected]
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}
        AWS_BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME }}
        SOURCE: dist/<FOLDER ON WHICH index.html and other output build files created>/
        TARGET: ''
        WITH_CLOUD_FRONT_INVALIDATION: true
        AWS_CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.AWS_CLOUDFRONT_ID }}
        AWS_CLOUDFRONT_INVALIDATION_PATH: "/*"

Currently unrated

Comments

There are currently no comments

New Comment

required

required (not published)

optional

required

captcha

required