{"id":9423,"date":"2023-07-05T10:52:47","date_gmt":"2023-07-05T10:52:47","guid":{"rendered":"https:\/\/lng-consultancy.com\/staging\/5474\/?p=9423"},"modified":"2023-07-05T10:52:47","modified_gmt":"2023-07-05T10:52:47","slug":"automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs","status":"publish","type":"post","link":"https:\/\/lng-consultancy.com\/staging\/5474\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/","title":{"rendered":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS"},"content":{"rendered":"<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AFEgCqF97VYBK2a51g0UyVA.png?ssl=1\" data-image-id=\"1*FEgCqF97VYBK2a51g0UyVA.png\" data-width=\"1652\" data-height=\"990\" \/><\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Overview<\/strong><\/p>\n<p class=\"graf graf--p\">To set the expectations of the readers, first of all, this article is meant for developers\/technical managers, who are beginners in AWS and want to automate React JS application\u2019s deployment by using AWS CodePipeline.<\/p>\n<blockquote>\n<p class=\"graf graf--p\">This article is meant to provide instructions for setting up only development and test environments, pipelines. Please do not follow the steps mentioned in this article for setting up production environments\/pipelines.<\/p>\n<\/blockquote>\n<p><strong>What is AWS Elastic Beanstalk?<\/strong><\/p>\n<p>Elastic Beanstalk is a fully managed service provided within AWS which facilitates management of deployment of the various types of applications. Following is a short description from AWS docs:<\/p>\n<blockquote><p>With Elastic Beanstalk, you can quickly deploy and manage applications in the AWS Cloud without having to learn about the infrastructure that runs those applications. Elastic Beanstalk reduces management complexity without restricting choice or control. You simply upload your application, and Elastic Beanstalk automatically handles the details of capacity provisioning, load balancing, scaling, and application health monitoring.<\/p><\/blockquote>\n<p><strong>What is AWS CodePipeline?<\/strong><\/p>\n<p>AWS CodePipeline is a continuous delivery service you can use to model, visualize, and automate the steps required to release your software. You can quickly model and configure the different stages of a software release process. CodePipeline automates the steps required to release your software changes continuously.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Let\u2019s get started with the practical<\/strong><\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Prerequisites:<\/strong><\/p>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">AWS Account<\/li>\n<li class=\"graf graf--li\">React JS Application<\/li>\n<\/ol>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Steps:<\/strong><\/p>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">Create an application in Elastic beanstalk.<\/li>\n<li class=\"graf graf--li\">Create an environment.<\/li>\n<li class=\"graf graf--li\">Create pipeline via CodePipeline.<\/li>\n<\/ol>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Create an application in Elastic Beanstalk:<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Login to AWS and navigate to Elastic Beanstalk.<\/li>\n<li class=\"graf graf--li\">Click on \u201cCreate Applications\u201d in Applications menu.<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AcHFgn-GEwA3ZEhbnIKa3UA.png?ssl=1\" data-image-id=\"1*cHFgn-GEwA3ZEhbnIKa3UA.png\" data-width=\"3231\" data-height=\"1733\" \/><\/figure>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Fill in the Application name. Rest of the details are optional. Click \u201cCreate\u201d button.<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Create an environment:<\/strong><\/p>\n<ul>\n<li class=\"graf graf--p\">On the next page, click on \u201cCreate Environment\u201d.<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2APU9L7nQ8eHutW6OOXS6zuQ.png?ssl=1\" data-image-id=\"1*PU9L7nQ8eHutW6OOXS6zuQ.png\" data-width=\"2722\" data-height=\"1242\" \/><\/figure>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Select \u201cWeb server environment\u201d in Environment Tier section.<\/li>\n<li class=\"graf graf--li\">In \u201cEnvironment information\u201d section, mention environment name. This name should be relevant to your application.<\/li>\n<li class=\"graf graf--li\">In Domain, enter the name, if you want to have a custom name, leave blank otherwise. An autogenerated domain name will be mapped to your environment.<\/li>\n<\/ul>\n<blockquote><p>Please note that at this stage, its not possible to map your own custom domain\/sub-domain. This can be done later once the environment has been created. By default, every environment in EBS gets assigned an elastic IP Address. This IP address can be mapped to your A record in DNS settings for your domain.<\/p><\/blockquote>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Under \u201cPlatform\u201d section, keep default option for Platform type which is \u201cManaged platform\u201d.<\/li>\n<li class=\"graf graf--li\">Select Node.js in \u201cPlatform\u201d drop down.<\/li>\n<li class=\"graf graf--li\">You can keep the default values in the remaining two drop-downs in this section. It should look like this:<\/li>\n<\/ul>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"graf-image aligncenter\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AEwag85L9xOGGM4FqvEDOlA.png?resize=700%2C405&ssl=1\" width=\"700\" height=\"405\" data-image-id=\"1*Ewag85L9xOGGM4FqvEDOlA.png\" data-width=\"2354\" data-height=\"1364\" \/><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">In \u201cApplication code\u201d section, select \u201cSample application\u201d. Let EBS create and deploy a sample application. We will setup our react app by using CodePipeline later.<\/li>\n<li class=\"graf graf--li\">Keep default option in \u201cPresets\u201d section unless you know what to select here.<\/li>\n<li class=\"graf graf--li\">On next page, in \u201cService access\u201d, click on \u201cCreate and use new service role\u201d. Enter the name and corresponding service role will automatically be created. It will also assign required permissions to this role.<\/li>\n<li class=\"graf graf--li\">In \u201cEC2 key pair\u201d, select if you already have a key pair, otherwise please follow the below mentioned link to create a new EC2 key pair. This key pair can be used later to connect to the underlying EC2 instance (Every environment in EBS will spin up a new EC2 instance by default).<\/li>\n<\/ul>\n<p><a href=\"https:\/\/docs.aws.amazon.com\/AWSEC2\/latest\/UserGuide\/ec2-key-pairs.html#having-ec2-create-your-key-pair\">https:\/\/docs.aws.amazon.com\/AWSEC2\/latest\/UserGuide\/ec2-key-pairs.html#having-ec2-create-your-key-pair<\/a><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Please select \u201cEC2 instance profile\u201d, if you already have one otherwise follow these steps to create a new instance profile:<br \/>\n\u2013 Navigate to IAM>Roles page in AWS.<br \/>\n\u2013 Click \u201cCreate role\u201d.<br \/>\n\u2013 Select \u201cAWS Service\u201d in \u201cTrusted entity type\u201d section.<br \/>\n\u2013 Select \u201cEC2\u201d in \u201cUse case\u201d section and click \u201cNext\u201d<br \/>\n\u2013 Assign following \u201cPermissions policies\u201d:<br \/>\n<em class=\"markup--em markup--li-em\">AWSElasticBeanstalkWebTier<br \/>\nAWSElasticBeanstalkWorkerTier<br \/>\nAWSElasticBeanstalkMulticontainerDocker<br \/>\nAWSElasticBeanstalkEnhancedHealth<br \/>\nAWSElasticBeanstalkRoleWorkerTier<br \/>\nAWSElasticBeanstalkManagedUpdatesCustomerRolePolicy<br \/>\n<\/em>\u2013 Specify Role name and click on \u201cCreate role\u201d<\/li>\n<\/ul>\n<ul>\n<li>Now click on refresh button to refresh the drop-down option and choose the newly created instance profile role.<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image aligncenter\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2A7yhSpGndFlZORSE3RWp3OA.png?ssl=1\" data-image-id=\"1*7yhSpGndFlZORSE3RWp3OA.png\" data-width=\"2303\" data-height=\"1667\" \/><\/figure>\n<ul>\n<li>Leave the default options selected on the next few pages (Unless you know what to select) until \u201cReview\u201d page is displayed. Click \u201cSubmit\u201d button and wait unless the new environment is created.<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Create pipeline via CodePipeline:<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Once the environment is created, navigate to \u201cCodePipeline\u201d and click \u201cCreate pipeline\u201d.<\/li>\n<li class=\"graf graf--li\">Enter the name and select \u201cNew service role\u201d. Click Next.<\/li>\n<li class=\"graf graf--li\">Select \u201cSource Provider\u201d. This is your source code provider. I am using GitHub so I selected GitHub (Version 2). Here you can create connection to your source provider, choose repository to let CodePipeline pull source code from, choose branch name.<\/li>\n<li class=\"graf graf--li\">Leave remaining sections to default values and go to next page.<\/li>\n<li class=\"graf graf--li\">Here we can skip \u201cBuild provider\u201d. CodePipeline will automatically detect the react app and create a Procfile.<\/li>\n<\/ul>\n<blockquote class=\"graf graf--blockquote\"><p>Please note the build provider should only be skipped if you are setting up a Dev\/Test pipeline. For production versions, you should choose the build provider and set it up accordingly. Production pipeline is out of scope for this article.<\/p><\/blockquote>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">On the next page, select \u201cAWS Elastic Beanstalk\u201d as a deploy provider. Select newly created Application and its environment in the dropdowns:<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AKoLVKF6-wfklF1Q0xKRq0g.png?ssl=1\" data-image-id=\"1*KoLVKF6-wfklF1Q0xKRq0g.png\" data-width=\"2401\" data-height=\"1340\" \/><\/figure>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Go to next page and click on \u201cCreate pipeline\u201d. Wait until the pipeline is created. It will start the pipeline automatically first time. Source code will be pulled from the selected repository\/branch and deployment will be triggered. Once deployment is successful, your page should look like this:<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AtTPysQhupxrkwyvFx9O94A.png?ssl=1\" data-image-id=\"1*tTPysQhupxrkwyvFx9O94A.png\" data-width=\"2689\" data-height=\"1903\" \/><\/figure>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Congratulations! React app has been successfully deployed now. You can navigate to your environment and see the app running:<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/2400\/1%2AKtOrvWsfIDTKk1cVhZKZgA.png?ssl=1\" data-image-id=\"1*KtOrvWsfIDTKk1cVhZKZgA.png\" data-width=\"3822\" data-height=\"2098\" \/><\/figure>\n<p class=\"graf graf--p\">Now, every time there is a new commit in the selected branch, CodePipeline will trigger a new build and deployment. You can also setup notifications for CodePipeline events and stages.<\/p>\n<p><strong class=\"markup--strong markup--blockquote-strong\">Debugging<\/strong><\/p>\n<p>If for some reason, your app does not run. You can always connect to the EC2 instance created by Elastic Beanstalk. You can use the Keypair generated while creating the environment in EBS. Once connected to EC2 instance, go to \/var\/app\/current to see the deployed files for your app.<\/p>\n<p>EBS does maintain basic logs and health checks for the environments. So, if you want to check logs, you can navigate to the environment and download all the logs for debugging.<\/p>\n<p><strong><em>Thank You!!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview To set the expectations of the readers, first of all, this article is meant for developers\/technical managers, who are beginners in AWS and want to automate React JS application\u2019s deployment by using AWS CodePipeline. This article is meant to provide instructions for setting up only development and test environments, pipelines. Please do not follow [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,5],"tags":[138,139,137,136],"class_list":["post-9423","post","type-post","status-publish","format-standard","hentry","category-development","category-technology","tag-automate-reach-js-deployment","tag-aws","tag-aws-codepipeline","tag-aws-elastic-beanstalk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy\" \/>\n<meta property=\"og:description\" content=\"Overview To set the expectations of the readers, first of all, this article is meant for developers\/technical managers, who are beginners in AWS and want to automate React JS application\u2019s deployment by using AWS CodePipeline. This article is meant to provide instructions for setting up only development and test environments, pipelines. Please do not follow [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/\" \/>\n<meta property=\"og:site_name\" content=\"L&amp;G Consultancy\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-05T10:52:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png\" \/>\n<meta name=\"author\" content=\"Charanpreet Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Charanpreet Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/\"},\"author\":{\"name\":\"Charanpreet Singh\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5dc3b323c5f0797bdc776ae36267fda4\"},\"headline\":\"Automate deployment (CI\\\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS\",\"datePublished\":\"2023-07-05T10:52:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/\"},\"wordCount\":1040,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn-images-1.medium.com\\\/max\\\/2400\\\/1*FEgCqF97VYBK2a51g0UyVA.png\",\"keywords\":[\"automate reach js deployment\",\"aws\",\"aws codepipeline\",\"aws elastic beanstalk\"],\"articleSection\":[\"Development\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/\",\"url\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/\",\"name\":\"Automate deployment (CI\\\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn-images-1.medium.com\\\/max\\\/2400\\\/1*FEgCqF97VYBK2a51g0UyVA.png\",\"datePublished\":\"2023-07-05T10:52:47+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5dc3b323c5f0797bdc776ae36267fda4\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn-images-1.medium.com\\\/max\\\/2400\\\/1*FEgCqF97VYBK2a51g0UyVA.png\",\"contentUrl\":\"https:\\\/\\\/cdn-images-1.medium.com\\\/max\\\/2400\\\/1*FEgCqF97VYBK2a51g0UyVA.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lng-consultancy.com\\\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lng-consultancy.com\\\/staging\\\/5474\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automate deployment (CI\\\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#website\",\"url\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/\",\"name\":\"L&amp;G Consultancy\",\"description\":\"Your Technology Partner\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5dc3b323c5f0797bdc776ae36267fda4\",\"name\":\"Charanpreet Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g\",\"caption\":\"Charanpreet Singh\"},\"url\":\"https:\\\/\\\/lng-consultancy.com\\\/staging\\\/5474\\\/author\\\/charanpreetsingh83\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy","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:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/","og_locale":"en_US","og_type":"article","og_title":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy","og_description":"Overview To set the expectations of the readers, first of all, this article is meant for developers\/technical managers, who are beginners in AWS and want to automate React JS application\u2019s deployment by using AWS CodePipeline. This article is meant to provide instructions for setting up only development and test environments, pipelines. Please do not follow [&hellip;]","og_url":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/","og_site_name":"L&amp;G Consultancy","article_published_time":"2023-07-05T10:52:47+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png","type":"","width":"","height":""}],"author":"Charanpreet Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Charanpreet Singh","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#article","isPartOf":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/"},"author":{"name":"Charanpreet Singh","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5dc3b323c5f0797bdc776ae36267fda4"},"headline":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS","datePublished":"2023-07-05T10:52:47+00:00","mainEntityOfPage":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/"},"wordCount":1040,"commentCount":0,"image":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png","keywords":["automate reach js deployment","aws","aws codepipeline","aws elastic beanstalk"],"articleSection":["Development","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/","url":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/","name":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS - L&amp;G Consultancy","isPartOf":{"@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#primaryimage"},"image":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png","datePublished":"2023-07-05T10:52:47+00:00","author":{"@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5dc3b323c5f0797bdc776ae36267fda4"},"breadcrumb":{"@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2400\/1*FEgCqF97VYBK2a51g0UyVA.png"},{"@type":"BreadcrumbList","@id":"https:\/\/lng-consultancy.com\/automate-deployment-ci-cd-of-react-js-application-in-aws-by-using-codepipeline-and-ebs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lng-consultancy.com\/staging\/5474\/"},{"@type":"ListItem","position":2,"name":"Automate deployment (CI\/CD) of React JS application in AWS by using CodePipeline and\u00a0EBS"}]},{"@type":"WebSite","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#website","url":"http:\/\/sh024.global.temp.domains\/~landgcon\/","name":"L&amp;G Consultancy","description":"Your Technology Partner","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/sh024.global.temp.domains\/~landgcon\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5dc3b323c5f0797bdc776ae36267fda4","name":"Charanpreet Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60f39e431ff12acc271104a91c55cf1c75285d9be16fe4a8db4ac997fa1b4e7e?s=96&d=mm&r=g","caption":"Charanpreet Singh"},"url":"https:\/\/lng-consultancy.com\/staging\/5474\/author\/charanpreetsingh83\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/9423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/comments?post=9423"}],"version-history":[{"count":5,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/9423\/revisions"}],"predecessor-version":[{"id":9429,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/9423\/revisions\/9429"}],"wp:attachment":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/media?parent=9423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/categories?post=9423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/tags?post=9423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}