How to Deploy Angular App in S3?

Nowadays, application deployment in web development is one of the crucial aspects to ensure the work is done efficiently and in a cost-saving way to be in line with the development cycle. Amazon S3 (Simple Storage Service), or Angular, is commonly referred to as a double-edged weapon for a data storage solution. Amazon S3, the flagship service of Amazon Web Services (AWS), is storage-based in the cloud and scalable, plus you have durability. On the other hand, Angular is a framework; it's the frontend for SPAs, which permits the construction of applications as a single page.

Amazon S3, which is a scalable storage service based on objects-edged, allows developers to store and get data as long as possible at any time from any place on the web. It gives you the high fatigue resistance, availability, and scalability needed for multiple applications like static site hosting, archiving, content distribution, etc. Often referred to for its simplicity and ease of use, S3 by Amazon allows users to set up buckets (a container for storing objects) and upload files either by a given web interface or a programmatic API, accepting various formats of data content.

Angular, from Google and developed and maintained with care, is a JavaScript framework meant for building web applications that are dynamic and interactive, mainly of the type known as single page. These applications run completely in a browser without any file downloads and communication happens through server APIs. The Angular application release consists of development for production and deploying the application on a web server or cloud platform hosting station. As static files (HTML, CSS, JavaScript), Angular applications could easily be posted on plenty of the platforms available, e.g., Amazon S3.

Key Terminologies

• Amazon S3: Amazon S3 is a disillusionable drive driven by AWS, which is an enterprise object storage service offered by Amazon Web Services (AWS). It gives programmers not only the ability to transport data to and from the web but also from anywhere and with any volume that they want. S3 is incredibly resilient, stable, and standardized. It can be used in several different business applications, like hosting services, data backup, storage of images and files, and so on.
• Angular: Angular is a web framework for front-end development that is backed up and supported by Google. It is a strategy for creating dynamic SPAs (single page apps) in a systematic fashion, It contains some elements like two-way data binding, dependency injection, and modularity. Traditional Angular application creation is carried out in the typescript language and these apps work on the browser completely.
• Static Website Hosting: On the contrary, dynamic hosting implies showing the web content (HTML, CSS, JavaScript, etc) on the server of the website which does not need any dynamic programming. Different sorts of static websites are meant to render the content on the server while the dynamic websites serve the content directly to the users’ browser. With static sites having an aptitude to serve on seldom varying content such as blog posts, portfolios, and single page applications, hosting therefore static sites is the most suitable.
• Deployment: In the software industry, the term deployment can be elucidated as the process of releasing software to the intended user target group, which often consists of the general public or the consumers of the software company. Taking a website under development and move its files into the production environment, where end-users can access it is called deployment. The process of deployment is similar to those of writing, installation, customization, and use in production.
• Production Build: Production build signifies the ready-to-use version of software which is optimized and tuned so as to be suitable for deployment to a real production environment. In the world of Angular apps `ng build --prod` command builds production-ready module by compiling the TypeScript code to JavaScript, minifying and bundling up all static assets, and optimization of static files size and speed with help of advanced tools.
• Bucket: For Amazon S3, a bucket is an object container and can either the data or files. The AWS term for buckets is distinctive and they can be initiated, managed and pulled up using the console, CLI, and SDKs. S3 buckets organize objects by using a key-value pair system and using unique global URLs.
• Static Files: Static files as web files which do not change and are served to clients' browsers without any processes done by the server -side. Examples of static files include HTML docs, CSS stylesheets, JavaScript scripts, images, fonts, and other assets that are needed to support display in browser.
• Permissions: Authorizations set rights and privileges of a user or entity to access objects like files, folders or buckets they are considering. In the context of Amazon S3 data can be protected by setting permissions at the bucket level or object level which facilitates restriction of data access to only authorized personal for the operations like read, write or delete. These common permissions can include read, write, list, in addition to complete control.
• Client-side routing: A web abundancy technique whereby, when the internet address is shifted, the face keeps updating what is necessary for the content from the server to be fetched and not a new page requests from the same server.

Requirements prior to an Angular Application being deployed to Amazon S3

Before Angular app deployment to Amazon S3, there are some general prerequisites to tackle and get it done with ease.

