[{"data":1,"prerenderedAt":2155},["ShallowReactive",2],{"/blog/how-to-deploy-react-to-amazon-s3":3,"navigation-en-us":1370,"banner-en-us":1797,"footer-en-us":1807,"blog-post-authors-en-us-Jeremy Wagner":2050,"blog-related-posts-en-us-how-to-deploy-react-to-amazon-s3":2065,"blog-promotions-en-us":2091,"next-steps-en-us":2145},{"id":4,"title":5,"authors":6,"body":8,"category":1350,"date":1351,"description":1352,"extension":1353,"externalUrl":1354,"faq":1354,"featured":1355,"heroImage":1356,"meta":1357,"navigation":1358,"path":1359,"seo":1360,"slug":1364,"stem":1365,"tags":1366,"template":1368,"updatedDate":1354,"__hash__":1369},"blogPosts/en-us/blog/how-to-deploy-react-to-amazon-s3.md","How to deploy a React application to Amazon S3 using GitLab CI/CD",[7],"Jeremy Wagner",{"type":9,"value":10,"toc":1330},"minimark",[11,15,30,38,43,46,83,96,100,103,108,111,119,126,137,140,146,150,157,163,185,191,195,202,218,224,227,233,243,373,381,384,390,394,397,400,419,422,429,435,441,447,453,456,462,466,474,478,487,490,496,514,528,546,558,562,565,582,733,744,748,764,776,791,797,809,812,818,822,839,842,846,852,860,868,872,875,888,926,932,1051,1062,1067,1189,1209,1219,1225,1231,1235,1253,1259,1268,1275,1289,1293,1326],[12,13,14],"p",{},"Amazon S3 has a Static Website Hosting feature which allows you to host a static website directly from an S3 bucket. When you\nhost your website on S3, your website content is stored in the S3 bucket and served directly to your users, without the need\nfor additional resources. Combine this with Amazon CloudFront and you will have a cost-effective and scalable solution for\nhosting static websites – making it a popular choice for single-page applications.",[12,16,17,18,24,25,29],{},"In this post, I will walk you through setting up your Amazon S3 bucket, setting up OpenID Connect (",[19,20,23],"a",{"href":21,"rel":22},"https://openid.net/connect/",[],"OIDC",") in AWS, and deploying your application\nto your Amazon S3 bucket using a GitLab ",[19,26,28],{"href":27},"/topics/ci-cd/","CI/CD"," pipeline.",[12,31,32,33,37],{},"By the end of this post, you will have a ",[19,34,36],{"href":35},"/blog/how-to-keep-up-with-ci-cd-best-practices/","CI/CD pipeline"," built in GitLab that automatically deploys to your Amazon S3 bucket. Let's dive in.",[39,40,42],"h2",{"id":41},"prerequisites","Prerequisites",[12,44,45],{},"For this guide you will need the following:",[47,48,49,58,66,75],"ul",{},[50,51,52,57],"li",{},[19,53,56],{"href":54,"rel":55},"https://nodejs.org/en/",[],"Node.js"," >= 14.0.0 and npm >= 5.6 installed on your system",[50,59,60,65],{},[19,61,64],{"href":62,"rel":63},"https://git-scm.com/",[],"Git"," installed on your system",[50,67,68,69,74],{},"A ",[19,70,73],{"href":71,"rel":72},"https://gitlab.com/-/trial_registrations/new",[],"GitLab"," account",[50,76,77,78,74],{},"An ",[19,79,82],{"href":80,"rel":81},"https://aws.amazon.com/free/",[],"AWS",[12,84,85,89,90,95],{},[19,86,88],{"href":87},"/blog/how-to-automate-testing-for-a-react-application-with-gitlab/","A previous tutorial"," demonstrated how to create a new React\napplication, run unit tests as part of the CI process in GitLab, and output the test results and code coverage into the pipeline. This post continues where that project left off, so to follow along you can fork ",[19,91,94],{"href":92,"rel":93},"https://gitlab.com/guided-explorations/engineering-tutorials/react-unit-testing",[],"this project"," or complete the guide in the linked post.",[39,97,99],{"id":98},"configure-your-amazon-s3-bucket","Configure your Amazon S3 bucket",[12,101,102],{},"You'll need to configure your Amazon S3 bucket so let's do that first.",[104,105,107],"h3",{"id":106},"create-your-bucket","Create your bucket",[12,109,110],{},"After you log in to your AWS account, search for S3 using the search bar and select the S3 service. This will open the S3 service home page.",[12,112,113,114,118],{},"Right away, you should see the option to create a bucket. The bucket is where you are going to store your built React application. Click the ",[115,116,117],"strong",{},"Create bucket"," button to continue.",[12,120,121],{},[122,123],"img",{"alt":124,"src":125},"Create S3 bucket","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397759/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/create_bucket.png",[12,127,128,129,131,132,136],{},"Give your bucket a name, select your region, leave the rest of the settings as default (we’ll come back to these later), and continue by\nclicking the ",[115,130,117],{}," button. When naming your bucket, it’s important to remember that your bucket name must be unique and follow the\nbucket naming rules. I named mine ",[133,134,135],"code",{},"jw-gl-react",".",[12,138,139],{},"After creating your bucket, you should be taken to a list of your buckets as shown below.",[12,141,142],{},[122,143],{"alt":144,"src":145},"S3 bucket list","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397758/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/bucket_list.png",[104,147,149],{"id":148},"configure-static-website-hosting","Configure static website hosting",[12,151,152,153,156],{},"The next step is to configure static website hosting. Open your S3 bucket by clicking into the bucket name. Select the ",[115,154,155],{},"Properties"," tab and\nscroll to the bottom to find the static website hosting option.",[12,158,159],{},[122,160],{"alt":161,"src":162},"static hosting button","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397760/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/static_hosting_1.png",[12,164,165,166,169,170,173,174,177,178,181,182,136],{},"Click ",[115,167,168],{},"Edit"," and then enable static website hosting. For the ",[115,171,172],{},"Index"," and ",[115,175,176],{},"Error"," document, enter ",[133,179,180],{},"index.html"," and then click ",[115,183,184],{},"Save changes",[12,186,187],{},[122,188],{"alt":189,"src":190},"edit static hosting","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397761/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/static_hosting_2.png",[104,192,194],{"id":193},"set-up-permissions","Set up permissions",[12,196,197,198,201],{},"Now that you have enabled static website hosting, you need to update your permissions so the public can visit your website. Return to your bucket and select the ",[115,199,200],{},"Permissions"," tab.",[12,203,204,205,208,209,211,212,215,216,136],{},"Under ",[115,206,207],{},"Block public access (bucket settings)",", click ",[115,210,168],{}," and uncheck ",[115,213,214],{},"Block all public access"," and continue to ",[115,217,184],{},[12,219,220],{},[122,221],{"alt":222,"src":223},"block public access","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397757/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/block_access_1.png",[12,225,226],{},"Your page should now look this this:",[12,228,229],{},[122,230],{"alt":231,"src":232},"saved blocked public access","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397757/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/block_access_2.png",[12,234,235,236,238,239,242],{},"Now, you need to edit the Bucket Policy. Click the ",[115,237,168],{}," button in the ",[115,240,241],{},"Bucket Policy"," section. Paste the following code into your new policy:",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-javascript shiki shiki-themes github-light","{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"PublicReadGetObject\",\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::jw-gl-react/*\"\n        }\n    ]\n}\n","javascript","",[133,251,252,261,277,286,292,305,318,331,344,355,361,367],{"__ignoreMap":249},[253,254,257],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sgsFI","{\n",[253,262,264,268,271,274],{"class":255,"line":263},2,[253,265,267],{"class":266},"sYBdl","    \"Version\"",[253,269,270],{"class":259},": ",[253,272,273],{"class":266},"\"2012-10-17\"",[253,275,276],{"class":259},",\n",[253,278,280,283],{"class":255,"line":279},3,[253,281,282],{"class":266},"    \"Statement\"",[253,284,285],{"class":259},": [\n",[253,287,289],{"class":255,"line":288},4,[253,290,291],{"class":259},"        {\n",[253,293,295,298,300,303],{"class":255,"line":294},5,[253,296,297],{"class":266},"            \"Sid\"",[253,299,270],{"class":259},[253,301,302],{"class":266},"\"PublicReadGetObject\"",[253,304,276],{"class":259},[253,306,308,311,313,316],{"class":255,"line":307},6,[253,309,310],{"class":266},"            \"Effect\"",[253,312,270],{"class":259},[253,314,315],{"class":266},"\"Allow\"",[253,317,276],{"class":259},[253,319,321,324,326,329],{"class":255,"line":320},7,[253,322,323],{"class":266},"            \"Principal\"",[253,325,270],{"class":259},[253,327,328],{"class":266},"\"*\"",[253,330,276],{"class":259},[253,332,334,337,339,342],{"class":255,"line":333},8,[253,335,336],{"class":266},"            \"Action\"",[253,338,270],{"class":259},[253,340,341],{"class":266},"\"s3:GetObject\"",[253,343,276],{"class":259},[253,345,347,350,352],{"class":255,"line":346},9,[253,348,349],{"class":266},"            \"Resource\"",[253,351,270],{"class":259},[253,353,354],{"class":266},"\"arn:aws:s3:::jw-gl-react/*\"\n",[253,356,358],{"class":255,"line":357},10,[253,359,360],{"class":259},"        }\n",[253,362,364],{"class":255,"line":363},11,[253,365,366],{"class":259},"    ]\n",[253,368,370],{"class":255,"line":369},12,[253,371,372],{"class":259},"}\n",[12,374,375,376,378,379,136],{},"Replace ",[133,377,135],{}," on the resource property with the name of your bucket and ",[115,380,184],{},[12,382,383],{},"Your bucket should now look like this:",[12,385,386],{},[122,387],{"alt":388,"src":389},"publicly accessible bucket","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397757/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/block_access_3.png",[39,391,393],{"id":392},"manually-upload-your-react-application","Manually upload your React application",[12,395,396],{},"Now, let’s build your React application and manually publish it to your S3 bucket.",[12,398,399],{},"To build the application, make sure your project is cloned to your local machine and run the following command in your terminal inside of your\nrepository directory:",[244,401,405],{"className":402,"code":403,"language":404,"meta":249,"style":249},"language-shell shiki shiki-themes github-light","npm run build\n","shell",[133,406,407],{"__ignoreMap":249},[253,408,409,413,416],{"class":255,"line":256},[253,410,412],{"class":411},"s7eDp","npm",[253,414,415],{"class":266}," run",[253,417,418],{"class":266}," build\n",[12,420,421],{},"This will create a build folder inside of your repository directory.",[12,423,424,425,428],{},"Inside of your bucket, click the ",[115,426,427],{},"Upload"," button.",[12,430,431],{},[122,432],{"alt":433,"src":434},"manual bucket upload","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397762/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/upload_1.png",[12,436,437,438,440],{},"Drag the contents of your newly created build folder (not the folder itself) into the upload area. This will\nupload the contents of your application into your S3 bucket. Make sure to click ",[115,439,427],{}," at the bottom of the page to start the upload.",[12,442,443,444,446],{},"Now return to your bucket ",[115,445,155],{}," tab and scroll to the bottom to find the URL of your static website.",[12,448,449],{},[122,450],{"alt":451,"src":452},"static website url","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397762/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/upload_2.png",[12,454,455],{},"Click the link and you should see your built React application open in your browser.",[12,457,458],{},[122,459],{"alt":460,"src":461},"deployed app","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397760/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/manual_deploy.png",[39,463,465],{"id":464},"set-up-openid-connect-in-aws","Set up OpenID Connect in AWS",[12,467,468,469,136],{},"To deploy to your S3 Bucket from GitLab, we’re going to use a GitLab CI/CD job to receive temporary credentials\nfrom AWS without needing to store secrets. To do this, we’re going to configure OIDC for ID federation\nbetween GitLab and AWS. We’ll be following the ",[19,470,473],{"href":471,"rel":472},"https://docs.gitlab.com/ci/cloud_services/aws/",[],"related GitLab documentation",[104,475,477],{"id":476},"add-the-identity-provider","Add the identity provider",[12,479,480,481,486],{},"The first step is going to be adding GitLab as an identity and access management (IAM) OIDC provider in AWS. AWS has instructions located ",[19,482,485],{"href":483,"rel":484},"https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_create_oidc.html",[],"here",",\nbut I will walk through it step by step.",[12,488,489],{},"Open the IAM console inside of AWS.",[12,491,492],{},[122,493],{"alt":494,"src":495},"iam search","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397759/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/iam_1.png",[12,497,498,499,502,503,506,507,510,511,136],{},"On the left navigation pane, under ",[115,500,501],{},"Access management"," choose ",[115,504,505],{},"Identity providers"," and then choose ",[115,508,509],{},"Add provider",".\nFor provider type, select ",[115,512,513],{},"OpenID Connect",[12,515,516,517,520,521,524,525,136],{},"For ",[115,518,519],{},"Provider URL",", enter the address of your GitLab instance, such as ",[133,522,523],{},"https://gitlab.com"," or ",[133,526,527],{},"https://gitlab.example.com",[12,529,516,530,533,534,537,538,541,542,545],{},[115,531,532],{},"Audience",", enter something that is generic and specific to your application. In my case, I'm going to\nenter ",[133,535,536],{},"react_s3_gl",". To prevent confused deputy attacks, it's best to make this something that is not easy to guess. Take a note of\nthis value, you will use it to set the ",[133,539,540],{},"ID_TOKEN"," in your ",[133,543,544],{},".gitlab-ci.yml"," file.",[12,547,548,549,208,551,554,555,557],{},"After entering the ",[115,550,519],{},[115,552,553],{},"Get thumbprint"," to verify the server certificate of your IdP. After this, go\nahead and choose ",[115,556,509],{}," to finish up.",[104,559,561],{"id":560},"create-the-permissions-policy","Create the permissions policy",[12,563,564],{},"After you create the identity provider, you need to create a permissions policy.",[12,566,567,568,570,571,574,575,578,579,581],{},"From the IAM dashboard, under ",[115,569,501],{}," select ",[115,572,573],{},"Policies"," and then ",[115,576,577],{},"Create policy",".\nSelect the JSON tab and paste the following policy replacing ",[133,580,135],{}," on the resource line with your bucket name.",[244,583,585],{"className":246,"code":584,"language":248,"meta":249,"style":249},"{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Effect\": \"Allow\",\n      \"Action\": [\"s3:ListBucket\"],\n      \"Resource\": [\"arn:aws:s3:::jw-gl-react\"]\n    },\n    {\n      \"Effect\": \"Allow\",\n      \"Action\": [\n        \"s3:PutObject\",\n        \"s3:GetObject\",\n        \"s3:DeleteObject\"\n      ],\n      \"Resource\": [\"arn:aws:s3:::jw-gl-react/*\"]\n    }\n  ]\n}\n",[133,586,587,591,602,609,614,625,639,652,657,661,671,677,684,692,698,704,716,722,728],{"__ignoreMap":249},[253,588,589],{"class":255,"line":256},[253,590,260],{"class":259},[253,592,593,596,598,600],{"class":255,"line":263},[253,594,595],{"class":266},"  \"Version\"",[253,597,270],{"class":259},[253,599,273],{"class":266},[253,601,276],{"class":259},[253,603,604,607],{"class":255,"line":279},[253,605,606],{"class":266},"  \"Statement\"",[253,608,285],{"class":259},[253,610,611],{"class":255,"line":288},[253,612,613],{"class":259},"    {\n",[253,615,616,619,621,623],{"class":255,"line":294},[253,617,618],{"class":266},"      \"Effect\"",[253,620,270],{"class":259},[253,622,315],{"class":266},[253,624,276],{"class":259},[253,626,627,630,633,636],{"class":255,"line":307},[253,628,629],{"class":266},"      \"Action\"",[253,631,632],{"class":259},": [",[253,634,635],{"class":266},"\"s3:ListBucket\"",[253,637,638],{"class":259},"],\n",[253,640,641,644,646,649],{"class":255,"line":320},[253,642,643],{"class":266},"      \"Resource\"",[253,645,632],{"class":259},[253,647,648],{"class":266},"\"arn:aws:s3:::jw-gl-react\"",[253,650,651],{"class":259},"]\n",[253,653,654],{"class":255,"line":333},[253,655,656],{"class":259},"    },\n",[253,658,659],{"class":255,"line":346},[253,660,613],{"class":259},[253,662,663,665,667,669],{"class":255,"line":357},[253,664,618],{"class":266},[253,666,270],{"class":259},[253,668,315],{"class":266},[253,670,276],{"class":259},[253,672,673,675],{"class":255,"line":363},[253,674,629],{"class":266},[253,676,285],{"class":259},[253,678,679,682],{"class":255,"line":369},[253,680,681],{"class":266},"        \"s3:PutObject\"",[253,683,276],{"class":259},[253,685,687,690],{"class":255,"line":686},13,[253,688,689],{"class":266},"        \"s3:GetObject\"",[253,691,276],{"class":259},[253,693,695],{"class":255,"line":694},14,[253,696,697],{"class":266},"        \"s3:DeleteObject\"\n",[253,699,701],{"class":255,"line":700},15,[253,702,703],{"class":259},"      ],\n",[253,705,707,709,711,714],{"class":255,"line":706},16,[253,708,643],{"class":266},[253,710,632],{"class":259},[253,712,713],{"class":266},"\"arn:aws:s3:::jw-gl-react/*\"",[253,715,651],{"class":259},[253,717,719],{"class":255,"line":718},17,[253,720,721],{"class":259},"    }\n",[253,723,725],{"class":255,"line":724},18,[253,726,727],{"class":259},"  ]\n",[253,729,731],{"class":255,"line":730},19,[253,732,372],{"class":259},[12,734,735,736,739,740,743],{},"Select the ",[115,737,738],{},"Next: Tags"," button, add any tags you want, and then select the ",[115,741,742],{},"Next: Review"," button.\nEnter a name for your policy and finish up by creating the policy.",[104,745,747],{"id":746},"configure-the-role","Configure the role",[12,749,750,751,570,753,756,757,760,761,136],{},"Now it’s time to add the role. From the IAM dashboard, under ",[115,752,501],{},[115,754,755],{},"Roles","\nand then select ",[115,758,759],{},"Create role",". Select ",[115,762,763],{},"Web identity",[12,765,766,767,769,770,772,773,118],{},"In the ",[115,768,763],{}," section, select the identity provider you created earlier. For the\n",[115,771,532],{},", select the audience you created earlier. Select the ",[115,774,775],{},"Next",[12,777,778,779,782,783,785,786,136],{},"If you wanted to limit authorization to a specific group, project, branch, or tag, you could create a ",[115,780,781],{},"Custom trust policy","\ninstead of a ",[115,784,763],{},". Since I will be deleting these resources after the tutorial, I'm going to keep it simple. For a\nfull list of supported filterting types, see the ",[19,787,790],{"href":788,"rel":789},"https://docs.gitlab.com/ci/cloud_services/#configure-a-conditional-role-with-oidc-claims",[],"GitLab documentation",[12,792,793],{},[122,794],{"alt":795,"src":796},"web identity","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397760/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/iam_2.png",[12,798,799,800,803,804,806,807,136],{},"During the ",[115,801,802],{},"Add permissions"," step, select the policy you created and select ",[115,805,775],{}," to continue. Give your role a name and click ",[115,808,759],{},[12,810,811],{},"Open the Role you just created. In the summary section, find the Amazon Resource Name (ARN) and save it somewhere secure. You will use this in your pipeline.",[12,813,814],{},[122,815],{"alt":816,"src":817},"role","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397760/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/iam_3.png",[39,819,821],{"id":820},"deploy-to-your-amazon-s3-bucket-using-a-gitlab-cicd-pipeline","Deploy to your Amazon S3 bucket using a GitLab CI/CD pipeline",[12,823,824,825,830,831,834,835,838],{},"Inside of your project, create two ",[19,826,829],{"href":827,"rel":828},"https://docs.gitlab.com/ci/variables/#define-a-cicd-variable-in-the-ui",[],"CI/CD variables",". The first variable should be named ",[133,832,833],{},"ROLE_ARN",". For the value, paste the ARN of the\nrole you just created. The second variable should be named ",[133,836,837],{},"S3_BUCKET",". For the value, paste the name of the S3 bucket you created\nearlier in this post.",[12,840,841],{},"I have chosen to mask my variables for an extra layer of security.",[104,843,845],{"id":844},"retrieve-your-temporary-credentials","Retrieve your temporary credentials",[12,847,848,849,851],{},"Inside of your ",[133,850,544],{}," file, paste the following code:",[244,853,858],{"className":854,"code":856,"language":857,"meta":249},[855],"language-text",".assume_role: &assume_role\n    - >\n      STS=($(aws sts assume-role-with-web-identity\n      --role-arn ${ROLE_ARN}\n      --role-session-name \"GitLabRunner-${CI_PROJECT_ID}-${CI_PIPELINE_ID}\"\n      --web-identity-token $ID_TOKEN\n      --duration-seconds 3600\n      --query 'Credentials.[AccessKeyId,SecretAccessKey,SessionToken]'\n      --output text))\n    - export AWS_ACCESS_KEY_ID=\"${STS[0]}\"\n    - export AWS_SECRET_ACCESS_KEY=\"${STS[1]}\"\n    - export AWS_SESSION_TOKEN=\"${STS[2]}\"\n\n","text",[133,859,856],{"__ignoreMap":249},[12,861,862,863,867],{},"This is going to use the the AWS Security Token Service to generate temporary (",[864,865,866],"em",{},"3,600 seconds",") credentials utilizing the OIDC role you created earlier.",[104,869,871],{"id":870},"create-the-deploy-job","Create the deploy job",[12,873,874],{},"Now, let's add a build and deploy job to build your application and deploy it to your S3 bucket.",[12,876,877,878,880,881,173,884,887],{},"First, update the stages in your ",[133,879,544],{}," file to include a ",[133,882,883],{},"build",[133,885,886],{},"deploy"," stage as shown below:",[244,889,893],{"className":890,"code":891,"language":892,"meta":249,"style":249},"language-yaml shiki shiki-themes github-light","stages:\n  - build\n  - test\n  - deploy\n\n","yaml",[133,894,895,904,912,919],{"__ignoreMap":249},[253,896,897,901],{"class":255,"line":256},[253,898,900],{"class":899},"shJU0","stages",[253,902,903],{"class":259},":\n",[253,905,906,909],{"class":255,"line":263},[253,907,908],{"class":259},"  - ",[253,910,911],{"class":266},"build\n",[253,913,914,916],{"class":255,"line":279},[253,915,908],{"class":259},[253,917,918],{"class":266},"test\n",[253,920,921,923],{"class":255,"line":288},[253,922,908],{"class":259},[253,924,925],{"class":266},"deploy\n",[12,927,928,929,931],{},"Next, let's add a job to build your application. Paste the following code in your ",[133,930,544],{}," file:",[244,933,935],{"className":890,"code":934,"language":892,"meta":249,"style":249},"build artifact:\n  stage: build\n  image: node:latest\n  before_script:\n    - npm install\n  script:\n    - npm run build\n  artifacts:\n    paths:\n      - build/\n    when: always\n  rules:\n    - if: '$CI_COMMIT_REF_NAME == \"main\"'\n      when: always\n\n",[133,936,937,944,953,963,970,978,985,991,998,1005,1013,1023,1030,1042],{"__ignoreMap":249},[253,938,939,942],{"class":255,"line":256},[253,940,941],{"class":899},"build artifact",[253,943,903],{"class":259},[253,945,946,949,951],{"class":255,"line":263},[253,947,948],{"class":899},"  stage",[253,950,270],{"class":259},[253,952,911],{"class":266},[253,954,955,958,960],{"class":255,"line":279},[253,956,957],{"class":899},"  image",[253,959,270],{"class":259},[253,961,962],{"class":266},"node:latest\n",[253,964,965,968],{"class":255,"line":288},[253,966,967],{"class":899},"  before_script",[253,969,903],{"class":259},[253,971,972,975],{"class":255,"line":294},[253,973,974],{"class":259},"    - ",[253,976,977],{"class":266},"npm install\n",[253,979,980,983],{"class":255,"line":307},[253,981,982],{"class":899},"  script",[253,984,903],{"class":259},[253,986,987,989],{"class":255,"line":320},[253,988,974],{"class":259},[253,990,403],{"class":266},[253,992,993,996],{"class":255,"line":333},[253,994,995],{"class":899},"  artifacts",[253,997,903],{"class":259},[253,999,1000,1003],{"class":255,"line":346},[253,1001,1002],{"class":899},"    paths",[253,1004,903],{"class":259},[253,1006,1007,1010],{"class":255,"line":357},[253,1008,1009],{"class":259},"      - ",[253,1011,1012],{"class":266},"build/\n",[253,1014,1015,1018,1020],{"class":255,"line":363},[253,1016,1017],{"class":899},"    when",[253,1019,270],{"class":259},[253,1021,1022],{"class":266},"always\n",[253,1024,1025,1028],{"class":255,"line":369},[253,1026,1027],{"class":899},"  rules",[253,1029,903],{"class":259},[253,1031,1032,1034,1037,1039],{"class":255,"line":686},[253,1033,974],{"class":259},[253,1035,1036],{"class":899},"if",[253,1038,270],{"class":259},[253,1040,1041],{"class":266},"'$CI_COMMIT_REF_NAME == \"main\"'\n",[253,1043,1044,1047,1049],{"class":255,"line":694},[253,1045,1046],{"class":899},"      when",[253,1048,270],{"class":259},[253,1050,1022],{"class":266},[12,1052,1053,1054,1057,1058,1061],{},"This is going to run ",[133,1055,1056],{},"npm run build"," if the change occurs on the ",[133,1059,1060],{},"main"," branch and upload the build directory as an\nartifact to be used during the next step.",[12,1063,1064,1065,931],{},"Next, let's add a job to actually deploy to your S3 bucket. Paste the following code in your ",[133,1066,544],{},[244,1068,1070],{"className":890,"code":1069,"language":892,"meta":249,"style":249},"deploy s3:\n  stage: deploy\n  image:\n    name: amazon/aws-cli:latest\n    entrypoint:\n      - '/usr/bin/env'\n  id_tokens:\n      ID_TOKEN:\n        aud: react_s3_gl\n  script:\n    - *assume_role\n    - aws s3 sync build/ s3://$S3_BUCKET\n  rules:\n    - if: '$CI_COMMIT_REF_NAME == \"main\"'\n      when: always\n\n",[133,1071,1072,1079,1087,1093,1103,1110,1117,1124,1131,1141,1147,1158,1165,1171,1181],{"__ignoreMap":249},[253,1073,1074,1077],{"class":255,"line":256},[253,1075,1076],{"class":899},"deploy s3",[253,1078,903],{"class":259},[253,1080,1081,1083,1085],{"class":255,"line":263},[253,1082,948],{"class":899},[253,1084,270],{"class":259},[253,1086,925],{"class":266},[253,1088,1089,1091],{"class":255,"line":279},[253,1090,957],{"class":899},[253,1092,903],{"class":259},[253,1094,1095,1098,1100],{"class":255,"line":288},[253,1096,1097],{"class":899},"    name",[253,1099,270],{"class":259},[253,1101,1102],{"class":266},"amazon/aws-cli:latest\n",[253,1104,1105,1108],{"class":255,"line":294},[253,1106,1107],{"class":899},"    entrypoint",[253,1109,903],{"class":259},[253,1111,1112,1114],{"class":255,"line":307},[253,1113,1009],{"class":259},[253,1115,1116],{"class":266},"'/usr/bin/env'\n",[253,1118,1119,1122],{"class":255,"line":320},[253,1120,1121],{"class":899},"  id_tokens",[253,1123,903],{"class":259},[253,1125,1126,1129],{"class":255,"line":333},[253,1127,1128],{"class":899},"      ID_TOKEN",[253,1130,903],{"class":259},[253,1132,1133,1136,1138],{"class":255,"line":346},[253,1134,1135],{"class":899},"        aud",[253,1137,270],{"class":259},[253,1139,1140],{"class":266},"react_s3_gl\n",[253,1142,1143,1145],{"class":255,"line":357},[253,1144,982],{"class":899},[253,1146,903],{"class":259},[253,1148,1149,1151,1155],{"class":255,"line":363},[253,1150,974],{"class":259},[253,1152,1154],{"class":1153},"sD7c4","*",[253,1156,1157],{"class":259},"assume_role\n",[253,1159,1160,1162],{"class":255,"line":369},[253,1161,974],{"class":259},[253,1163,1164],{"class":266},"aws s3 sync build/ s3://$S3_BUCKET\n",[253,1166,1167,1169],{"class":255,"line":686},[253,1168,1027],{"class":899},[253,1170,903],{"class":259},[253,1172,1173,1175,1177,1179],{"class":255,"line":694},[253,1174,974],{"class":259},[253,1176,1036],{"class":899},[253,1178,270],{"class":259},[253,1180,1041],{"class":266},[253,1182,1183,1185,1187],{"class":255,"line":700},[253,1184,1046],{"class":899},[253,1186,270],{"class":259},[253,1188,1022],{"class":266},[12,1190,1191,1192,1197,1198,1201,1202,1205,1206,1208],{},"This uses ",[19,1193,1196],{"href":1194,"rel":1195},"https://docs.gitlab.com/ci/yaml/yaml_optimization/#yaml-anchors-for-scripts",[],"YAML anchors"," to run the ",[133,1199,1200],{},"assume_role"," script,\nand then uses the ",[133,1203,1204],{},"aws cli"," to upload your build artifact to the bucket you defined as a variable. This job also only runs if the change occurs\non the ",[133,1207,1060],{}," branch.",[12,1210,1211,1212,1215,1216,136],{},"Make sure the ",[133,1213,1214],{},"aud"," value matches the value you entered for your audience when you setup the identity provider. In my case, I entered ",[133,1217,1218],{},"react-s3_gl",[12,1220,1221,1222,1224],{},"Your complete ",[133,1223,544],{}," file should look like this:",[244,1226,1229],{"className":1227,"code":1228,"language":857,"meta":249},[855],"stages:\n  - build\n  - test\n  - deploy\n\n.assume_role: &assume_role\n    - >\n      STS=($(aws sts assume-role-with-web-identity\n      --role-arn ${ROLE_ARN}\n      --role-session-name \"GitLabRunner-${CI_PROJECT_ID}-${CI_PIPELINE_ID}\"\n      --web-identity-token $ID_TOKEN\n      --duration-seconds 3600\n      --query 'Credentials.[AccessKeyId,SecretAccessKey,SessionToken]'\n      --output text))\n    - export AWS_ACCESS_KEY_ID=\"${STS[0]}\"\n    - export AWS_SECRET_ACCESS_KEY=\"${STS[1]}\"\n    - export AWS_SESSION_TOKEN=\"${STS[2]}\"\n\nunit test:\n  image: node:latest\n  stage: test\n  before_script:\n    - npm install\n  script:\n    - npm run test:ci\n  coverage: /All files[^|]*\\|[^|]*\\s+([\\d\\.]+)/\n  artifacts:\n    paths:\n      - coverage/\n    when: always\n    reports:\n      junit:\n        - junit.xml\n\nbuild artifact:\n  stage: build\n  image: node:latest\n  before_script:\n    - npm install\n  script:\n    - npm run build\n  artifacts:\n    paths:\n      - build/\n    when: always\n  rules:\n    - if: '$CI_COMMIT_REF_NAME == \"main\"'\n      when: always\n\n\ndeploy s3:\n  stage: deploy\n  image:\n    name: amazon/aws-cli:latest\n    entrypoint:\n      - '/usr/bin/env'\n  id_tokens:\n      ID_TOKEN:\n        aud: react_s3_gl\n  script:\n    - *assume_role\n    - aws s3 sync build/ s3://$S3_BUCKET\n  rules:\n    - if: '$CI_COMMIT_REF_NAME == \"main\"'\n      when: always\n\n",[133,1230,1228],{"__ignoreMap":249},[104,1232,1234],{"id":1233},"make-a-change-and-test-your-pipeline","Make a change and test your pipeline",[12,1236,1237,1238,1241,1242,1245,1246,1249,1250,1252],{},"To test your pipeline, inside of ",[133,1239,1240],{},"App.js",", change this line ",[133,1243,1244],{},"Edit \u003Ccode>src/App.js\u003C/code> and save to reload."," to\n",[133,1247,1248],{},"This was deployed from GitLab!"," and commit your changes to the ",[133,1251,1060],{}," branch. The pipeline should kick off and when\nit finishes successfully you should see your updated application at the URL of your static website.",[12,1254,1255],{},[122,1256],{"alt":1257,"src":1258},"updated app","https://res.cloudinary.com/about-gitlab-com/image/upload/v1782397756/blog/Content%20Images/2023-02-10-how-to-deploy-react-to-amazon-s3/auto_deploy.png",[12,1260,1261,1262,1267],{},"You now have a CI/CD pipeline built in GitLab that receives temporary credentials from AWS using OIDC and\nautomatically deploys to your Amazon S3 bucket. To take it a step further, you can ",[19,1263,1266],{"href":1264,"rel":1265},"https://docs.gitlab.com/user/application_security/secure_your_application/",[],"secure your application","\nwith GitLab's built-in security tools.",[12,1269,1270,1271,136],{},"All code for this project can be found ",[19,1272,485],{"href":1273,"rel":1274},"https://gitlab.com/guided-explorations/engineering-tutorials/react-s3",[],[12,1276,1277,1278,1283,1284],{},"Cover image by ",[19,1279,1282],{"href":1280,"rel":1281},"https://unsplash.com/@switch_dtp_fotografie?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",[],"Lucas van Oor"," on ",[19,1285,1288],{"href":1286,"rel":1287},"https://unsplash.com/s/photos/bucket?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",[],"Unsplash",[39,1290,1292],{"id":1291},"related-posts-and-documentation","Related posts and documentation",[47,1294,1295,1300,1306,1313,1319],{},[50,1296,1297],{},[19,1298,1299],{"href":87},"How to automate testing for a React application with GitLab",[50,1301,1302],{},[19,1303,1305],{"href":1304},"/blog/deploy-aws/","How to deploy AWS with GitLab",[50,1307,1308],{},[19,1309,1312],{"href":1310,"rel":1311},"https://docs.gitlab.com/ci/cloud_deployment/",[],"Deploy to AWS from GitLab CI/CD",[50,1314,1315],{},[19,1316,1318],{"href":471,"rel":1317},[],"Configure OpenID Connect in AWS to retrieve temporary credentials",[50,1320,1321],{},[19,1322,1325],{"href":1323,"rel":1324},"https://about.gitlab.com/blog/oidc/",[],"Secure GitLab CI/CD workflows using OIDC JWT on a DevSecOps platform",[1327,1328,1329],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}",{"title":249,"searchDepth":263,"depth":263,"links":1331},[1332,1333,1338,1339,1344,1349],{"id":41,"depth":263,"text":42},{"id":98,"depth":263,"text":99,"children":1334},[1335,1336,1337],{"id":106,"depth":279,"text":107},{"id":148,"depth":279,"text":149},{"id":193,"depth":279,"text":194},{"id":392,"depth":263,"text":393},{"id":464,"depth":263,"text":465,"children":1340},[1341,1342,1343],{"id":476,"depth":279,"text":477},{"id":560,"depth":279,"text":561},{"id":746,"depth":279,"text":747},{"id":820,"depth":263,"text":821,"children":1345},[1346,1347,1348],{"id":844,"depth":279,"text":845},{"id":870,"depth":279,"text":871},{"id":1233,"depth":279,"text":1234},{"id":1291,"depth":263,"text":1292},"engineering","2023-03-01","Follow this guide to use OpenID Connect to connect to AWS and deploy a React application to Amazon S3.","md",null,false,"https://res.cloudinary.com/about-gitlab-com/image/upload/v1749663291/Blog/Hero%20Images/cover1.jpg",{},true,"/en-us/blog/how-to-deploy-react-to-amazon-s3",{"title":5,"description":1352,"ogTitle":5,"ogDescription":1352,"noIndex":1355,"ogImage":1356,"ogUrl":1361,"ogSiteName":1362,"ogType":1363,"canonicalUrls":1361},"https://about.gitlab.com/blog/how-to-deploy-react-to-amazon-s3","https://about.gitlab.com","article","how-to-deploy-react-to-amazon-s3","en-us/blog/how-to-deploy-react-to-amazon-s3",[1367,28],"DevOps","BlogPost","n6cKMD9Yo9995OfNjwHAOzNm7m9cgqlKxN6P3-2APHE",{"logo":1371,"freeTrial":1376,"sales":1381,"login":1386,"items":1391,"search":1717,"minimal":1748,"duo":1767,"switchNav":1776,"pricingDeployment":1787},{"config":1372},{"href":1373,"dataGaName":1374,"dataGaLocation":1375},"/","gitlab logo","header",{"text":1377,"config":1378},"Get free trial",{"href":1379,"dataGaName":1380,"dataGaLocation":1375},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com&glm_content=default-saas-trial/","free trial",{"text":1382,"config":1383},"Request a demo",{"href":1384,"dataGaName":1385,"dataGaLocation":1375},"/sales/?contact-topic=request-demo","sales",{"text":1387,"config":1388},"Sign in",{"href":1389,"dataGaName":1390,"dataGaLocation":1375},"https://gitlab.com/users/sign_in/","sign in",[1392,1421,1520,1525,1639,1695],{"text":1393,"config":1394,"menu":1396},"Platform",{"dataNavLevelOne":1395},"platform",{"type":1397,"columns":1398},"cards",[1399,1405,1413],{"title":1393,"description":1400,"link":1401},"The intelligent orchestration platform for DevSecOps",{"text":1402,"config":1403},"Explore our Platform",{"href":1404,"dataGaName":1395,"dataGaLocation":1375},"/platform/",{"title":1406,"description":1407,"link":1408},"GitLab Duo Agent Platform","Agentic AI for the entire software lifecycle",{"text":1409,"config":1410},"Meet GitLab Duo",{"href":1411,"dataGaName":1412,"dataGaLocation":1375},"/gitlab-duo-agent-platform/","gitlab duo agent platform",{"title":1414,"description":1415,"link":1416},"Why GitLab","See the top reasons enterprises choose GitLab",{"text":1417,"config":1418},"Learn more",{"href":1419,"dataGaName":1420,"dataGaLocation":1375},"/why-gitlab/","why gitlab",{"text":1422,"left":1358,"config":1423,"menu":1425},"Product",{"dataNavLevelOne":1424},"solutions",{"type":1426,"link":1427,"columns":1431,"feature":1499},"lists",{"text":1428,"config":1429},"View all Solutions",{"href":1430,"dataGaName":1424,"dataGaLocation":1375},"/solutions/",[1432,1455,1478],{"title":1433,"description":1434,"link":1435,"items":1440},"Automation","CI/CD and automation to accelerate deployment",{"config":1436},{"icon":1437,"href":1438,"dataGaName":1439,"dataGaLocation":1375},"AutomatedCodeAlt","/solutions/delivery-automation/","automated software delivery",[1441,1444,1447,1451],{"text":28,"config":1442},{"href":1443,"dataGaLocation":1375,"dataGaName":28},"/solutions/continuous-integration/",{"text":1406,"config":1445},{"href":1411,"dataGaLocation":1375,"dataGaName":1446},"gitlab duo agent platform - product menu",{"text":1448,"config":1449},"Source Code Management",{"href":1450,"dataGaLocation":1375,"dataGaName":1448},"/solutions/source-code-management/",{"text":1452,"config":1453},"Automated Software Delivery",{"href":1438,"dataGaLocation":1375,"dataGaName":1454},"Automated software delivery",{"title":1456,"description":1457,"link":1458,"items":1463},"Security","Deliver code faster without compromising security",{"config":1459},{"href":1460,"dataGaName":1461,"dataGaLocation":1375,"icon":1462},"/solutions/application-security-testing/","security and compliance","ShieldCheckLight",[1464,1468,1473],{"text":1465,"config":1466},"Application Security Testing",{"href":1460,"dataGaName":1467,"dataGaLocation":1375},"Application security testing",{"text":1469,"config":1470},"Software Supply Chain Security",{"href":1471,"dataGaLocation":1375,"dataGaName":1472},"/solutions/supply-chain/","Software supply chain security",{"text":1474,"config":1475},"Software Compliance",{"href":1476,"dataGaName":1477,"dataGaLocation":1375},"/solutions/software-compliance/","software compliance",{"title":1479,"link":1480,"items":1485},"Measurement",{"config":1481},{"icon":1482,"href":1483,"dataGaName":1484,"dataGaLocation":1375},"DigitalTransformation","/solutions/visibility-measurement/","visibility and measurement",[1486,1490,1494],{"text":1487,"config":1488},"Visibility & Measurement",{"href":1483,"dataGaLocation":1375,"dataGaName":1489},"Visibility and Measurement",{"text":1491,"config":1492},"Value Stream Management",{"href":1493,"dataGaLocation":1375,"dataGaName":1491},"/solutions/value-stream-management/",{"text":1495,"config":1496},"Analytics & Insights",{"href":1497,"dataGaLocation":1375,"dataGaName":1498},"/solutions/analytics-and-insights/","Analytics and insights",{"title":1500,"type":1426,"items":1501},"GitLab for",[1502,1508,1514],{"text":1503,"config":1504},"Enterprise",{"icon":1505,"href":1506,"dataGaLocation":1375,"dataGaName":1507},"Building","/enterprise/","enterprise",{"text":1509,"config":1510},"Small Business",{"icon":1511,"href":1512,"dataGaLocation":1375,"dataGaName":1513},"Work","/small-business/","small business",{"text":1515,"config":1516},"Public Sector",{"icon":1517,"href":1518,"dataGaLocation":1375,"dataGaName":1519},"Organization","/solutions/public-sector/","public sector",{"text":1521,"config":1522},"Pricing",{"href":1523,"dataGaName":1524,"dataGaLocation":1375,"dataNavLevelOne":1524},"/pricing/","pricing",{"text":1526,"config":1527,"menu":1529},"Resources",{"dataNavLevelOne":1528},"resources",{"type":1426,"link":1530,"columns":1534,"feature":1628},{"text":1531,"config":1532},"View all resources",{"href":1533,"dataGaName":1528,"dataGaLocation":1375},"/resources/",[1535,1568,1595],{"title":1536,"items":1537},"Getting started",[1538,1543,1548,1553,1558,1563],{"text":1539,"config":1540},"Install",{"href":1541,"dataGaName":1542,"dataGaLocation":1375},"/install/","install",{"text":1544,"config":1545},"Quick start guides",{"href":1546,"dataGaName":1547,"dataGaLocation":1375},"/get-started/","quick setup checklists",{"text":1549,"config":1550},"Learn",{"href":1551,"dataGaLocation":1375,"dataGaName":1552},"https://university.gitlab.com/","learn",{"text":1554,"config":1555},"Product documentation",{"href":1556,"dataGaName":1557,"dataGaLocation":1375},"https://docs.gitlab.com/","product documentation",{"text":1559,"config":1560},"Best practice videos",{"href":1561,"dataGaName":1562,"dataGaLocation":1375},"/getting-started-videos/","best practice videos",{"text":1564,"config":1565},"Integrations",{"href":1566,"dataGaName":1567,"dataGaLocation":1375},"/integrations/","integrations",{"title":1569,"items":1570},"Discover",[1571,1576,1581,1586,1590],{"text":1572,"config":1573},"Customer success stories",{"href":1574,"dataGaName":1575,"dataGaLocation":1375},"/customers/","customer success stories",{"text":1577,"config":1578},"Blog",{"href":1579,"dataGaName":1580,"dataGaLocation":1375},"/blog/","blog",{"text":1582,"config":1583},"Demo Hub",{"href":1584,"dataGaName":1585,"dataGaLocation":1375},"/demo-hub/","demo hub",{"text":1587,"config":1588},"The Source",{"href":1589,"dataGaName":1580,"dataGaLocation":1375},"/the-source/",{"text":1591,"config":1592},"Remote",{"href":1593,"dataGaName":1594,"dataGaLocation":1375},"https://handbook.gitlab.com/handbook/company/culture/all-remote/","remote",{"title":1596,"items":1597},"Connect",[1598,1603,1608,1613,1618,1623],{"text":1599,"config":1600},"GitLab Services",{"href":1601,"dataGaName":1602,"dataGaLocation":1375},"/services/","services",{"text":1604,"config":1605},"Contribute",{"href":1606,"dataGaName":1607,"dataGaLocation":1375},"https://contributors.gitlab.com","contribute",{"text":1609,"config":1610},"Community",{"href":1611,"dataGaName":1612,"dataGaLocation":1375},"/community/","community",{"text":1614,"config":1615},"Forum",{"href":1616,"dataGaName":1617,"dataGaLocation":1375},"https://forum.gitlab.com/","forum",{"text":1619,"config":1620},"Events",{"href":1621,"dataGaName":1622,"dataGaLocation":1375},"/events/","events",{"text":1624,"config":1625},"Partners",{"href":1626,"dataGaName":1627,"dataGaLocation":1375},"/partners/","partners",{"config":1629,"title":1632,"text":1633,"link":1634},{"background":1630,"textColor":1631},"url('https://res.cloudinary.com/about-gitlab-com/image/upload/v1777322348/qpq8yrgn8knii57omj0c.png')","#000","What’s new in GitLab","Stay updated with our latest features and improvements.",{"text":1635,"config":1636},"Read the latest",{"href":1637,"dataGaName":1638,"dataGaLocation":1375},"/whats-new/","whats new",{"text":1640,"config":1641,"menu":1643},"Company",{"dataNavLevelOne":1642},"company",{"type":1426,"columns":1644},[1645],{"items":1646},[1647,1652,1658,1660,1665,1670,1675,1680,1685,1690],{"text":1648,"config":1649},"About",{"href":1650,"dataGaName":1651,"dataGaLocation":1375},"/company/","about",{"text":1653,"config":1654,"footerGa":1657},"Jobs",{"href":1655,"dataGaName":1656,"dataGaLocation":1375},"/jobs/","jobs",{"dataGaName":1656},{"text":1619,"config":1659},{"href":1621,"dataGaName":1622,"dataGaLocation":1375},{"text":1661,"config":1662},"Leadership",{"href":1663,"dataGaName":1664,"dataGaLocation":1375},"/company/team/e-group/","leadership",{"text":1666,"config":1667},"Handbook",{"href":1668,"dataGaName":1669,"dataGaLocation":1375},"https://handbook.gitlab.com/","handbook",{"text":1671,"config":1672},"Investor relations",{"href":1673,"dataGaName":1674,"dataGaLocation":1375},"https://ir.gitlab.com/overview/default.aspx","investor relations",{"text":1676,"config":1677},"Trust Center",{"href":1678,"dataGaName":1679,"dataGaLocation":1375},"/security/","trust center",{"text":1681,"config":1682},"AI Transparency Center",{"href":1683,"dataGaName":1684,"dataGaLocation":1375},"/ai-transparency-center/","ai transparency center",{"text":1686,"config":1687},"Newsletter",{"href":1688,"dataGaName":1689,"dataGaLocation":1375},"/company/contact/#contact-forms","newsletter",{"text":1691,"config":1692},"Press",{"href":1693,"dataGaName":1694,"dataGaLocation":1375},"/press/","press",{"text":1696,"config":1697,"menu":1698},"Contact us",{"dataNavLevelOne":1642},{"type":1426,"columns":1699},[1700],{"items":1701},[1702,1707,1712],{"text":1703,"config":1704},"Talk to sales",{"href":1705,"dataGaName":1706,"dataGaLocation":1375},"/sales/","talk to sales",{"text":1708,"config":1709},"Support portal",{"href":1710,"dataGaName":1711,"dataGaLocation":1375},"https://support.gitlab.com/hc/en-us","support portal",{"text":1713,"config":1714},"Customer portal",{"href":1715,"dataGaName":1716,"dataGaLocation":1375},"https://customers.gitlab.com/customers/sign_in/","customer portal",{"close":1718,"login":1719,"suggestions":1726},"Close",{"text":1720,"link":1721},"To search repositories and projects, login to",{"text":1722,"config":1723},"gitlab.com",{"href":1389,"dataGaName":1724,"dataGaLocation":1725},"search login","search",{"text":1727,"default":1728},"Suggestions",[1729,1731,1735,1737,1741,1745],{"text":1406,"config":1730},{"href":1411,"dataGaName":1406,"dataGaLocation":1725},{"text":1732,"config":1733},"Code Suggestions (AI)",{"href":1734,"dataGaName":1732,"dataGaLocation":1725},"/solutions/code-suggestions/",{"text":28,"config":1736},{"href":1443,"dataGaName":28,"dataGaLocation":1725},{"text":1738,"config":1739},"GitLab on AWS",{"href":1740,"dataGaName":1738,"dataGaLocation":1725},"/partners/technology-partners/aws/",{"text":1742,"config":1743},"GitLab on Google Cloud",{"href":1744,"dataGaName":1742,"dataGaLocation":1725},"/partners/technology-partners/google-cloud-platform/",{"text":1746,"config":1747},"Why GitLab?",{"href":1419,"dataGaName":1746,"dataGaLocation":1725},{"freeTrial":1749,"mobileIcon":1754,"desktopIcon":1759,"secondaryButton":1762},{"text":1750,"config":1751},"Start free trial",{"href":1752,"dataGaName":1380,"dataGaLocation":1753},"https://gitlab.com/-/trials/new/","nav",{"altText":1755,"config":1756},"Gitlab Icon",{"src":1757,"dataGaName":1758,"dataGaLocation":1753},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203874/jypbw1jx72aexsoohd7x.svg","gitlab icon",{"altText":1755,"config":1760},{"src":1761,"dataGaName":1758,"dataGaLocation":1753},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203875/gs4c8p8opsgvflgkswz9.svg",{"text":1763,"config":1764},"Get Started",{"href":1765,"dataGaName":1766,"dataGaLocation":1753},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com/get-started/","get started",{"freeTrial":1768,"mobileIcon":1772,"desktopIcon":1774},{"text":1769,"config":1770},"Learn more about GitLab Duo",{"href":1411,"dataGaName":1771,"dataGaLocation":1753},"gitlab duo",{"altText":1755,"config":1773},{"src":1757,"dataGaName":1758,"dataGaLocation":1753},{"altText":1755,"config":1775},{"src":1761,"dataGaName":1758,"dataGaLocation":1753},{"button":1777,"mobileIcon":1782,"desktopIcon":1784},{"text":1778,"config":1779},"/switch",{"href":1780,"dataGaName":1781,"dataGaLocation":1753},"#contact","switch",{"altText":1755,"config":1783},{"src":1757,"dataGaName":1758,"dataGaLocation":1753},{"altText":1755,"config":1785},{"src":1786,"dataGaName":1758,"dataGaLocation":1753},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1773335277/ohhpiuoxoldryzrnhfrh.png",{"freeTrial":1788,"mobileIcon":1793,"desktopIcon":1795},{"text":1789,"config":1790},"Back to pricing",{"href":1523,"dataGaName":1791,"dataGaLocation":1753,"icon":1792},"back to pricing","GoBack",{"altText":1755,"config":1794},{"src":1757,"dataGaName":1758,"dataGaLocation":1753},{"altText":1755,"config":1796},{"src":1761,"dataGaName":1758,"dataGaLocation":1753},{"title":1798,"titleMobile":1799,"button":1800,"config":1805},"Duo Agent Platform delivers 400% ROI, per new Forrester Consulting study.","400% ROI: Forrester TEI for GitLab Duo",{"text":1417,"config":1801},{"href":1802,"dataGaName":1803,"dataGaLocation":1804},"https://about.gitlab.com/blog/gitlab-duo-agent-platform-delivers-400-percent-roi/","forrester-tei-dap-banner","global-banner",{"layout":1806,"disabled":1355},"release",{"data":1808},{"text":1809,"source":1810,"edit":1816,"contribute":1821,"config":1826,"items":1831,"minimal":2039},"Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license",{"text":1811,"config":1812},"View page source",{"href":1813,"dataGaName":1814,"dataGaLocation":1815},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/","page source","footer",{"text":1817,"config":1818},"Edit this page",{"href":1819,"dataGaName":1820,"dataGaLocation":1815},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/content/","web ide",{"text":1822,"config":1823},"Please contribute",{"href":1824,"dataGaName":1825,"dataGaLocation":1815},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/CONTRIBUTING.md/","please contribute",{"twitter":1827,"facebook":1828,"youtube":1829,"linkedin":1830},"https://twitter.com/gitlab","https://www.facebook.com/gitlab","https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg","https://www.linkedin.com/company/gitlab-com",[1832,1879,1931,1975,2007],{"title":1521,"links":1833,"subMenu":1848},[1834,1838,1843],{"text":1835,"config":1836},"View plans",{"href":1523,"dataGaName":1837,"dataGaLocation":1815},"view plans",{"text":1839,"config":1840},"Why Premium?",{"href":1841,"dataGaName":1842,"dataGaLocation":1815},"/pricing/premium/","why premium",{"text":1844,"config":1845},"Why Ultimate?",{"href":1846,"dataGaName":1847,"dataGaLocation":1815},"/pricing/ultimate/","why ultimate",[1849],{"title":1850,"links":1851},"Contact Us",[1852,1855,1857,1859,1864,1869,1874],{"text":1853,"config":1854},"Contact sales",{"href":1705,"dataGaName":1385,"dataGaLocation":1815},{"text":1708,"config":1856},{"href":1710,"dataGaName":1711,"dataGaLocation":1815},{"text":1713,"config":1858},{"href":1715,"dataGaName":1716,"dataGaLocation":1815},{"text":1860,"config":1861},"Status",{"href":1862,"dataGaName":1863,"dataGaLocation":1815},"https://status.gitlab.com/","status",{"text":1865,"config":1866},"Terms of use",{"href":1867,"dataGaName":1868,"dataGaLocation":1815},"/terms/","terms of use",{"text":1870,"config":1871},"Privacy statement",{"href":1872,"dataGaName":1873,"dataGaLocation":1815},"/privacy/","privacy statement",{"text":1875,"config":1876},"Cookie preferences",{"dataGaName":1877,"dataGaLocation":1815,"id":1878,"isOneTrustButton":1358},"cookie preferences","ot-sdk-btn",{"title":1422,"links":1880,"subMenu":1889},[1881,1885],{"text":1882,"config":1883},"DevSecOps platform",{"href":1404,"dataGaName":1884,"dataGaLocation":1815},"devsecops platform",{"text":1886,"config":1887},"AI-Assisted Development",{"href":1411,"dataGaName":1888,"dataGaLocation":1815},"ai-assisted development",[1890],{"title":1891,"links":1892},"Topics",[1893,1897,1902,1906,1911,1916,1921,1926],{"text":1894,"config":1895},"CICD",{"href":27,"dataGaName":1896,"dataGaLocation":1815},"cicd",{"text":1898,"config":1899},"GitOps",{"href":1900,"dataGaName":1901,"dataGaLocation":1815},"/topics/gitops/","gitops",{"text":1367,"config":1903},{"href":1904,"dataGaName":1905,"dataGaLocation":1815},"/topics/devops/","devops",{"text":1907,"config":1908},"Version Control",{"href":1909,"dataGaName":1910,"dataGaLocation":1815},"/topics/version-control/","version control",{"text":1912,"config":1913},"DevSecOps",{"href":1914,"dataGaName":1915,"dataGaLocation":1815},"/topics/devsecops/","devsecops",{"text":1917,"config":1918},"Cloud Native",{"href":1919,"dataGaName":1920,"dataGaLocation":1815},"/topics/cloud-native/","cloud native",{"text":1922,"config":1923},"AI for Coding",{"href":1924,"dataGaName":1925,"dataGaLocation":1815},"/topics/devops/ai-for-coding/","ai for coding",{"text":1927,"config":1928},"Agentic AI",{"href":1929,"dataGaName":1930,"dataGaLocation":1815},"/topics/agentic-ai/","agentic ai",{"title":1932,"links":1933},"Solutions",[1934,1936,1938,1943,1947,1950,1954,1957,1959,1962,1965,1970],{"text":1465,"config":1935},{"href":1460,"dataGaName":1465,"dataGaLocation":1815},{"text":1454,"config":1937},{"href":1438,"dataGaName":1439,"dataGaLocation":1815},{"text":1939,"config":1940},"Agile development",{"href":1941,"dataGaName":1942,"dataGaLocation":1815},"/solutions/agile-delivery/","agile delivery",{"text":1944,"config":1945},"SCM",{"href":1450,"dataGaName":1946,"dataGaLocation":1815},"source code management",{"text":1894,"config":1948},{"href":1443,"dataGaName":1949,"dataGaLocation":1815},"continuous integration & delivery",{"text":1951,"config":1952},"Value stream management",{"href":1493,"dataGaName":1953,"dataGaLocation":1815},"value stream management",{"text":1898,"config":1955},{"href":1956,"dataGaName":1901,"dataGaLocation":1815},"/solutions/gitops/",{"text":1503,"config":1958},{"href":1506,"dataGaName":1507,"dataGaLocation":1815},{"text":1960,"config":1961},"Small business",{"href":1512,"dataGaName":1513,"dataGaLocation":1815},{"text":1963,"config":1964},"Public sector",{"href":1518,"dataGaName":1519,"dataGaLocation":1815},{"text":1966,"config":1967},"Education",{"href":1968,"dataGaName":1969,"dataGaLocation":1815},"/solutions/education/","education",{"text":1971,"config":1972},"Financial services",{"href":1973,"dataGaName":1974,"dataGaLocation":1815},"/solutions/finance/","financial services",{"title":1526,"links":1976},[1977,1979,1981,1983,1986,1988,1991,1993,1995,1997,1999,2001,2003,2005],{"text":1539,"config":1978},{"href":1541,"dataGaName":1542,"dataGaLocation":1815},{"text":1544,"config":1980},{"href":1546,"dataGaName":1547,"dataGaLocation":1815},{"text":1549,"config":1982},{"href":1551,"dataGaName":1552,"dataGaLocation":1815},{"text":1554,"config":1984},{"href":1556,"dataGaName":1985,"dataGaLocation":1815},"docs",{"text":1577,"config":1987},{"href":1579,"dataGaName":1580,"dataGaLocation":1815},{"text":1989,"config":1990},"What's new",{"href":1637,"dataGaName":1638,"dataGaLocation":1815},{"text":1572,"config":1992},{"href":1574,"dataGaName":1575,"dataGaLocation":1815},{"text":1591,"config":1994},{"href":1593,"dataGaName":1594,"dataGaLocation":1815},{"text":1599,"config":1996},{"href":1601,"dataGaName":1602,"dataGaLocation":1815},{"text":1604,"config":1998},{"href":1606,"dataGaName":1607,"dataGaLocation":1815},{"text":1609,"config":2000},{"href":1611,"dataGaName":1612,"dataGaLocation":1815},{"text":1614,"config":2002},{"href":1616,"dataGaName":1617,"dataGaLocation":1815},{"text":1619,"config":2004},{"href":1621,"dataGaName":1622,"dataGaLocation":1815},{"text":1624,"config":2006},{"href":1626,"dataGaName":1627,"dataGaLocation":1815},{"title":1640,"links":2008},[2009,2011,2013,2015,2017,2019,2023,2028,2030,2032,2034],{"text":1648,"config":2010},{"href":1650,"dataGaName":1642,"dataGaLocation":1815},{"text":1653,"config":2012},{"href":1655,"dataGaName":1656,"dataGaLocation":1815},{"text":1661,"config":2014},{"href":1663,"dataGaName":1664,"dataGaLocation":1815},{"text":1666,"config":2016},{"href":1668,"dataGaName":1669,"dataGaLocation":1815},{"text":1671,"config":2018},{"href":1673,"dataGaName":1674,"dataGaLocation":1815},{"text":2020,"config":2021},"Sustainability",{"href":2022,"dataGaName":2020,"dataGaLocation":1815},"/sustainability/",{"text":2024,"config":2025},"Diversity, inclusion and belonging (DIB)",{"href":2026,"dataGaName":2027,"dataGaLocation":1815},"/diversity-inclusion-belonging/","Diversity, inclusion and belonging",{"text":1676,"config":2029},{"href":1678,"dataGaName":1679,"dataGaLocation":1815},{"text":1686,"config":2031},{"href":1688,"dataGaName":1689,"dataGaLocation":1815},{"text":1691,"config":2033},{"href":1693,"dataGaName":1694,"dataGaLocation":1815},{"text":2035,"config":2036},"Modern Slavery Transparency Statement",{"href":2037,"dataGaName":2038,"dataGaLocation":1815},"https://handbook.gitlab.com/handbook/legal/modern-slavery-act-transparency-statement/","modern slavery transparency statement",{"items":2040},[2041,2044,2047],{"text":2042,"config":2043},"Terms",{"href":1867,"dataGaName":1868,"dataGaLocation":1815},{"text":2045,"config":2046},"Cookies",{"dataGaName":1877,"dataGaLocation":1815,"id":1878,"isOneTrustButton":1358},{"text":2048,"config":2049},"Privacy",{"href":1872,"dataGaName":1873,"dataGaLocation":1815},[2051],{"id":2052,"title":7,"body":1354,"config":2053,"content":2055,"description":1354,"extension":2059,"meta":2060,"navigation":1358,"path":2061,"seo":2062,"stem":2063,"__hash__":2064},"blogAuthors/en-us/blog/authors/jeremy-wagner.yml",{"template":2054},"BlogAuthor",{"name":7,"config":2056},{"headshot":2057,"ctfId":2058},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1749663285/Blog/Author%20Headshots/jeremywagner-headshot.jpg","jeremywagner","yml",{},"/en-us/blog/authors/jeremy-wagner",{},"en-us/blog/authors/jeremy-wagner","qVGFwwZ8NjcAgNoHIzoSozJkDFQZ4I1sbboOxEvREG8",[2066,2075,2083],{"title":2067,"description":2068,"heroImage":2069,"category":1350,"date":2070,"authors":2071,"slug":2074,"externalUrl":1354},"Confidential AI for GitLab Self-Hosted","Give developers AI coding agents in GitLab Duo without source code leaving a hardware-encrypted boundary — no GPUs needed.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1773866173/vte9qh8rriznvyclhkes.png","2026-08-06",[2072,2073],"Mathias Ewald","Martin Paloncy, Edgeless Systems","confidential-ai-for-gitlab-self-hosted",{"title":2076,"description":2077,"heroImage":2078,"category":1350,"date":2079,"authors":2080,"slug":2082,"externalUrl":1354},"Green DevOps: Why carbon measurement belongs in your CI/CD pipeline","CI/CD pipelines have a hidden carbon cost. Here's why measuring it matters, and how you can get started with Eco CI and Carmen in GitLab.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1765809212/noh0mdfn9o94ry9ykura.png","2026-07-09",[2081],"Lysanne Pinto","green-devops-carbon-measurement-cicd-pipeline",{"title":2084,"description":2085,"heroImage":2086,"category":1350,"date":2087,"authors":2088,"slug":2090,"externalUrl":1354},"How to build CI/CD observability at scale","This practical guide to GitLab pipeline analytics helps self-managed users gain operational insights using Prometheus and Grafana.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1774465167/n5hlvrsrheadeccyr1oz.png","2026-04-28",[2089],"Paul Meresanu","how-to-build-ci-cd-observability-at-scale",{"promotions":2092},[2093,2107,2119,2131],{"id":2094,"categories":2095,"header":2097,"text":2098,"button":2099,"image":2104},"ai-modernization",[2096],"ai","Is AI achieving its promise at scale?","Quiz will take 5 minutes or less",{"text":2100,"config":2101},"Get your AI maturity score",{"href":2102,"dataGaName":2103,"dataGaLocation":1580},"/assessments/ai-modernization-assessment/","modernization assessment",{"config":2105},{"src":2106},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/qix0m7kwnd8x2fh1zq49.png",{"id":2108,"categories":2109,"header":2111,"text":2098,"button":2112,"image":2116},"devops-modernization",[2110,1915],"product","Are you just managing tools or shipping innovation?",{"text":2113,"config":2114},"Get your DevOps maturity score",{"href":2115,"dataGaName":2103,"dataGaLocation":1580},"/assessments/devops-modernization-assessment/",{"config":2117},{"src":2118},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138785/eg818fmakweyuznttgid.png",{"id":2120,"categories":2121,"header":2123,"text":2098,"button":2124,"image":2128},"security-modernization",[2122],"security","Are you trading speed for security?",{"text":2125,"config":2126},"Get your security maturity score",{"href":2127,"dataGaName":2103,"dataGaLocation":1580},"/assessments/security-modernization-assessment/",{"config":2129},{"src":2130},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/p4pbqd9nnjejg5ds6mdk.png",{"id":2132,"paths":2133,"header":2136,"text":2137,"button":2138,"image":2143},"github-azure-migration",[2134,2135],"migration-from-azure-devops-to-gitlab","integrating-azure-devops-scm-and-gitlab","Is your team ready for GitHub's Azure move?","GitHub is already rebuilding around Azure. Find out what it means for you.",{"text":2139,"config":2140},"See how GitLab compares to GitHub",{"href":2141,"dataGaName":2142,"dataGaLocation":1580},"/compare/gitlab-vs-github/github-azure-migration/","github azure migration",{"config":2144},{"src":2118},{"header":2146,"blurb":2147,"button":2148,"secondaryButton":2153},"Start building faster today","See what your team can do with the intelligent orchestration platform for DevSecOps.\n",{"text":2149,"config":2150},"Get your free trial",{"href":2151,"dataGaName":1380,"dataGaLocation":2152},"https://gitlab.com/-/trial_registrations/new?glm_content=default-saas-trial&glm_source=about.gitlab.com/","feature",{"text":1853,"config":2154},{"href":1705,"dataGaName":1385,"dataGaLocation":2152},1786803771479]