Hosting Your Angular Application on AWS S3

Hosting your Angular 17 application on AWS S3 involves several key steps. AWS S3 (Simple Storage Service) is a scalable, high-speed, web-based cloud storage service designed for online backup and archiving of data and application programs. Here is a step-by-step guide to deploying your Angular application on AWS S3:

1. Prepare Your Angular Application

Before deploying your application, you need to build it for production. This process compiles your Angular application into static files that can be served over the web.

• Open your terminal or command prompt.
• Navigate to your Angular project directory.
• Run the build command:

  ng build --prod

This command creates a dist/ directory in your project, containing the files you’ll need to upload to S3.

2. Create an AWS S3 Bucket

• Sign in to the AWS Management Console and open the Amazon S3 console at https://s3.amazonaws.com.
• Click Create bucket.
• Provide a unique name for your bucket according to the DNS naming conventions.
• Select a Region.
• Uncheck Block all public access settings, acknowledge that the bucket will be publicly accessible, and click Create bucket.

3. Configure the Bucket for Website Hosting

• Navigate to your newly created bucket in the S3 console.
• Go to the Properties tab and find the Static website hosting option.
• Enable static website hosting.
• Set the Index document as index.html and the Error document as error.html (or your custom error page name if you have one).
• Save the changes.

4. Upload Your Angular Application to the S3 Bucket

• Go to the Objects tab in your bucket.
• Click Upload, then Add files or Add folder to upload the contents of your dist/your-project-name directory.
• After adding, click Upload.

5. Set Bucket Permissions

• Navigate to the Permissions tab of your bucket.
• Edit the Bucket policy to allow public read access. You can use the AWS Policy Generator to create a policy that allows public read access. Here’s an example policy:

  {
    "Version": "2024-02-17",
    "Statement": [{
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }]
  }

• Replace YOUR_BUCKET_NAME with your actual bucket name.
• Save the policy.

6. Access Your Angular Application

• Go back to the Properties tab and find the Static website hosting section.
• You will see a URL endpoint for your website. Click on this URL to access your deployed Angular application.

Optional: Configure a Custom Domain

If you want to use a custom domain for your Angular application hosted on S3, you can use Amazon Route 53 or another DNS service to direct your custom domain to your S3 bucket. This process involves creating a CNAME record pointing to your S3 bucket’s website endpoint.

Conclusion

By following these steps, you can easily host your Angular application on AWS S3, making it accessible to anyone with the link. Remember to monitor your S3 usage to manage costs effectively, especially if you expect high traffic to your application.