Deploying First Angular static app on AWS cloud
Step1 : To get started, use the Angular CLI to generate a new Angular app:
Open the command prompt and type below command
Command : ng new <my_app>
Once the CLI has generated the newer project with all the necessary files for your Angular app, lets try to run it.
Command-1 : cd <my_app>
Command-2 : ng serve
Now your app is up and ready to run on http://localhost:4200.
Now since your angular app is is up and running, let’s deploy it to S3.
Steps for AWS setup :
Step 1: Login to AWS console
Step 2 : Go to the S3 console
Step3 : Click on the Create Bucket button, and follow the steps to give your new bucket a name and choose an adequate region.
Leave the Configure options as is, and uncheck the Block all public access in the Set permissions section. Now review and create your bucket. Your final screen should look like the image below:
Our new bucket looks great. But it will look even better when we fill it up.
Currently, all we have is a folder with an Angular app. We need to generate the build files, so S3 can understand and serve them. Let’s go back to our Angular app and simply run:
ng build --prodYou should see a new dist folder in your project directory. It contains
browser-understandable files that you now need to upload to your bucket.
Go back to S3 to upload the content of your dist folder. Make sure you choose the Grant public read access to this object(s) in the Manage public permissions dropdown.
Leave the Set permissions and Set properties as-is. Then click Upload. Here are some helpful screenshots:
Now, navigate to Properties and expand Static website hosting.
Click Use this bucket to host a website and enter index.html for Index document. Click Save.
After saving it, you should see a colored checkmark for Bucket hosting indicating that it is now enabled. At the top, Endpoint is the link for your freshly deployed Angular app.
After a minute or so, navigate to that link to see the result. Congrats! You just deployed your Angular app to AWS S3!
