Scribd
Upload
18 views

Deploy An Angular With S3 and CloudFront

angular

Uploaded by

MarceloMoreiraCunha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
18 views

Deploy An Angular With S3 and CloudFront

angular

Uploaded by

MarceloMoreiraCunha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 12
‘6108/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium Openinepe * Gare) soni Medium © se Deploy an Angular with S3 and CloudFront @p Kittiphat Srilomsak - Follow Sminread - Apr 30,2018 © listen (9) Share Here is how easy it is to deploy an Angular SPA (Single Page App) as a static website using $3, and with help of CloudFront for redirection. Idea So here is the basic schematic of what's going to happen. tena to Compiled angular -> | $3 | <-> | CloudFront | <--> Internet (/dist folder) +----+ os -aa4 Compile the Angular Project Basically run angular’s cli compiler. $ ng b -prod — aot When finished all your files will be stored within dist/ directory. Deploy it on S3 First thing first, you need an account with $3, So I assume you already have that. « Head to $3 console * Create a bucket. (Make sure you grant a public read permission to Public — Set Permissions / Manage public permission — and Grant public read access to this bucket.) hitpssImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angula-spa-single-page-app-as-a-statiowebsite-using-s3-and-Saa4as4... 1/12 ooe2024, on 8 Deploy an Angiar wth 88 ane Clouront| by KtphatSomsak| Medium + Inyour bucket, go to Overview tab and upload everything in your dist/ to your desired folder (or you can place all of them in root), Again upon upload make sure you grant Read permission to Public for all the objects that has been uploaded. * Update $3 properties to static website hosting, Go to Properties tab. Select static website hosting. Put in index.html in index document. * That's it. You website is up and running. You can try it by navigate to your URL. as follow: https: // . s3-website- . amazonaws.com Note: This URL actually already provided in Properties tab under static website hosting of your bucket. ‘Try use this link on your browser your angular project should be up and running. Now there is still some problem. If you Angular Project does use routing mechanism. As in this official example. Your project will not function properly when you use full URLs. Basically this https: //.s3-website- -anazonaws.com/sone/route/path will not work, As $3 will try to find an object based on your given some/route/path of which it cannot be found. So how can we fixed this? Here is when CloudFront come to rescue. CloudFront for Routing rules So the idea is as simple as whenever $3 reply 403 or 404 we should return content from index.html instead and return status 200 instead. Here is how to do it. * Go to CloudFront Console « Add new Web Distribution + Important: Origin Domain Name will provide you with the drop down of $3 bucket. You shouldn't use that. As it omitted the $3's region and it will cause the tps sImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiwebste-using-s3-and-Saa4as4,.. 2/12, ooe2024, on 8 Deploy an Anguior with $3 and Cludont by Kila Slomsak| Medum request to redirect instead of passing through the traffic through CloudFront. (May be there is a better way to configure this I'm not sure.) So just copy-and- paste your $3 URL here. .s3- .amazonaws.com * You should configure Origin Path to your $3 root folder name if you decided to upload your $3 on non-root folder. * You should configure Alternate Domain Names (CNAME5) to your custom subdomain if you decided to let this website accessible from other hostnames. (You should also have the DNS CNAME records point to this CloudFront’s distribution). * Head down to Default Root Object setting, And set it to index.htm * You can leave pretty much everything else default. And note that you can come back and reconfigure all of these at anytime. « Save. Now if the Distribution’s status is showing in-progress for more than 5 minutes. That means something is wrong. You should go check if your $3 is really accessible for your CloudFront'’s configurations. And also check if your CloudFront’s configuration is correctly configured. (Such as Origin Domain Name). * Once your distribution is up and running you should be able to access your website through CloudFront. Your CloudFront URL is in the console under DOMAIN NAME column. + Copy-and-paste that on your browser see if it correctly shows. Finally, now we need to configure 403 or 404 errors to redirect the traffic to ‘index.html to do this. * Go to Distribution Settings * Go to Error Pages Tab * Create 2 Customer Error Responses for 403, and 404 error. Both of them should use Customize Error Response with page of index.htmt_ and change status to 200. tps sImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-astatiowebsite-using-s3-and-Saa4asd,.. 3/12 ooe2024, on 8 Deploy an Angiar wth 88 ane Clouront| by KtphatSomsak| Medium That's it! Now you should be able to link to your website through CloudFront’s domain name with any path. Try. https: //.cloudfront.net/some/path Configure CNAME Now if you want your URLs to look pretty. You can configure CNAME to point to this CloudFront’s URL. Once you have your CNAME added. Comeback to CloudFront’s distribution and update your Alternate Domain Names (CNAMEs) Wait for couple minutes and try it out. In my case I use cloudflare.com to configure my DNS, and offload some traffic from my AWS account. Secure your S3 Bucket (Optional) As of now you would have the Cloud Front distribution up and running you can now enclose your $3 bucket public access. To do this. You will need to stop the distribution of your Bucket publicly. And instead, configure your CloudFront distribution to use its own AccessIdentity. To do this 1. In your $3 Bucket, remove public access. 2, In your CloudFront distribution, go to Origin and Origin groups tab. 3. Select your $3 Bucket, hit Edit 4, Select ‘Yes’ to Restricted Bucket Access. 5. Select your desired Identity, and check ‘Yes, Update Bucket Policy’ so that CloudFront update the Bucket Policy for you. Update the site Last tip about using this configuration to host your website. With this configuration, CloudFront will copy and caches your files when it necessary. And that means a lot tps sImedium.comi@peatiscodinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiowebsite-using-s3-and-Saa4asd... 4/12, ooe2024, on 8 Deploy an Angiar wth 88 ane Clouront| by KtphatSomsak| Medium of cache has been saved. So when you re-upload your content to $3, It might not take effect immediately. There are few ways to fix this. Invalidate the cache. In CloudFront console, under your distribution’s settings. You will have an Invalidations tab. Under this tab you can request CloudFront to clean up its caches. All you need to do is to provide the list of files you need to clean up. For project like Angular. All the files are linked by index.html so basically what you need is to clear them out. (Unless you have some changes files in your assets directory). But this should be pretty straight forward. * Another solution is to separate the $3's root folders into versions. And upload them by versions. Once uploaded you have to fix CloudFront's distribution Origin Path to the correct version. + 83also have Versioning properties which I haven't explored them yet if it would be a good fit to solve this problem or not. Anyway that’s how you can deploy Angular, $3, and CloudFront. ws: s3 Cloudtfront Angular 5 Deploy CIO Written by Kittiphat Srilomsak 153 Followers CTO @ Muze Innovation More from Kittiphat Srilomsak tps sImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiowebsite-using-s3-and-Saa4as4... 5/12, ‘0608/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium 8 5 4 7 a 1 2 4 12 id 10 9 8 7 6 5 l2x8 115 10%4 Gx? 8x0 7x1 Gx2 5x4 4x6 9 55 40 68 OF 7 12 20 524054+55+40463+047+12+20+20+6+16 387 (11 - (387 % 11)) % 10 9 $B Kittiona stiomsak Validate Thai Citizen ID Tehunvsanaaay Vosussmwuyavussimealng Sep3,2021 Wis @1 a ® kitiona sriomsak Typescripts with Redux, & Redux-Thunk Recipe Typescript is the great tools for saving bugs and confusion when it comes to really large project. One may say that Types is a powerful... ntpsifmedium.com/@peatiscodingmere-s-how-easy-tis-o-deploy-an-angular-spa-single-page-app-0s-a-stati-website-using-s3-and-Saaddéd... 6/12 ‘6108/2024, 08:54 Deploy an Angular with $3 ang CloudFront| by Ktiphat Silomsak | Medium Oct 9, 2018 W561 @4 WN Kitiphat srlomsak OAuth wuuairtadia Wiudl Post ilenfiu OAuth hunrdonqwwasunsuas snaavdeuiunsy unto Feb 18,2019 @ 98 sabes =rtpmap:96 4264/9 td) @=rtcp—fb:96 Skee @=rtcp-fb:96 transport-cc Cds matt: Mae eo ee Ca dels te) Mt log ade mere ae ee . Pee Me tee Ld ee ier s aii PS) Ee A hh a=fmtp:97 apt=96 98 1264/90000 pain nha a TT Lae $9 Kittipnat Srtomsak Enough understanding of SDP for switching the Codec tps sImedium.comi@peatiscadinghhere-is-how-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiowebsite-using-s3-and-Saa4as4... 7/12 ‘6108/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium If you end up here. You probably work on WebRTC project and already know what SDP is for. But not to the extent that you can speak in its... Jun 23,2019 W4 C See all from Kittiphat Srilomsak ) Recommended from Medium i239] <> Dy ue eo) Nataton : 1, Subserigtion “ auth — = =—=— (yauthe Cognito : | _! Al—~ eo |B DDB User Table Post Sign-Up trigger © davis Ambros AWS Cognito + AuthO (OIDC) Authentication System Using IAM Authorization Type: Angular, Amplif Allsigned-in users will be assigned an IAM role, while non-signed-in ones will have another role. + Maris wit Ww tps sImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiowebsite-using-s3-and-Saa4a64... 8/12 ‘0608/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium @& Pauialties Connecting Your Domain to AWS S3 Static Website (without using Route 53) n Aris W19 @1 Lists Natural Language Processing 1618 stories - 1186 saves hitpssImedium.comi@peatiscadinghhere-is-now-easy-its-to-deploy-an-angular-spa-single-page-app-as-a-statiowebste-using-s3-and-Saa4464.. 9/12 ‘0608/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium Software Development Engineer Mar. 2020 ~ May 2021 + Developed Amazon checkout and payment serviees to handle traffic of 10 Million daily global transactions + Integrated Ifames for credit cards and bank accounts to secure 80% of all consumer taflic and prevent CSRF, srostsite scripting, and cookie-jacking + Led Your Transections implementation for JavaScript front-end framework to shawcase consumer transactions and reduce call center costs by $25 Million + Recovered Saud: Arabia checkout failure impacting 4000+ customers due to incorrect GET form redirection Projects NinjaPrep.io (React) + Platform to offer coding problem practice with buil in code editor and writen + video solutions in React * Utilized Nainx to reverse proxy IP address on Digital Ocean hosts veloped using Styled-Componeats for 95% CSS styling o ensure proper CSS scoping + Implemented Docker with Seczomp to safely run user submitted code with <2.2s runtime HeatMap (JavaScript) + Visualized Google Takeout location data of location histary using Google Maps API and Google Maps heatmap code with React + Included local file system storage to relisbly handle Smb of location history data + Implemented Express to include routing between pages and jQuery to parse Google Map and implement laeatmap overlay @ Alexander Nguyen in Level Up Coding The resume that got a software engineer a $300,000 job at Google. ‘1-page. Well-formatted. + Junt Wek @ 258 w AWS Cloud ane ane | SaBucket 4 Distribution L & Roger Nem Hosting my Static Website in an AWS S3 Bucket + CloudFront + Route 53 Serving end-users with Amazon Route 53 — Final Part May 21 ti ntpsifmedium.com/@peaiscodingmere-s-how-easy-tis-o-deploy-an-angular-spa-single-page-app-0s-a-stati-website-using-s3-and-6aa446... 10/12 ‘6108/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Kitiphat Silomsak | Medium {Bartha Tennakoon Lambda Function URLs Vs API Gateway Lambda Function URLs Vs API Gateway Comparison Jul22 Ws @ Poitope Bazara Deploying a website on S3 served by Cloudfront using AWS CDK Increasing security and productivity through Amazon Cloudfront Origin Access Identity with example in TypeScript and the AWS CDK tps sImedium.comi@peatiscadingihere-is-how-easy-is-to-leploy-an-angular-spa-single-page-app-2s-2-statiowebsite-using-s3-and-Saad46d we ‘6108/2024, 08:54 Deploy an Angular with $3 and CloudFront| by Ktiphat Silomsak | Medium + Marts ws ti C ‘See more recommendations ) ntpsifmedium.com/@peaiscodingmere-s-how-easy-tis-o-deploy-an-angular-spa-single-page-app-0s-a-stati-website-using-s3-and-baad46... 12/12

You might also like