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:
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.
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.
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.
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.
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.
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.