{"id":1294,"date":"2020-04-03T11:53:30","date_gmt":"2020-04-03T09:53:30","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=1294"},"modified":"2021-03-24T12:32:49","modified_gmt":"2021-03-24T11:32:49","slug":"how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/","title":{"rendered":"How to make a fully automated CD pipeline for an Angular frontend application"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">We have already written about <strong>Continuous Delivery\/Continuous Integration<\/strong> several times, most of them mainly focused on the backend part of an application. Of course, web applications also require a <strong>front-end<\/strong>, thus, making the deployment process of the front-end <strong>agile and fast<\/strong> is crucial for the success of a project.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we want to bring you the <strong>complete project<\/strong> for an AWS infrastructure to host an <strong>Angular application<\/strong>, complete with a CDN, a custom function to invalidate the cache and a fully <strong>automated CD pipeline<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This project aims to fulfill the best practices and will provide a robust, highly scalable and fully managed solution for the hosting of front-end applications on AWS. This is also the most <strong>cost-optimized<\/strong> solution we have found so far, allowing you to serve your static content in a very reliable, performant and cheap way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our architecture is logically partitioned in 2 parts, the customer-facing hosting, and the developer-facing Continuous Delivery infrastructure.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The services<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For the hosting, we will use the following AWS services:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">An <strong>S3 Bucket<\/strong> to store all the front-end files<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A <strong>CloudFront Distribution<\/strong> to serve the bucket content to final users<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Route53<\/strong> to configure and use a custom domain for the application<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The developer-facing infrastructure will be made using:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodeDeploy<\/strong> as private Git repository<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodePipeline<\/strong> as an <strong>orchestrator<\/strong> for the CD pipeline<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodeBuild<\/strong> to provide the computing environment required to perform the angular build<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A custom <strong>Lambda function<\/strong> to create an invalidation for CloudFront at each deploy<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">The architecture<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1295\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture.png\" alt=\"architecture\" width=\"1600\" height=\"900\" srcset=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture.png 1600w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-400x225.png 400w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-1024x576.png 1024w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-768x432.png 768w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-1536x864.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The diagram above shows the complete infrastructure, it also shows the triggers and the action taken during the pipeline execution.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The customer-facing hosting is based on CloudFront, which allows us to serve the Angular application in a very efficient and reliable way. Using CloudFront is also required to enable <strong>HTTPS<\/strong> for our front-end application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The compiled assets of the front-end application will be stored inside an S3 Bucket, used as an origin for the CloudFront distribution. We strongly advise keeping the S3 Bucket private, in this way no external user will be able to directly access the files on S3, limiting costs and possibilities of exploits.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We included Route53 in the architecture because it\u2019s the most straightforward way to manage DNS records for the domain, anyway, any DNS service would do, as long as you can add a CNAME record for your front-end application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The real interesting part of the architecture is the <strong>developer-facing<\/strong> one. The core of the solution is CodePipeline, which we use as an orchestrator to react to changes made in the repository and pass the data between all the services used during the pipeline execution.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We also used CodeCommit as a repository for the application code. At the time of writing, CodePipeline supports CodeCommit and GitHub. In order to support other Git repo configurations, <strong>further customization<\/strong> would be needed.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In order to build the angular solution, we leverage CodeBuild to automatically provision a container for the build process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To speed up the deploy and avoid waiting for the expiration of each object in the CDN, we included an<strong> Invoke step<\/strong> at the end of the pipeline to run a Lambda Function which creates an invalidation request for the CloudFront Distribution.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The pipeline steps<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Our pipeline will be composed of 4 steps, let\u2019s break down the pipeline mechanism.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Source<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This step is fully managed by AWS CodePipeline. The step is configured to automatically start the pipeline when a push is detected in a specific branch, download the source code, make an archive and send it as an artifact for the next step.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Build<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The build step needs the source code artifact from the previous step as an input.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CodeBuild will then provision a container for the build, download the source code and execute the commands contained in the buildspec.yml file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The yml file must be stored in the root of the repository.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here a sample <strong>buildspec.yml<\/strong> file for a standard Angular application:<\/span><\/p>\n<pre>version: '0.2'\r\nphases:\r\n  install:\r\n    runtime-versions:\r\n      nodejs: 12\r\n  pre_build:\r\n    commands:\r\n      - echo \"Prebuild, installing npm dependencies\"\r\n      - npm install\r\n  build:\r\n    commands:\r\n      - echo \"Starting the build step\"\r\n      - npm run build\r\n      - echo \"Finished\"\r\nartifacts:\r\n  name: \"BuildOutput\"\r\n  files:\r\n    - '**\/*'\r\n  base-directory: 'dist'\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">The output of the build process is an archive of the files and folders contained in the dist folder.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Deploy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The deploy step is also completely managed, CodePipeline will unpack and copy to S3 all the files and folders of the build output archive.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the time of writing, this step is not able to delete files from S3, usually, this is not a problem given the structure of a standard Angular application. However, keep in mind that if you want to delete a file from the website you have to add a step to empty the bucket before deploying or deleting it after the deploy with another step.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">CloudFront Invalidation<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The last step of the pipeline invokes a Lambda function to create an invalidation for the CloudFront distribution, allowing our users to obtain the updated version of the applications in few minutes after the deploy, instead of wait for objects expirations in each CDN node, which may occur at different times.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The lambda function can use the AWS SDK to create the invalidation. This function also needs to notify CodePipeline whenever it encounters errors or finishes with success using a specific CodePipeline API. Here an example lambda to completely invalidate a CloudFront distribution and then notify to CodePipeline the result:<\/span><\/p>\n<pre>import boto3\r\nimport os\r\n \r\nfrom botocore.exceptions import ClientError\r\n \r\ncloudfront_client = boto3.client('cloudfront')\r\ncodepipeline_client = boto3.client('codepipeline')\r\n \r\n \r\ndef lambda_handler(event, context):\r\n   try:\r\n       cdn_id = os.environ[\"CDN\"]\r\n       cloudfront_client.create_invalidation(\r\n           DistributionId=cdn_id,\r\n           InvalidationBatch={\r\n               'Paths': {\r\n                   'Quantity': 1,\r\n                   'Items': [\r\n                       '\/*'\r\n                   ],\r\n               },\r\n               'CallerReference': event['CodePipeline.job']['id']\r\n           }\r\n       )\r\n \r\n       codepipeline_client.put_job_success_result(jobId=event['CodePipeline.job']['id'])\r\n   except ClientError as e:\r\n       print(\"Boto3 exception\", e)\r\n       codepipeline_client.put_job_failure_result(\r\n           jobId=event['CodePipeline.job']['id'],\r\n           failureDetails={\r\n               'type': 'JobFailed',\r\n               'message': e.response\r\n           })\r\n   except Exception as e:\r\n       print(\"Error\", e)\r\n       codepipeline_client.put_job_failure_result(\r\n           jobId=event['CodePipeline.job']['id'],\r\n           failureDetails={\r\n               'type': 'JobFailed',\r\n               'message': e.args\r\n           })\r\n<\/pre>\n<h2><span style=\"font-weight: 400;\">How to build the solution<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The following is a list of operations to follow in order to build the solution. Please note that this is not a copy and paste tutorial, it gives you the right order for each operation and an insight into what to do.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Before starting, make sure to have your source code in a CodeCommit repository and to have full access to the account to create and configure each service of the solution.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">First, you need to create a private S3 Bucket for the front-end.\u00a0<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Follow the wizard, be sure to select the options to make the bucket private.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Choosing the bucket name as the FQDN is not required because we will serve the content using CloudFront<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create a CloudFront distribution.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select the Bucket created in the first step as the origin.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Check the option to allow CloudFront to manage the bucket policy on your behalf, in this way the wizard will create a perfectly safe and valid policy for your bucket to allow the distribution to serve your content keeping the bucket private at the same time.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Redirect all errors to the index page, this is crucial for Angular router to work.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>NOTE:<\/b><span style=\"font-weight: 400;\"> If you are not creating the infrastructure in the us-east-1 region, please wait up to 2 hours before testing it. This is due to how the DNS propagation works in AWS at the time of this writing, a freshly created S3 bucket in any region different from us-east-1 will cause a temporary redirect that will break the s3 cloudfront integration.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create the Lambda function to invalidate the CDN.\u00a0<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can copy and paste the code of the example above.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you use the example code, add an environment variable called \u201cCDN\u201d and set it with the CloudFront distribution id.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure to create a new IAM Role for the function, with all the permissions of the BasicLambdaExecution role, plus:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">cloudfront:CreateInvalidatio<\/span><span style=\"font-weight: 400;\">n on the CloudFront distribution<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">codepipeline:PutJobSuccessResult<\/span><span style=\"font-weight: 400;\"> on *<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">codepipeline:PutJobFailureResult<\/span><span style=\"font-weight: 400;\"> on *<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Take note of the Lambda function name and ARN for later.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create a new CodePipeline<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Follow the wizard and add the source step, select your CodeCommit repository and the desired git branch<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a build stage, create a new CodeBuild project following the wizard<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select a standard Ubuntu image<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create or select a standard CodeBuild service role<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Leave all the defaults and continue<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a deploy step<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select S3 deploy\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Follow the wizard to configure it to push the build output on your front-end bucket<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Finally, add the last step, choose Invoke -&gt; AWS Lambda<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fill out the form, and select the Lambda function created in the previous step<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Leave all the parameters on their default value<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Complete the pipeline creation, and test it. The pipeline should start as soon as you hit the save button.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Congratulations! You completed the deploy of the solution! You should now have a fully functional Angular hosting, complete with a continuous delivery pipeline.<\/span><\/p>\n<p class=\"graf graf--p\">Still curious about <strong class=\"markup--strong markup--p-strong\">Continuous Delivery\/Continuous Integration?\u00a0<\/strong><\/p>\n<p class=\"graf graf--p\">Read also:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/blog.besharp.it\/en\/how-to-create-flexible-ci-cd-pipeline-on-aws-with-fargate-and-sqs\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/blog.besharp.it\/en\/how-to-create-flexible-ci-cd-pipeline-on-aws-with-fargate-and-sqs\/\">How to create flexible CI\/CD Pipeline on AWS with Fargate and SQS<\/a><\/li>\n<li class=\"graf graf--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/blog.besharp.it\/en\/how-to-create-and-maintain-an-aws-serverless-infrastructure-with-troposphere-and-codepipeline\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/blog.besharp.it\/en\/how-to-create-and-maintain-an-aws-serverless-infrastructure-with-troposphere-and-codepipeline\/\">How to create and maintain an AWS serverless infrastructure with Troposphere and CodePipeline<\/a><\/li>\n<li class=\"graf graf--li\"><a class=\"markup--anchor markup--li-anchor\" href=\"https:\/\/blog.besharp.it\/pipelines-di-cd-ci-cross-account-con-aws-codepipeline\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/blog.besharp.it\/pipelines-di-cd-ci-cross-account-con-aws-codepipeline\/\">Pipelines di CD\/CI cross-account con AWS CodePipeline<\/a> (English coming soon!)<\/li>\n<\/ul>\n<p class=\"graf graf--p\">Leave a comment or <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.besharp.it\/en\/contact-us\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.besharp.it\/en\/contact-us\/\">contact us<\/a> for questions or suggestions!<\/p>\n<p class=\"graf graf--p\">See you\u00a0\ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have already written about Continuous Delivery\/Continuous Integration several times, most of them mainly focused on the backend part of [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":1297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[242],"tags":[290,276,292,294,286,264,365,298,296,300],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to make a fully automated CD pipeline for an Angular frontend application - Proud2beCloud Blog<\/title>\n<meta name=\"description\" content=\"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make a fully automated CD pipeline for an Angular frontend application\" \/>\n<meta property=\"og:description\" content=\"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Proud2beCloud Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-03T09:53:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-24T11:32:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\" \/>\n\t<meta property=\"og:image:width\" content=\"834\" \/>\n\t<meta property=\"og:image:height\" content=\"625\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alessio Gandini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to make a fully automated CD pipeline for an Angular frontend application\" \/>\n<meta name=\"twitter:description\" content=\"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alessio Gandini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/\",\"url\":\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/\",\"name\":\"How to make a fully automated CD pipeline for an Angular frontend application - Proud2beCloud Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.besharp.it\/#website\"},\"datePublished\":\"2020-04-03T09:53:30+00:00\",\"dateModified\":\"2021-03-24T11:32:49+00:00\",\"author\":{\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43\"},\"description\":\"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.besharp.it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make a fully automated CD pipeline for an Angular frontend application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.besharp.it\/#website\",\"url\":\"https:\/\/blog.besharp.it\/\",\"name\":\"Proud2beCloud Blog\",\"description\":\"il blog di beSharp\",\"alternateName\":\"Proud2beCloud Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.besharp.it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43\",\"name\":\"Alessio Gandini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.besharp.it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g\",\"caption\":\"Alessio Gandini\"},\"description\":\"Cloud-native Development Line Manager @ beSharp, DevOps Engineer e AWS expert. Computer geek da quando avevo 6 anni, appassionato di informatica ed elettronica a tutto tondo. Ultimamente sto esplorando l'esperienza utente vocale e il mondo dell'IoT. Appassionato di cinema e grande consumatore di serie TV, videogiocatore della domenica.\",\"url\":\"https:\/\/blog.besharp.it\/author\/alessio-gandini\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make a fully automated CD pipeline for an Angular frontend application - Proud2beCloud Blog","description":"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/","og_locale":"en_US","og_type":"article","og_title":"How to make a fully automated CD pipeline for an Angular frontend application","og_description":"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.","og_url":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/","og_site_name":"Proud2beCloud Blog","article_published_time":"2020-04-03T09:53:30+00:00","article_modified_time":"2021-03-24T11:32:49+00:00","og_image":[{"width":834,"height":625,"url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","type":"image\/png"}],"author":"Alessio Gandini","twitter_card":"summary_large_image","twitter_title":"How to make a fully automated CD pipeline for an Angular frontend application","twitter_description":"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.","twitter_image":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","twitter_misc":{"Written by":"Alessio Gandini","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/","url":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/","name":"How to make a fully automated CD pipeline for an Angular frontend application - Proud2beCloud Blog","isPartOf":{"@id":"https:\/\/blog.besharp.it\/#website"},"datePublished":"2020-04-03T09:53:30+00:00","dateModified":"2021-03-24T11:32:49+00:00","author":{"@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43"},"description":"An AWS infrastructure hosting an Angular application, with a CDN, a custom function to invalidate the cache and a fully automated CD pipeline.","breadcrumb":{"@id":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.besharp.it\/how-to-make-a-fully-automated-cd-pipeline-for-an-angular-frontend-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.besharp.it\/"},{"@type":"ListItem","position":2,"name":"How to make a fully automated CD pipeline for an Angular frontend application"}]},{"@type":"WebSite","@id":"https:\/\/blog.besharp.it\/#website","url":"https:\/\/blog.besharp.it\/","name":"Proud2beCloud Blog","description":"il blog di beSharp","alternateName":"Proud2beCloud Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.besharp.it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43","name":"Alessio Gandini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.besharp.it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g","caption":"Alessio Gandini"},"description":"Cloud-native Development Line Manager @ beSharp, DevOps Engineer e AWS expert. Computer geek da quando avevo 6 anni, appassionato di informatica ed elettronica a tutto tondo. Ultimamente sto esplorando l'esperienza utente vocale e il mondo dell'IoT. Appassionato di cinema e grande consumatore di serie TV, videogiocatore della domenica.","url":"https:\/\/blog.besharp.it\/author\/alessio-gandini\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts\/1294"}],"collection":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/comments?post=1294"}],"version-history":[{"count":0,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/posts\/1294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/media\/1297"}],"wp:attachment":[{"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/media?parent=1294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/categories?post=1294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.besharp.it\/wp-json\/wp\/v2\/tags?post=1294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}