GeoJSON
Spring
Hibernate
Liquid
Karma
Deploy
SASS
REST
Upgrade
Boot
Spring
Consume
Visualize
React
Angular

From Github to AWS

Deploying an Angular app to AWS when merging to the master branch on GitHub involves several steps, including setting up AWS services, configuring GitHub Actions, and creating deployment scripts. Here's a general overview of the process:

  1. Set Up AWS Services:

    a. S3 Bucket: Create an Amazon S3 bucket to store your Angular app's static files (HTML, CSS, JS).

    b. CloudFront Distribution (Optional): Set up an Amazon CloudFront distribution to serve your app's content globally for better performance.

  2. Configure AWS Credentials:

    a. Create an IAM user with appropriate permissions (S3, CloudFront if used).

    b. Generate AWS Access Key and Secret Access Key for the IAM user.

    c. Configure these credentials on your local machine or your CI/CD environment where the deployment will take place. This can be done using environment variables or AWS CLI configuration.

  3. Set Up GitHub Actions:

    a. In your Angular project repository on GitHub, create a .github/workflows directory.

    b. Create a YAML file (e.g., deploy.yml) in this directory to define the GitHub Actions workflow.

    c. Configure the workflow to trigger on merges to the master branch.

  4. Define Deployment Steps:

    a. Within the workflow file, define steps to build and deploy the Angular app:

    name: Deploy to AWS
    
    on:
      push:
        branches:
          - master
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
    
        steps:
          - name: Checkout Repository
            uses: actions/checkout@v2
    
          - name: Set Up Node.js
            uses: actions/setup-node@v2
            with:
              node-version: 14
    
          - name: Install Dependencies
            run: npm install
    
          - name: Build Angular App
            run: ng build --prod
    
          - name: Deploy to S3
            run: |
              aws s3 sync ./dist/my-angular-app s3://your-s3-bucket-name --delete
              aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    
          - name: Invalidate CloudFront Cache (Optional)
            run: |
              aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths '/*'
    

    Replace placeholders like my-angular-app, your-s3-bucket-name, and YOUR_DISTRIBUTION_ID with actual values.

  5. GitHub Secrets:

    a. In your GitHub repository, go to "Settings" > "Secrets" and add two secrets: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY with the values you obtained earlier.

  6. Testing and Deployment:

    a. Make changes to your Angular app and create a pull request to the master branch.

    b. Once the pull request is merged, GitHub Actions will automatically trigger the deployment workflow.

    c. The workflow will build your app, sync it to the S3 bucket, and optionally invalidate the CloudFront cache.

That's a high-level overview of the process. Keep in mind that this example provides a basic deployment setup. Depending on your project's complexity, you might need to adjust and enhance the workflow to handle additional requirements like environment-specific configurations, testing, etc.

script