{"id":3592,"date":"2024-05-22T08:38:48","date_gmt":"2024-05-22T07:38:48","guid":{"rendered":"https:\/\/www.easydeploy.io\/blog\/?p=3592"},"modified":"2024-05-23T12:35:20","modified_gmt":"2024-05-23T11:35:20","slug":"setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2","status":"publish","type":"post","link":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/","title":{"rendered":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2"},"content":{"rendered":"<h1>Introduction<\/h1>\n<p>In this article, we are going to cover a <strong>setup CICD pipeline using GitHub action &#8211; Github action <\/strong>is an automation tool provided by GitHub that allows you to automate workflows directly within your GitHub repository. With GitHub Actions, you can build, test, and deploy your code right from your repository, enabling continuous integration (CI) and continuous deployment (CD) pipelines.<br \/>\nGitHub Actions are YAML files in `.github\/workflows` that trigger automation when events like code pushes or pull requests occur, enabling customized automated processes for your project<strong>.<br \/>\n<\/strong><\/p>\n<p>If you would like to follow a video tutorial please use our YouTube video.<\/p>\n<div class=\"wpex-responsive-embed\"><iframe loading=\"lazy\" title=\"Hands-on: Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-t9XF9CZD5U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h1>Prerequisites<\/h1>\n<ul>\n<li>AWS account.<\/li>\n<li>AWS account with full access or Ec2 full access.<\/li>\n<li>ReactJS project hosted in a GitHub repository.<\/li>\n<\/ul>\n<h1>Create an EC2 instance<\/h1>\n<p>Click &gt;&gt; <strong>launch instance<\/strong>, give a &gt;&gt;<strong>name to the instance<\/strong>, choose &gt;<strong>Amazon Linux 3<\/strong><\/p>\n<p>Select &gt;&gt; <strong>your key pair<\/strong>, Select &gt;&gt; <strong>your security group<\/strong> and click &gt;&gt;<strong> launch instance<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h1>Setup GitHub action<\/h1>\n<p>Go to the <strong>project repository<\/strong>, click &gt;&gt; <strong>add file<\/strong>, and click &gt;&gt;<strong> create new file<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1.png\" alt=\"Github\" width=\"1903\" height=\"940\" class=\"aligncenter wp-image-3596 size-full\" title=\"Github repository\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1.png 1903w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1-300x148.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1-1024x506.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1-768x379.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-1-1536x759.png 1536w\" sizes=\"(max-width: 1903px) 100vw, 1903px\" \/><\/p>\n<p>Now type &#8220;<strong>.github\/workflows\/ <\/strong>&#8220;<strong>type any name.yml<\/strong>&#8221; and click <strong>commit changes<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1.png\" alt=\"Github workflow\" width=\"1893\" height=\"940\" class=\"aligncenter wp-image-3717 size-full\" title=\"Github action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1.png 1893w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1-300x149.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1-1024x508.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1-768x381.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3g-1-1536x763.png 1536w\" sizes=\"(max-width: 1893px) 100vw, 1893px\" \/><\/p>\n<p>It will create a GitHub workflow action, now add the script to this file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1.png\" alt=\"Github workflow\" width=\"1870\" height=\"937\" class=\"aligncenter wp-image-3721 size-full\" title=\"Github actions yaml script\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1.png 1870w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1-1024x513.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1-768x385.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4g-1-1536x770.png 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\" \/><\/p>\n<p>To reference my YAML script, please consult the file<strong> github-ec2.yml<\/strong> located in the root directory of this repository: <a href=\"https:\/\/github.com\/easydeploy-cloud\/cicd-github-ec2\">https:\/\/github.com\/easydeploy-cloud\/cicd-github-ec2<\/a><\/p>\n<h1>Add values in the GitHub secrets<\/h1>\n<p>Go to &gt;&gt; <strong>GitHub repository<\/strong>, click &gt;&gt;<strong> settings<\/strong><\/p>\n<p>On the left side, select &gt;&gt; <strong>secrets and variables<\/strong>, and click &gt;&gt; <strong>action<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1.png\" alt=\"Github\" width=\"1674\" height=\"777\" class=\"aligncenter wp-image-3728 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1.png 1674w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1-300x139.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1-1024x475.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1-768x356.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5g-1-1536x713.png 1536w\" sizes=\"(max-width: 1674px) 100vw, 1674px\" \/><\/p>\n<p>Click &gt;&gt; <strong>new repository secret<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g-1024x530.png\" alt=\"Github\" width=\"1024\" height=\"530\" class=\"aligncenter wp-image-3725 size-large\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g-1024x530.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g-300x155.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g-768x397.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g-1536x794.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6g.png 1684w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>In the name, type &gt;&gt; &#8220;<strong>HOST_DNS<\/strong>&#8221; and go back to the instance page copy the public DNS of the created instance, paste in the &gt;&gt;<strong> secret<\/strong> , and click &gt;&gt; <strong>add secret<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g-1024x528.png\" alt=\"Github\" width=\"1024\" height=\"528\" class=\"aligncenter wp-image-3726 size-large\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g-1024x528.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g-300x155.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g-768x396.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g-1536x792.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7g.png 1677w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Now click &gt;&gt; <strong>new repository secret<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1.png\" alt=\"Github\" width=\"1705\" height=\"862\" class=\"aligncenter wp-image-3735 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1.png 1705w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1-300x152.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1-1024x518.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1-768x388.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8g-1-1536x777.png 1536w\" sizes=\"(max-width: 1705px) 100vw, 1705px\" \/><\/p>\n<p>In the name, type &gt;&gt; &#8220;<strong>TARGET_DIR<\/strong>&#8221; and type &gt;&gt; &#8220;<strong>\/home\/ec2-user<\/strong>&#8221; in the secret, It will store the project objects in the ec2-user directory.<\/p>\n<p>click &gt;&gt; add <strong>secret<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1.png\" alt=\"Github\" width=\"1698\" height=\"871\" class=\"aligncenter wp-image-3737 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1.png 1698w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1-300x154.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1-1024x525.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1-768x394.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-1-1536x788.png 1536w\" sizes=\"(max-width: 1698px) 100vw, 1698px\" \/><\/p>\n<p>Now click again &gt;&gt; <strong>new repository secret<\/strong><\/p>\n<p>In the name, type &gt;&gt; &#8220;<strong>USERNAME<\/strong>&#8221; and type &gt;&gt; &#8220;<strong>ec2-user<\/strong>&#8221; in the secret, click &gt;&gt; <strong>add secret<\/strong>.<\/p>\n<p data-wp-editing=\"1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1.png\" alt=\"Github\" width=\"1684\" height=\"814\" class=\"aligncenter wp-image-3744 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1.png 1684w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1-300x145.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1-1024x495.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1-768x371.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10g-1-1536x742.png 1536w\" sizes=\"(max-width: 1684px) 100vw, 1684px\" \/><\/p>\n<p>Now click again &gt;&gt; <strong>new repository secret<\/strong><\/p>\n<p>In the name, type &gt;&gt; &#8220;<strong>EC2_SSH_KEY&#8221;<\/strong>, copy and paste the <strong>key pair<\/strong> values in the <strong>secret<\/strong>, and click <strong>add<\/strong> <strong>secret<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1.png\" alt=\"Github\" width=\"1699\" height=\"820\" class=\"aligncenter wp-image-3751 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1.png 1699w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1-300x145.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1-1024x494.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1-768x371.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11g-1-1536x741.png 1536w\" sizes=\"(max-width: 1699px) 100vw, 1699px\" \/><\/p>\n<p>Now we successfully added all the secrets.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1.png\" alt=\"Github\" width=\"1699\" height=\"831\" class=\"aligncenter wp-image-3755 size-full\" title=\"github secrets and variables\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1.png 1699w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1-1024x501.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1-768x376.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12g-1-1536x751.png 1536w\" sizes=\"(max-width: 1699px) 100vw, 1699px\" \/><\/p>\n<h1>Run the workflow action<\/h1>\n<p>Now we set all the things, go back to the project repository, click &gt;&gt; <strong>action<\/strong><\/p>\n<p>The workflow action has already started, click the &gt;&gt; <strong>workflow<\/strong> <strong>run<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1.png\" alt=\"Github action\" width=\"1701\" height=\"823\" class=\"aligncenter wp-image-3763 size-full\" title=\"Github workflow action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1.png 1701w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1-300x145.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1-1024x495.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1-768x372.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13g-1-1536x743.png 1536w\" sizes=\"(max-width: 1701px) 100vw, 1701px\" \/><\/p>\n<p>Click &gt;&gt; <strong>Re-run jobs<\/strong>, and\u00a0 click &gt;&gt;<strong> Re-run all jobs<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g.png\" alt=\"Github action\" width=\"1692\" height=\"877\" class=\"aligncenter wp-image-3759 size-full\" title=\"Github workflow action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g.png 1692w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g-300x155.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g-1024x531.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g-768x398.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14g-1536x796.png 1536w\" sizes=\"(max-width: 1692px) 100vw, 1692px\" \/><\/p>\n<p>Now the workflow action is running, it takes a few minutes to finish<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1.png\" alt=\"Github action\" width=\"1696\" height=\"859\" class=\"aligncenter wp-image-3765 size-full\" title=\"Github workflow action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1.png 1696w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1-300x152.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1-1024x519.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1-768x389.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15g-1-1536x778.png 1536w\" sizes=\"(max-width: 1696px) 100vw, 1696px\" \/><\/p>\n<p>Now the workflow action has finished the process.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1.png\" alt=\"Github action\" width=\"1683\" height=\"826\" class=\"aligncenter wp-image-3769 size-full\" title=\"Github workflow action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1.png 1683w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1-1024x503.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1-768x377.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16g-1-1536x754.png 1536w\" sizes=\"(max-width: 1683px) 100vw, 1683px\" \/><\/p>\n<h1>Check the instance<\/h1>\n<p>Go back to the <strong>instance page<\/strong>, copy the <strong>public ip<\/strong> of the instance and paste it in the new tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g-1024x493.png\" alt=\"React app\" width=\"1024\" height=\"493\" class=\"aligncenter wp-image-3771 size-large\" title=\"React js on Ec2 instance\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g-1024x493.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g-300x145.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g-768x370.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g-1536x740.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17g.png 1702w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>The react js project is successfully builded and deployed in the ec2 instance<\/p>\n<h1>Check auto trigger deployment<\/h1>\n<p>Now we want to check if the auto trigger is working properly or not! , go to the project repository and change some content on the main page(app.js) and<\/p>\n<p>click &gt;&gt; <strong>commit changes<\/strong><\/p>\n<p>Now the auto trigger is successfully initiated to build and deploy<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1-1024x509.png\" alt=\"Github action\" width=\"1024\" height=\"509\" class=\"aligncenter wp-image-3782 size-large\" title=\"Github auto trigger deployment\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1-1024x509.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1-300x149.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1-768x382.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1-1536x763.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18g-1.png 1696w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>The auto trigger is successfully working and it builds the project and is deployed in the Ec2 instance.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g-1024x509.png\" alt=\"Github actions\" width=\"1024\" height=\"509\" class=\"aligncenter wp-image-3780 size-large\" title=\"Github workflow action\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g-1024x509.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g-300x149.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g-768x381.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g-1536x763.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19g.png 1681w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Go to the instance page and click the refresh button. now the content has changed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1-1024x517.png\" alt=\"React app\" width=\"1024\" height=\"517\" class=\"aligncenter wp-image-3778 size-large\" title=\"React js on Ec2 instance\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1-1024x517.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1-300x152.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1-768x388.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1-1536x776.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20g-1.png 1686w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Setting up a CI\/CD pipeline using GitHub Actions for a ReactJS application hosted on AWS EC2 simplifies and automates the development process. It ensures that code changes are automatically tested, built, and deployed, providing faster and more reliable updates. This integration enhances efficiency, consistency, and scalability, ultimately leading to a smoother and more productive development workflow.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><b><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this article, we are going to cover a setup CICD pipeline using GitHub action &#8211; Github action is an automation tool provided by GitHub that allows you to automate workflows directly within your GitHub repository. With GitHub Actions, you can build, test, and deploy your code right from your repository, enabling continuous integration [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":3786,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io<\/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:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io\" \/>\n<meta property=\"og:description\" content=\"Introduction In this article, we are going to cover a setup CICD pipeline using GitHub action &#8211; Github action is an automation tool provided by GitHub that allows you to automate workflows directly within your GitHub repository. With GitHub Actions, you can build, test, and deploy your code right from your repository, enabling continuous integration [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\" \/>\n<meta property=\"og:site_name\" content=\"easydeploy.io\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-22T07:38:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-23T11:35:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1918\" \/>\n\t<meta property=\"og:image:height\" content=\"1078\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Suryakumar KR\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suryakumar KR\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\"},\"author\":{\"name\":\"Suryakumar KR\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2\"},\"headline\":\"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2\",\"datePublished\":\"2024-05-22T07:38:48+00:00\",\"dateModified\":\"2024-05-23T11:35:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\"},\"wordCount\":682,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png\",\"articleSection\":[\"Amazon Web Services\",\"News\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\",\"name\":\"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png\",\"datePublished\":\"2024-05-22T07:38:48+00:00\",\"dateModified\":\"2024-05-23T11:35:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png\",\"contentUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png\",\"width\":1918,\"height\":1078},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.easydeploy.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#website\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/\",\"name\":\"easydeploy.io\",\"description\":\"A Cloud Architect Company\",\"publisher\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.easydeploy.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\",\"name\":\"EasyDeploy Technologies Pvt Ltd\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png\",\"contentUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png\",\"width\":536,\"height\":100,\"caption\":\"EasyDeploy Technologies Pvt Ltd\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2\",\"name\":\"Suryakumar KR\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g\",\"caption\":\"Suryakumar KR\"},\"sameAs\":[\"https:\/\/easydeploy.io\"],\"url\":\"https:\/\/www.easydeploy.io\/blog\/author\/suryakumar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io","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:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/","og_locale":"en_GB","og_type":"article","og_title":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io","og_description":"Introduction In this article, we are going to cover a setup CICD pipeline using GitHub action &#8211; Github action is an automation tool provided by GitHub that allows you to automate workflows directly within your GitHub repository. With GitHub Actions, you can build, test, and deploy your code right from your repository, enabling continuous integration [&hellip;]","og_url":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/","og_site_name":"easydeploy.io","article_published_time":"2024-05-22T07:38:48+00:00","article_modified_time":"2024-05-23T11:35:20+00:00","og_image":[{"width":1918,"height":1078,"url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png","type":"image\/png"}],"author":"Suryakumar KR","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Suryakumar KR","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#article","isPartOf":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/"},"author":{"name":"Suryakumar KR","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2"},"headline":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2","datePublished":"2024-05-22T07:38:48+00:00","dateModified":"2024-05-23T11:35:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/"},"wordCount":682,"commentCount":0,"publisher":{"@id":"https:\/\/www.easydeploy.io\/blog\/#organization"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png","articleSection":["Amazon Web Services","News"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/","url":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/","name":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2 | easydeploy.io","isPartOf":{"@id":"https:\/\/www.easydeploy.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png","datePublished":"2024-05-22T07:38:48+00:00","dateModified":"2024-05-23T11:35:20+00:00","breadcrumb":{"@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#primaryimage","url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png","contentUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/main.png","width":1918,"height":1078},{"@type":"BreadcrumbList","@id":"https:\/\/www.easydeploy.io\/blog\/setup-ci-cd-pipeline-using-github-actions-for-reactjs-application-hosted-on-aws-ec2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.easydeploy.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Setup CI CD pipeline using GitHub actions for ReactJS application hosted on AWS EC2"}]},{"@type":"WebSite","@id":"https:\/\/www.easydeploy.io\/blog\/#website","url":"https:\/\/www.easydeploy.io\/blog\/","name":"easydeploy.io","description":"A Cloud Architect Company","publisher":{"@id":"https:\/\/www.easydeploy.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.easydeploy.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.easydeploy.io\/blog\/#organization","name":"EasyDeploy Technologies Pvt Ltd","url":"https:\/\/www.easydeploy.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png","contentUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png","width":536,"height":100,"caption":"EasyDeploy Technologies Pvt Ltd"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2","name":"Suryakumar KR","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g","caption":"Suryakumar KR"},"sameAs":["https:\/\/easydeploy.io"],"url":"https:\/\/www.easydeploy.io\/blog\/author\/suryakumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3592"}],"collection":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/comments?post=3592"}],"version-history":[{"count":41,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3592\/revisions"}],"predecessor-version":[{"id":3633,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3592\/revisions\/3633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/media\/3786"}],"wp:attachment":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/media?parent=3592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/categories?post=3592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/tags?post=3592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}