• Development Tools:
  • Node.js and npm: Node.js as is another JavaScript runtime environment will let you to execute JS code beyond a web browser. A primary goal of npm (Node Package Manager), is to make it easy to fully install and control Java libraries and tools for individual developers. You can obtain Node.js from the site of the creators after downloading and installing it. It also comes with npm.
  • Angular CLI: Angular CLI (Command Line Interface) is a command line tool that contains commands for scaffolding Angular apps, creating application components, as well as build and serve the application.You can install the Angular CLI globally using npm:

npm install -g @angular/cli

• AWS Account: Activation an IAM account is required to leverage the capabilities of Amazon S3. You can create a free tier account directly from the AWS website (https://aws.amazon.com/console/) to begin using their services there and then.
• Additional Considerations: Understanding of Angular Applications : It is preferable to understand the Angular and how its features react to being deployed to S3; it gives insight into the routing and relative functionality in comparison.
• Basic understanding of AWS S3 : Storage would be not deep enough to understand, but you will need at least a general idea of how S3 buckets are used to store and manage the objects.
• Optional, but Recommended: Code Editor or IDE: Code editor or Integrated Development Environment (IDE) plays as a multiplier that makes developing easy with capabilities of syntax highlighting, code completion, debugging, and project management features. The arises of interest are VS Code, Atom, or WebStorm.

Step by Step Process to Deploy Angular App in S3

Step 1: Create new angular project

• Install angular modules

npm install -g @angular/cli

• Use the below syntax to create new angular application, replace project name which you want.

ng new <project_name> --defaults
cd <project_name>

• After creating write code according to your needs in app.component.html, css,ts files in app folder.

Step 2: Run on local host

• First run the angular app locally and check is it working right or not. by running the below code in terminal and you will get a link click on that you will be redirected to website

ng serve

Step 3: Create S3 Bucket on AWS

• We should have created account on aws and go to aws console search for s3 there.
• We will see create bucket click on that and enter bucket name and select settings as per your requirements.

The choice between the different server-side encryption options for your S3 bucket depends on your specific security needs and level of control desired: The choice between the different server-side encryption options for your S3 bucket depends on your specific security needs and level of control desired:

• Server-side encryption with Amazon S3 managed keys (SSE-S3): This is the pre-selected encryption for the newly created S3 storage buckets. It will serve as a decent one in the domain of basic data security since Amazon leaves you with the keys to encryption.
  • Pros: No need for deeply configuring, stunning to set up.
  • Cons: Amazon is in charge of both the encrypting keys and they key rotation policy; this puts the authority of this processes in their hands making your control over these process minimal.
• Server-side encryption with AWS Key Management Service keys (SSE-KMS): The option of the KMS keys enables the storage and maintenance of encryption keys in AWS KMS.
  • Pros: Allows custom key management control, including rotation. You can sort out what aisle is, lock doors to keep keys safe and trace the history of keys usage.
  • Cons: Otherwise requires additional configuration to create KMS keys and connect them to an S3 bucket.
• Dual-layer server-side encryption with AWS Key Management Service keys (DSSE-KMS): This is the most suitable option, that is, an additional KMS key for the data encryption key usage, which is the strongest design.
  • Pros: Adding an extra level of encryption makes it the most security-classified method.
  • Cons: As extremely complex setup and operation. Entails constant configuration making and these keys usage are associated with added KMS finishing.

Here's a recommendation based on current needs:

• As far as basic data encryption goes and if you’re preferring user-friendly solution, leave SSE-S3 with default encryption.
• If you wish to implement tighter control over key management, auditing or compliance at the place of your choice, we suggest to you SSE-KMS.
• Dual-source systems encryption (DSSE-KMS) are recommendable only for the data that is considered very sensitive and requires the biggest level of protection. This, for its turn, is a reason to make additional efforts and expenditures.

Step 4: Set up AWS Credentials

• Accordingly, Log in to the AWS Management Console with your IDs.
• Please, select your account name that is located in the navigation bar which is at the top right corner.
• Select My Security Credentials.
• Add more details to the sub-section Credentials (access key ID and secret access key).
• Click the “Create New Access Key” button.
• copy the AWS_SECRET_ACCESS_KEY and AWS_ACCESS_KEY_ID

Important: This is where you will see the access key id and secret access key, respectively. download or copy the details into a storage that is secured. The behind-the-scenes code that makes our online lives possible often goes unrecognized.

Step 4: Add @jefiozie/ngx-aws-deploy to your project

• ng add @jefiozie/ngx-aws-deploy is a command which enables you to extend your Angular project with the @jefiozie/ngx-aws-deploy package.
• An auxiliary library @jefiozie/ngx-aws-deploy functions as a built-in tool to deploy a fully operational Angular application to AWS (Amazon Web Services) directly from the Angular CLI. Lambda function serves the purpose of giving out commands and tools to control the deployment of the IaaS environment.
• You specify this by running ng add @jefiozie/ngx-aws-deploy and you will have Angular CLI download and install @jefiozie/ngx-aws-deploy package into your Angular project including any other configurations and dependencies such as those for deploying the Angular application to AWS platform. For instance, the prerequisites could be establishing AWS credentials, configuring deployments and providing the deployment scripts or utilities, etc.

ng add @jefiozie/ngx-aws-deploy

After these steps your angular.json is updated with a new builder:

"deploy": {
    "builder": "@jefiozie/ngx-aws-deploy:deploy",
    "options": {}
}

Step 5: Set Environment Variables

npx cross-env 
NG_DEPLOY_AWS_ACCESS_KEY_ID=AKIAVG5I2GAOKXATYVZJ
NG_DEPLOY_AWS_SECRET_ACCESS_KEY=
NG_DEPLOY_AWS_BUCKET=mygfgbucket
NG_DEPLOY_AWS_REGION=eu-north-1 
ng deploy

Here's a breakdown of what each part of the command does:

• - `npx`: This is an option, which enables you to run npm packages only in as opposed to installing them locally.
• - `cross-env`: This is a package used to set accept universe across different platforms. It allows for the variables to be correctly set even on the different platforms.
• - `NG_DEPLOY_AWS_ACCESS_KEY_ID=1234`: This will set the AWS access key ID as an environment variable, with value of "1234".
• - `NG_DEPLOY_AWS_SECRET_ACCESS_KEY=321ACCESS`: Hence, the AWS secret access sets the key as an environmental variable, using this `321ACCESS` as value.
• - `NG_DEPLOY_AWS_BUCKET=mys3bucket`: It nominates the AWS S3 bucket name variable as an environment variable with value of `mys3bucket`.
• - `NG_DEPLOY_AWS_REGION=eu-1-region`: This sets the `aws` region environment variable to have the value `€u-1-region`.
• - `ng deploy`: In the Angular CLI, this command is for deploying the application made with Angular to the app servers. There is a possibility that it is coded to launch the app to AWS S3 for you after setting up the environment variables as mentioned above.

Be careful to place the correct values instead of placeholders in your real credentials. myaccount for AWS and bucket name is example: eu-1-region. Furthermore, carry out an inspection once that you have the authorization and configurations for S3 established in the account.

Step 6: Deployment

• In order to use your Angular application to deploy your app on Amazon S3 by Angular CLI deployer, you may only use the `ng deploy` command in your shell at the Angular project directory.
• Remember to run `ng deploy` only when you have your Angular project setup for deployment processing properly. By default, the options to follow when deploying on a server is to first configure the deployment scheme in `angular.json` file. Furthermore you’ll need to specify the hosting options, and finally set up any environment-specific settings.

ng deploy

• Using this command kicks off deployment also following the process that is specified in project itself which might include bundling the Angular application after which it is then saved into an Amazon S3 bucket.
• Comprehensively configure your AWS credentials, bucket name, and region while considering either environment variables, Angular configuration file or through command-line options, based on your deployment settings.

After that your bucket somehow will be like this.

Your angular app is deployed in S3!!

Step 7: Run

• Firstly after deploying enable static web hosting and add index document which is going to descide which is your initial opening page i.e index.html.

• Once your Angular application is deployed to S3, you can access it using the endpoint provided by Amazon S3 or your custom domain if you've configured one.

• After that click on the link given by aws you will be redirected to the website you generated.
• As you can see i am redirected to my project output below.

Test your application to ensure that it loads correctly, and all functionalities work as expected.

Conclusion

Deploying the Angular application to Amazon S3 is a simple process involving several steps such as application build for production, creating a bucket, configuring the bucket for static website hosting, uploading the application's build files, setting permissions and configuring CORS if necessary. Through these procedures, you can easily deploy your Angular application on Amazon S3 and let people from all over the globe access to it. Besides, you can also look into automating the process of deployment of CI/CD using AWS CodePipeline or Jenkins. This allows you to make the deployment process easier and ensure that your application is always available and ready-to-use for the users.

sagaryessee

Follow

Improve

Article Tags :

• DevOps