https://jihye.dokkaebiclub.dev/component---src-templates-post-tsx-…om-gatsby-cloud-mdx-7195db52162aedcca82f.js

1"use strict";(self.webpackChunkpersonal_site=self.webpackChunkpersonal_site||[]).push([[626],{191:function(e,t,a){a.r(t),a.d(t,{Head:function(){return N},default:function(){return G}});var n=a(6310),l=a(2990);function s(e){const t=Object.assign({p:"p",hr:"hr",h2:"h2",a:"a",span:"span",ol:"ol",li:"li",strong:"strong",code:"code",figure:"figure",figcaption:"figcaption",pre:"pre",ul:"ul"},(0,n.RP)(),e.components);return l.createElement(l.Fragment,null,l.createElement("div",{className:"lead"},l.createElement(t.p,null,"이 웹사이트는 Gatsby JS로 만들었고 Gatsby Cloud를 통해 호스팅되고 있었다.\nGatsby Cloud 서비스 종료에 맞춰 Netlify로 호스팅 서비스를 변경한 과정을 정리해서 소개한다.")),"\n",l.createElement(t.hr),"\n",l.createElement(t.h2,{id:"배포-플랫폼-gatsby-cloud-서비스-종료",style:{position:"relative"}},l.createElement(t.a,{href:"#%EB%B0%B0%ED%8F%AC-%ED%94%8C%EB%9E%AB%ED%8F%BC-gatsby-cloud-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A2%85%EB%A3%8C","aria-label":"배포 플랫폼 gatsby cloud 서비스 종료 permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" class="svg-inline--fa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z"/></svg>'}})),"배포 플랫폼 Gatsby Cloud 서비스 종료"),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:4.76;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/c88aa860a8b276c875a6ee7a149cb79c/95fbb/final-reminder-gatsby-cloud-end-of-service-date-email-capture.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 21%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwUlEQVR42k2OwVLDMAxE8///xZEB2pS6SYoT27LsWJJTSki5xHg4sYedt++0zePxwyzOee8DAMY5YYi1Jd/mxDmL5DqBJeQ8EwfhwIRf662U0iyfbKGzMDi8Wtfr8fyh3y/doYK1g9aviK0D5fEymRa8erOnF9e22If7vTESn4bDEfpno65+sEZNRo3TWY8nBx343pjRWE9U32GMNFPGJC7M67Y16/eGMZEsnBeWhagerS2JuNpqKohI+cu+7+VffgEdato2r/TeNgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/c88aa860a8b276c875a6ee7a149cb79c/411c4/final-reminder-gatsby-cloud-end-of-service-date-email-capture.webp 600w,\n/static/c88aa860a8b276c875a6ee7a149cb79c/e0c4a/final-reminder-gatsby-cloud-end-of-service-date-email-capture.webp 1172w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/c88aa860a8b276c875a6ee7a149cb79c/dface/final-reminder-gatsby-cloud-end-of-service-date-email-capture.png 600w,\n/static/c88aa860a8b276c875a6ee7a149cb79c/95fbb/final-reminder-gatsby-cloud-end-of-service-date-email-capture.png 1172w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/c88aa860a8b276c875a6ee7a149cb79c/dface/final-reminder-gatsby-cloud-end-of-service-date-email-capture.png"\n            alt="Gatsby Cloud 무료 사용자는 2023년 9월 29일 전에 마이그레이션을 해야 한다고 안내 받았다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Gatsby Cloud 무료 사용자는 2023년 9월 29일 전에 마이그레이션을 해야 한다고 안내 받았다.</figcaption>\n  </figure>'}}),"\n",l.createElement(t.p,null,"9월부터 사용하지 않던 Netlify로부터 Gatsby Cloud 서비스 종료 이메일을 몇 개 받았다."),"\n",l.createElement(t.p,null,'Netlify 공식 블로그의 공지 글 "',l.createElement(t.a,{href:"https://www.netlify.com/blog/gatsby-cloud-evolution/"}

1,"Netlify Announces the Evolution of Cloud Platform"),'"의 주요 내용은 다음과 같다.'),"\n",l.createElement(t.ol,null,"\n",l.createElement(t.li,null,"Netlify는 2023년 2월에 Gatsby를 인수했다."),"\n",l.createElement(t.li,null,"Netlify와 Gatsby Cloud는 비슷한 서비스이기 때문에 효율화를 위해 Gatsby Cloud 서비스를 종료한다. (2023년 9월부터, 가격 정책에 따라 순차적으로)"),"\n",l.createElement(t.li,null,"Gatsby 웹사이트를 배포 플랫폼에 쉽게 배포할 수 있게 도와주는 새로운 Adapter 기능을 발표했다. (2023년 8월 ",l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/reference/release-notes/v5.12"},"Gatsby v5.12 릴리즈"),")"),"\n"),"\n",l.createElement(t.p,null,"무료 사용자라 2023년 9월 29일 전에 다른 배포 서비스로 변경해야 했다."),"\n",l.createElement(t.hr),"\n",l.createElement(t.h2,{id:"gatsby-cloud에서-사용한-기능-및-설정",style:{position:"relative"}},l.createElement(t.a,{href:"#gatsby-cloud%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%9C-%EA%B8%B0%EB%8A%A5-%EB%B0%8F-%EC%84%A4%EC%A0%95","aria-label":"gatsby cloud에서 사용한 기능 및 설정 permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" class="svg-inline--fa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z"/></svg>'}})),"Gatsby Cloud에서 사용한 기능 및 설정"),"\n",l.createElement(t.p,null,"서비스 변경 전에 현재 웹사이트에서 사용하고 있는 Gatsby Cloud 전용 기능과 설정을 살펴본다."),"\n",l.createElement(t.ol,null,"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"리다이렉트")," 1개: HTTP 리다이렉트를 위해 ",l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect"},l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"createRedirect")))))," 함수를 사용했다."),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"ts","data-theme":"github-dark"},"gatsby-node.ts"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"ts","data-theme":"github-dark"},l.createElement(t.code,{"data-line-numbers":"","data-language":"ts","data-theme":"github-dark",style:{display:"grid"},"data-line-numbers-max-digits":"1"},l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"import"),l.createElement(t.span,{style:{color:"#F97583"}}," type"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," {GatsbyNode} "),l.createElement(t.span,{style:{color:"#F97583"}},"from"),l.createElement(t.span,{style:{color:"#9ECBFF"}},' "gatsby"')),"\n",l.createElement(t.span,{"data-line":""}," "),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"export"),l.createElement(t.span,{style:{color:"#F97583"}}," const"),l.createElement(t.span,{style:{color:"#B392F0"}}," createPages"),l.createElement(t.span,{style:{color:"#F97583"}}

1,":"),l.createElement(t.span,{style:{color:"#B392F0"}}," GatsbyNode"),l.createElement(t.span,{style:{color:"#E1E4E8"}},"["),l.createElement(t.span,{style:{color:"#9ECBFF"}},'"createPages"'),l.createElement(t.span,{style:{color:"#E1E4E8"}},"] "),l.createElement(t.span,{style:{color:"#F97583"}},"="),l.createElement(t.span,{style:{color:"#F97583"}}," async"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," ({"),l.createElement(t.span,{style:{color:"#FFAB70"}},"actions"),l.createElement(t.span,{style:{color:"#E1E4E8"}},", "),l.createElement(t.span,{style:{color:"#FFAB70"}},"graphql"),l.createElement(t.span,{style:{color:"#E1E4E8"}},"}) "),l.createElement(t.span,{style:{color:"#F97583"}},"=>"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," {")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"    const"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," {"),l.createElement(t.span,{style:{color:"#79B8FF"}},"createRedirect"),l.createElement(t.span,{style:{color:"#E1E4E8"}},"} "),l.createElement(t.span,{style:{color:"#F97583"}},"="),l.createElement(t.span,{style:{color:"#E1E4E8"}}," actions")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#B392F0"}},"    createRedirect"),l.createElement(t.span,{style:{color:"#E1E4E8"}},"({")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"        fromPath: "),l.createElement(t.span,{style:{color:"#9ECBFF"}},"`/`"),l.createElement(t.span,{style:{color:"#E1E4E8"}},",")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"        toPath: "),l.createElement(t.span,{style:{color:"#9ECBFF"}},"`/blog`"),l.createElement(t.span,{style:{color:"#E1E4E8"}},",")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"    })")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"}"))))),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Gatsby Cloud 서비스 가입"),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Gatsby Cloud 프로젝트 생성 및 GitHub 저장소와 연동"),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"배포 전용 브랜치")," 설정 및 ",l.createElement(t.strong,null,"자동 빌드")," 기능 사용\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:1.82;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/89e2057eba35414345346980a3effc34/ad089/gatsby-cloud-site-setting.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 54.833333333333336%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42oVSW3LDIAz0/Q/Uc/QGSSed1k4dzMNICAHOUk/zUzfd0cgga1cgMYzTGHxgm70LdrHbMzTz4V5fTsHEcfx0zg2Xy/v5fK7faK1t/2HP2fMGY8x0nax1y7KIyFF297v0A9h1cvTibhQcpZSY01/ViBh8+Bgp54zkThbJBCILoqVUphRT1KpMjIPA28WVUh4qgCTlmFttA60JljUjNUKACGstmjsUorymHvgB6mMrnFV1oMjWWKzwY/6aieJ+w2c9q02lqwwoZW4GZEhxEvRBaxunmVglV1iSWurBFDoZR53nW1U1XE5Xdw1ipb2NfjQZNi3wMlM9JjNzH1LCtevso0czyuZYgihszSXVLR+Nv5PXNTrn9ztDotWCIVJcA16cd/jU0iO/UUq5A8V2g3wGPNUfAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/89e2057eba35414345346980a3effc34/411c4/gatsby-cloud-site-setting.webp 600w,\n/static/89e2057eba35414345346980a3effc34/fad02/gatsby-cloud-site-setting.webp 2539w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/89e2057eba35414345346980a3effc34/dface/gatsby-cloud-site-setting.png 600w,\n/static/89e2057eba35414345346980a3effc34/ad089/gatsby-cloud-site-setting.png 2539w"\n            sizes="(max-width: 600px) 100v

1w, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/89e2057eba35414345346980a3effc34/dface/gatsby-cloud-site-setting.png"\n            alt="Gatsby Cloud 사이트 설정 화면"\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Gatsby Cloud 사이트 설정 화면</figcaption>\n  </figure>'}})),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"커스텀 도메인")," 설정\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:1.77;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/08119213c706d05061d4a658c02ab60e/b331b/gatsby-cloud-custom-domains-config.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 56.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYElEQVR42pWQ2VLDIBSGff+XUR/AcbxwrGuTpi5dkkhKCw2BhOUkIamJdNFRr+zhH+YA8w3wnXRdh1ASRfF8Nl8scH9MnTgY42UwGvt+MJlMj4P/rLsftV/2bnS/9g9ne1hKydJMFqo/srawUipNmRC5lIpnvCikrS00YADAGK4rb10Nl8on4FMYrvSIGC+15WYHs4yHYeRsIbQIw/c4RloZaZXUWku5ymGA4SHJH7F6wuruXXhY3RKr2h28adumrpuq+vrLv59dbfowg+laTqgk8LFyMduZlJ3LvqGuh07UB2/9t7CZ6u/jdDCe+9HKBQkTQjFncoxYwquI6belmJH8ZSk88bH1v8vhZm77YWKuAnQ5ii+88GqMBiG9mZJnBl5a+Fh6CT+dmbMXfv4qHrC+S4rrhcHwZbu1G610kRcZY5TQnItc5La1ZVM64zVAkDXOc0BMsC4Dap5oRast/AnVGHG7xclGsQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/08119213c706d05061d4a658c02ab60e/411c4/gatsby-cloud-custom-domains-config.webp 600w,\n/static/08119213c706d05061d4a658c02ab60e/21b05/gatsby-cloud-custom-domains-config.webp 855w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/08119213c706d05061d4a658c02ab60e/dface/gatsby-cloud-custom-domains-config.png 600w,\n/static/08119213c706d05061d4a658c02ab60e/b331b/gatsby-cloud-custom-domains-config.png 855w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/08119213c706d05061d4a658c02ab60e/dface/gatsby-cloud-custom-domains-config.png"\n            alt="Gatsby Cloud 도메인 설정 화면. gatsby.io 서브도메인도 커스텀 도메인으로 리다이렉트 할 수 있다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Gatsby Cloud 도메인 설정 화면. gatsby.io 서브도메인도 커스텀 도메인으로 리다이렉트 할 수 있다.</figcaption>\n  </figure>'}})),"\n"),"\n"),"\n",l.createElement(t.p,null,"배포를 위한 핵심 기능만 사용했기 때문에 설정이 간단하다.\n한번 설정하면 소스 코드를 배포 전용 브랜치에 업데이트 할 때마ë

1‹¤ 자동으로 Gatsby Cloud에서 배포를 진행한다."),"\n",l.createElement(t.p,null,"이 설정을 그대로 유지하면서 Netlify로 배포 플랫폼을 변경하기 위해 ",l.createElement(t.strong,null,"Gatsby Cloud에서 브랜치 푸시 자동 빌드 기능을 먼저 꺼둔다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:2.05;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/be987a013a6ad943588fe9be29e3bf59/a044f/gastsby-cloud-disable-branch-and-pull-request-builds.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 48.83333333333334%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42n1Ry27DMAzz/3/QvmPnbYeuS9omWRq/ZcuWPXYFCuTQCgIRBCZFSmqaJu9C1GyNNcb0V9WCje9vh/lgtNkup7Mah3Ge5ya91lpK7a/ZrZUstcj/46LG04jy3jvn8esZTUTAvPMfqMzq14tdZw3PMcZnZCKCr5yztQ4z8RJ8xblQSKkkkUqRMJyZc0rPbKNgO0UGKohBlZgyl5CYbphdhJygieujE0O5wj8mg8xcYNs563uTNfDX8TxdbSjNc3WpBG4kPdZOtSfpmnuRnQsFq8ZY7E4nWTd7/BnOl3k8T8dhXNYNR0Qb563zC/TanowFbNftlrO2xdLHYfj8PgHHX73YMGk/a7+YsEWGo7bPr2JAvoQYuB0umIiwg0QRSyucgfcPBJXbdXf1B873Rh7bS8EwAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/be987a013a6ad943588fe9be29e3bf59/411c4/gastsby-cloud-disable-branch-and-pull-request-builds.webp 600w,\n/static/be987a013a6ad943588fe9be29e3bf59/c2663/gastsby-cloud-disable-branch-and-pull-request-builds.webp 2527w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/be987a013a6ad943588fe9be29e3bf59/dface/gastsby-cloud-disable-branch-and-pull-request-builds.png 600w,\n/static/be987a013a6ad943588fe9be29e3bf59/a044f/gastsby-cloud-disable-branch-and-pull-request-builds.png 2527w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/be987a013a6ad943588fe9be29e3bf59/dface/gastsby-cloud-disable-branch-and-pull-request-builds.png"\n            alt="Gatsby Cloud 사이트 설정에서 브랜치 변경에 따른 자동 빌드 기능을 비활성화한다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Gatsby Cloud 사이트 설정에서 브랜치 변경에 따른 자동 빌드 기능을 비활성화한다.</figcaption>\n  </figure>'}})),"\n",l.createElement(t.hr),"\n",l.createElement(t.h2,{id:"netlify로-배포-플랫폼-변경하기",style:{position:"relative"}},l.createElement(t.a,{href:"#netlify%EB%A1%9C-%EB%B0%B0%ED%8F%AC-%ED%94%8C%EB%9E%AB%ED%8F%BC-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0","aria-label":"netlify로 배포 플랫폼 변경하기 permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" class="svg-inline--fa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L16

15.8 320h95.1l21.3-128H187.1z"/></svg>'}})),"Netlify로 배포 플랫폼 변경하기"),"\n",l.createElement(t.p,null,"Gatsby 웹사이트를 Netlify로 배포하기 위해선 소스코드와 Netlify 서비스 설정이 모두 필요하다. 변경 절차는 다음과 같다."),"\n",l.createElement(t.ol,null,"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Gatsby 버전 업데이트"),"\n",l.createElement(t.p,null,"다양한 플랫폼에 배포하기 위한 새 기능 Adapter가 포함된 최신 버전인 ",l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/reference/release-notes/v5.12"},"Gatsby v5.12"),"를 설치한다.\ngatsby 패키지 뿐만 아니라 플러그인도 모두 함께 업데이트되었다.\n",l.createElement(t.a,{href:"https://www.npmjs.com/package/npm-check-updates"},"npm-check-updates"),"를 사용해서 ",l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"package.json"))))," 파일에 명시된 버전을 업데이트하고 패키지를 ì

1„¤ì¹˜í–ˆë‹¤."),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"shell","data-theme":"github-dark"},"'gatsby'로 시작하는 패키지 최신버전 확인하기"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"shell","data-theme":"github-dark"},l.createElement(t.code,{"data-language":"shell","data-theme":"github-dark",style:{display:"grid"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#B392F0"}},"ncu"),l.createElement(t.span,{style:{color:"#9ECBFF"}},' "/^gatsby.*$/"'))))),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"shell","data-theme":"github-dark"},"'gatsby'로 시작하는 패키지 최신버전을 package.json 파일에 업데이트하고 패키지 설치하기"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"shell","data-theme":"github-dark"},l.createElement(t.code,{"data-language":"shell","data-theme":"github-dark",style:{display:"grid"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#B392F0"}},"ncu"),l.createElement(t.span,{style:{color:"#9ECBFF"}},' "/^gatsby.*$/"'),l.createElement(t.span,{style:{color:"#79B8FF"}}," -u")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#B392F0"}},"npm"),l.createElement(t.span,{style:{color:"#9ECBFF"}}," install"))))),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:2.86;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/644a58985f849aba43c00d5ed832ee49/f6d08/gatsby-packages-diff.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 35%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUElEQVR42jWRSVfDIBSF81/aY9pMbUIgEAiQOU1ISkd148KF1o0Lh/8vrXrO293vvne5WIiqhClU7QPWebxbJsUC5jYQgdyl9x9w+xKSjrARFToSo8taN60XsTTj4MbCVAmxF0zjTIXN6GeNcd6BzOcTPr6D8TkiLec7wXeMTVGlgqK3YwPwJa4tBCue9gxvQFJ6zNwkcw/OPLCIxbo8elytIpGRnpM+QXXACgfRuQ9nLrABtxAdGNeUa8gGUOsgM8lLI9xif0F9MbHpDcBMRcW0zpWTlGa1ywZjVuxPG2G5DcTGobUdcV/q9OET6td/8zbNJiinsBgd2pg3X81GKPNznp+kPMByQuZ4UjukDJszffxGuzdAh18gl6ckn1B3WJPWJZUpz4K4S6kidMDpENI2zAcnlva1sBHpS7R5WqHKAFcmHQBpwkJ55kdMYUj+AFXhZhHmbasDAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/644a58985f849aba43c00d5ed832ee49/411c4/gatsby-packages-diff.webp 600w,\n/static/644a58985f849aba43c00d5ed832ee49/5ada6/gatsby-packages-diff.webp 2030w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/644a58985f849aba43c00d5ed832ee49/dface/gatsby-packages-diff.png 600w,\n/static/644a58985f849aba43c00d5ed832ee49/f6d08/gatsby-packages-diff.png 2030w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/644a58985f849aba43c00d5ed832ee49/dface/gatsby-packages-diff.png"\n            alt="Gatsby v5.10에서 v5.12로 변경한 package.json 내용 일부"\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Gatsby v5.10에서 v5.12로 변경한 package.json 내용 일부</figcaption>\n  </figure>'}}),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Gatsby 공식 ",l.createElement(t.a,{href:"https://www.npmjs.com/package/gatsby-adapter-netlify"},l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"gatsby-adapter-netlify")))))," 플러그인 설치 및 설정"),"\n",l.createElement(t.p,null,"Gatsby가 공식 지원하는 배포 플랫폼을 사용한다면 관련 아답터 패키지를 ì

1„¤ì¹˜í•˜ê³  설정하지 않아도 자동으로 진행된다.\n(참고 ",l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/zero-configuration-deployments/"},"Zero-Configuration Deployments"),")\n하지만 패키지 설치와 설정을 명시하면 배포 속도가 향상된다. Netlify를 계속 사용할 예정이기 때문에 아답터 설치 및 설정을 진행했다."),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"shell","data-theme":"github-dark"},"gatsby-adapter-netlify 설치하기"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"shell","data-theme":"github-dark"},l.createElement(t.code,{"data-language":"shell","data-theme":"github-dark",style:{display:"grid"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#B392F0"}},"npm"),l.createElement(t.span,{style:{color:"#9ECBFF"}}," install"),l.createElement(t.span,{style:{color:"#9ECBFF"}}," gatsby-adapter-netlify"))))),"\n",l.createElement(t.p,null,"패키지를 ì

1„¤ì¹˜í–ˆë‹¤ë©´ gatsby-config.ts 파일에 아답터 설정을 한다."),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"github-dark"},"gatsby-config.ts 아답터 명시하기"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"typescript","data-theme":"github-dark"},l.createElement(t.code,{"data-language":"typescript","data-theme":"github-dark",style:{display:"grid"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"import"),l.createElement(t.span,{style:{color:"#F97583"}}," type"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," {GatsbyConfig} "),l.createElement(t.span,{style:{color:"#F97583"}},"from"),l.createElement(t.span,{style:{color:"#9ECBFF"}},' "gatsby"'),l.createElement(t.span,{style:{color:"#E1E4E8"}},";")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"import"),l.createElement(t.span,{style:{color:"#E1E4E8"}}," adapter "),l.createElement(t.span,{style:{color:"#F97583"}},"from"),l.createElement(t.span,{style:{color:"#9ECBFF"}},' "gatsby-adapter-netlify"')),"\n",l.createElement(t.span,{"data-line":""}," "),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"const"),l.createElement(t.span,{style:{color:"#79B8FF"}}," config"),l.createElement(t.span,{style:{color:"#F97583"}},":"),l.createElement(t.span,{style:{color:"#B392F0"}}," GatsbyConfig"),l.createElement(t.span,{style:{color:"#F97583"}}," ="),l.createElement(t.span,{style:{color:"#E1E4E8"}}," {")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"    adapter: "),l.createElement(t.span,{style:{color:"#B392F0"}},"adapter"),l.createElement(t.span,{style:{color:"#E1E4E8"}},"(),")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#F97583"}},"    ...")),"\n",l.createElement(t.span,{"data-line":""},l.createElement(t.span,{style:{color:"#E1E4E8"}},"}"))))),"\n",l.createElement(t.p,null,"Gatsby는 다양한 배포 플랫폼에 배포할 수 있다.\n현재 아답터 플러그인은 Netlify뿐이지만 자유롭게 ",l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"gatsby-adapter-*"))))," 플러그인을 제작할 수 있기 때문에 시간이 가면 하나씩 늘어날 것이다."),"\n",l.createElement(t.p,null,"기존에 리다이렉트를 위해 사용하던 함수도 아답터가 처리하기 때문에 변경이 필요 없다."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Netlify 서비스 가입"),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Netlify 프로젝트 생성 및 GitHub 저장소와 연동"),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"배포 전용 브랜치")," 설정 및 ",l.createElement(t.strong,null,"자동 빌드")," 기능 사용"),"\n",l.createElement(t.p,null,"배포 전용 브랜치는 ",l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"main")))),"으로 설정되어 있다. ",l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"deploy"))))," 브랜치를 사용해서 변경했다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:1.9;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/612f235ce85ba6bd95e3f445785b2606/f9c26/netlify-build-branch-config.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 52.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABrUlEQVR42k1Ry27cMAz0/39G+wftuffeegrSBMm+6s2ubVkv601R7tjboiUGFC

1FhhuSou4ucUsq52GVh5rYHzlibjUXoBTlSi8TIIVftogl5tv79eOpO58swTimXWqtzDvx1XafAT1f5cp1fPuRzL06zG2MbfB0CD5FFalNeL651SpsQYyGKOT//fH19O2it7wsJZaxWSkokraRRymyF8s6te9xD66y1qPZRGZMvzjPREOqEga3FGriKKVduVBmoe6ZaPzx33nui+iDPs1RaQ2oMPGprF0vMwhhtLKbzIUJ6s4cIuLqKzgseQMbOBpMay5Wm2EJh6MGJwdpJbKrQBRM9K6N/3cigPXYgonESeEONzsK4zb/WBmMOx9PxfL70vYCKVPOsjDE37MxthcFtJzvnH0LonCruNt3FeyVn9KJSck4lJ/wtlbwZtv4NPAv4GQJqEflmy+DSzeXDpN8GdZrtfUmjy4Chpsva46uEasDiGxzX3uuStxWYf0jzdJuOw9wr+0uaXlqb2ZUGeFqBzK379CV+/hq/fc/7h/2ZAu6/U5HelxjXf9H+R2vtN+Ijd6LItGieAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/612f235ce85ba6bd95e3f445785b2606/411c4/netlify-build-branch-config.webp 600w,\n/static/612f235ce85ba6bd95e3f445785b2606/da28f/netlify-build-branch-config.webp 2880w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/612f235ce85ba6bd95e3f445785b2606/dface/netlify-build-branch-config.png 600w,\n/static/612f235ce85ba6bd95e3f445785b2606/f9c26/netlify-build-branch-config.png 2880w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/612f235ce85ba6bd95e3f445785b2606/dface/netlify-build-branch-config.png"\n            alt="Netlify 사이트 설정에서 배포 브랜치를 설정한다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Netlify 사이트 설정에서 배포 브랜치를 설정한다.</figcaption>\n  </figure>'}}),"\n",l.createElement(t.p,null,"배포 브랜치에 PR을 만들면 자동으로 프리뷰를 확인할 수 있다. GitHub PR 댓글이나 Netlify 배포 페이지에서 확인 할 수 있다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:2.16;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/555edb253eb6a498dee4674c731f521d/684d5/github-pr-netlify-preview.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 46.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABS0lEQVR42n2Q226EIBRFfW68oCIIooCCjngfp52mr/3/f+oZnUmaPjRZnCwedg5sL/r4jNxsm0nUPRU1ryyXbV6aE8zUP3hB3fmyFmtrh02aoe4mZQfrNt2OIBHmKCuilCNcgPzBCwIcxCRtS+sW2y/KOKHbph21Haum9xEN4jylFeQDlIP/gnpwopT5IaGFNpcZYRbhIhMXH5G3MA0TGiDChE5IARLGv0jyRxjgEhbf5/2rn3amRjV/582VyJmohegVV3P2kI00t9dcEeZnOC9E6YbJwFetS1iTyg2rK5ZHTK6Z3rP6hoVLiEwooGCGKXtupkLDzna4dtMO2s/3bnrX3ZLx+knRYK4xky9UdG6G10MfcSYOisOPPjGPEnZUzVHKoI6HQO1PXmFeGehZmaGsL7Lphe7gKo2rdJdXF8QdYl0sJkRNcPR/8gNy8TpQUWBGAwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/555edb253eb6a498dee4674c731f521d/411c4/github-pr-netlify-preview.webp 600w,\n/static/555edb253eb6a498dee4674c731f521d/89d57/github-pr-netlify-preview.webp 1590w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/555edb253eb6a498dee4674c731f521d/dface/github-pr-netlify-preview.png 600w,\n/static/555edb253eb6a498dee4674c731f521d/684d5/github-pr-netlify-preview.png 1590w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/555edb253eb6a498dee4674c731f521d/dface/github-pr-netlify-preview.png"\n            alt="배포 브랜치에 PR이 생성되면 자동으로 Netlify 프리뷰가 만들어진다. GitHub PR 댓글 캡쳐"\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">배포 브랜치에 PR이 생성되면 자동으로 Netlify 프리뷰가 만들어진다. GitHub PR 댓글 캡쳐</figcaption>\n  </figure>'}}),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"운영 배포")," 확인"),"\n",l.createElement(t.p,null,"프리뷰에서 문제가 없다면 PR 머지를 진행한다. 그러면 운영 환경에 배포가 진행된다. ",l.createElement(t.strong,null,"heyjihye.netlify.app")," 도메인에 잘 배포된 것을 확인했다.\n만약 서브도메인으로 사용한 사이트 이름이 마음에 들지 않는다면 변경할 수 있다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:2.19;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/06ffb0039d486b8328fbe8e13075bc13/b61eb/netlify-production-domain.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 45.666666666666664%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABGUlEQVR42nVR226FIBDk/z+wSU9V7KH1LipXAcWOmD60tpOVhDA7OzsSu3vWxbaX3rt1dZxPdl1DCEppKVUI27btqH2PgNFaG2OtxVFSSkDi0zQvCxgxHmDZbxhj0HokxBvAPpv7YRw5996DBPaTsYKWWV5kRQEjKk07hW8gkJdCxvT2U/q8wj9Ew+X+BgJhPs3OudPJjtq7rq/rpm6apm1xPf4B+ATrY+

1drt0tPSDHNMwpB4BWxwbZJOa2AQ66rd+60zT6qR5bT8j0r6JL8IwX0oZAjdoaRIYWCD63otM6FNIwIqTDEJlmshslczMM8cjH9YTWdYD8YG7Qmv9YIW6ja+ll/Cq2QMMSuCulPYhJMvrzlrzmt+vELUUUIPdV9zCAAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/06ffb0039d486b8328fbe8e13075bc13/411c4/netlify-production-domain.webp 600w,\n/static/06ffb0039d486b8328fbe8e13075bc13/712d0/netlify-production-domain.webp 2062w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/06ffb0039d486b8328fbe8e13075bc13/dface/netlify-production-domain.png 600w,\n/static/06ffb0039d486b8328fbe8e13075bc13/b61eb/netlify-production-domain.png 2062w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/06ffb0039d486b8328fbe8e13075bc13/dface/netlify-production-domain.png"\n            alt="Netlify 사이트 이름 변경하기"\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Netlify 사이트 이름 변경하기</figcaption>\n  </figure>'}}),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"커스텀 도메인")," 설정"),"\n",l.createElement(t.p,null,"Netlify에서 커스텀 도메인을 생성한다.\n그리고 도메인을 구입한 서비스에서 DNS 레코드 값을 Gatsby Cloud 설정값에서 Netlify 설정값으로 변경한다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:4;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/d73cbac9512a560b428a5cc74f9a629b/949cf/gabia-dns-records-config.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAs0lEQVR42pVOQW7DMAzz37pTj+0H9rtil/XSVyWrnUa2bFOyUqUDCuw4ghAkiKQUztf583Y/ff98XKbDf3j8mgI1ibktDKrdmRucVLHyu++/9a/AGwk2RuZKUEFvrW1m22YCIcqbwwyAqhJR39FUxC21sq+C7FCIdmCYeX2sq4qOMfTFXIq4e4zeEVOCCOUy32PrCB68ulqVmf2SjzHGZVk80l4opXiQP+SrlJIrC/OeAjwBma8N6ocW/VgAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/d73cbac9512a560b428a5cc74f9a629b/411c4/gabia-dns-records-config.webp 600w,\n/static/d73cbac9512a560b428a5cc74f9a629b/259b6/gabia-dns-records-config.webp 1740w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/d73cbac9512a560b428a5cc74f9a629b/dface/gabia-dns-records-config.png 600w,\n/static/d73cbac9512a560b428a5cc74f9a629b/949cf/gabia-dns-records-config.png 1740w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/d73cbac9512a560b428a5cc74f9a629b/dface/gabia-dns-records-config.png"\n            alt="가비아 DNS 레코드로 설정된 값을 새로 변경했다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">가비아 DNS 레코드로 설정된 값을 새로 변경했다.</figcaption>\n  </figure>'}}),"\n",l.createElement(t.p,null,"수정 후 5분이 되지 않아 연결이 완료되었다."),"\n",l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="flex:1.47;">\n    <span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/f1e562e31155b304351c5205b437c2fd/699cd/netlify-custom-domains-config.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 68%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB4UlEQVR42nVSWY7UMBT08RFn

1QHxwBG7AFwIhBIOEuunpZdKddFYncex4tyknDAoaUXqybPnVq7eRkvqiFsYopQ3tB62NMZZNnHPh/IqwmjVWcK61nqUsy/LxcCAd7Ts6gIBvY61UCTMgZQghxhg2cC4FxGmtBYV0AO0RD374yK63pyw7nk6Xp2wcmRAzUoovgLAwAg9oLsyU2xYoIVVhLfS2lsQXV0JpL6VcyUDTtlVV103TURr/g7/RSdt2UirUgPh4I1aDAG0HG8ax7dI5DCNjE0oQCTPE1xBk9+vx/JQdz5eBMbzZxIahZwzVigkMXDjHU6X+pVYB4VmfoK9+yXit5NZ156qqRqZDVCGup4nRhCh9DEtT8+LeD2Nq2J8ylqOe/ees/lG0V2Zv3F2nxbjbd+JQsz01FYSsyfICA4LilhwL7vOm7WmplYBGDC5ZdBOKHft+1iAHZ/J7CeUXZOEPNc2a+obNmWQ7SW48sr1zWfdjwV2t4Orze9UPqUFkOwHj48O1+7i7fj1VSDgXoZhjIWOlYqXTRbl/Bka+7ez+4r7vbdFgAMGk5RRGybRBSCj4ra3Qxv08aqU9efVGvHsvX78VH75gDQPWETuDxRbzzIXAqmMSW4OPNuHTg5ml/w26YiacVp5hFgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n  ></span>\n  <picture>\n          <source\n              srcset="/static/f1e562e31155b304351c5205b437c2fd/411c4/netlify-custom-domains-config.webp 600w,\n/static/f1e562e31155b304351c5205b437c2fd/201e6/netlify-custom-domains-config.webp 2232w"\n              sizes="(max-width: 600px) 100vw, 600px"\n              type="image/webp"\n            />\n          <source\n            srcset="/static/f1e562e31155b304351c5205b437c2fd/dface/netlify-custom-domains-config.png 600w,\n/static/f1e562e31155b304351c5205b437c2fd/699cd/netlify-custom-domains-config.png 2232w"\n            sizes="(max-width: 600px) 100vw, 600px"\n            type="image/png"\n          />\n          <img\n            class="gatsby-resp-image-image"\n            src="/static/f1e562e31155b304351c5205b437c2fd/dface/netlify-custom-domains-config.png"\n            alt="Netlify 도메인 설정 페이지에서 커스텀 도메인이 연결된 모습을 확인할 수 있다."\n            title=""\n            loading="lazy"\n            decoding="async"\n            style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n          />\n        </picture>\n  </a>\n    </span>\n    <figcaption class="gatsby-resp-image-figcaption">Netlify 도메인 설정 페이지에서 커스텀 도메인이 연결된 모습을 확인할 수 있다.</figcaption>\n  </figure>'}}),"\n",l.createElement(t.p,null,"Netlify는 Netlify 서브도메인(xxx.netlify.app)을 커스텀 도메인으로 리다이렉트 하는 기능을 웹사이트에서 제공하지 않는다.\n이를 위해서는 소스코드 변경이 필요하다. static 폴더에 ",l.createElement(t.span,{"data-rehype-pretty-code-figure":""},l.createElement(t.code,{"data-language":"plaintext","data-theme":"github-dark",style:{backgroundColor:"#24292e",color:"#e1e4e8"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"_redirects"))))," 파일 생성하고 내용을 추가한다."),"\n",l.createElement(t.figure,{"data-rehype-pretty-code-figure":""},l.createElement(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"text","data-theme":"github-dark"},"static/_redirects"),l.createElement(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"text","data-theme":"github-dark"},l.createElement(t.code,{"data-language":"text","data-theme":"github-dark",style:{display:"grid"}},l.createElement(t.span,{"data-line":""},l.createElement(t.span,null,"https://heyjihye.netlify.app/* https://heyjihye.com/:splat 301!"))))),"\n"),"\n"),"\n",l.createElement(t.hr),"\n",l.createElement(t.h2,{id:"후기",style:{position:"relative"}},l.createElement(t.a,{href:"#%ED%9B%84%EA%B8%B0","aria-label":"후기 permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" class="svg-inline--fa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L16

15.8 320h95.1l21.3-128H187.1z"/></svg>'}})),"후기"),"\n",l.createElement(t.p,null,"Gatsby Cloud 서비스 종료와 함께 대체할 수 있는 Netlify를 공식 지원하기 때문에 배포 플랫폼 변경은 어렵지 않게 진행했다.\n다만 새 서비스의 사용법과 설정을 파악하는 데 시간이 필요했다."),"\n",l.createElement(t.p,null,"기존 ",l.createElement(t.strong,null,"커스텀 도메인"),"을 유지한 덕분에 배포 플랫폼을 변경해도 웹사이트 주소는 유지할 수 있었다.\n그러지 않았다면 배포 서비스 따라 웹사이트 주소가 변경되면서 처리해야 할 일이 훨씬 늘었을 것이다.\n구글 서치 콘솔, 구글 애널리틱스 등 관련 서비스도 다시 등록 해야 하는데 기존에 쌓였던 검색엔진 상위 노출 점수도 분명히 무용지물이 되었을 것이다.\n장기 운영할 웹사이트라면 배포 플랫폼과 독립적으로 주소를 유지할 수 있도록 커스텀 도메인을 사용하는 것이 좋다."),"\n",l.createElement(t.hr),"\n",l.createElement(t.h2,{id:"참고-자료",style:{position:"relative"}},l.createElement(t.a,{href:"#%EC%B0%B8%EA%B3%A0-%EC%9E%90%EB%A3%8C","aria-label":"참고 자료 permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" class="svg-inline--fa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z"/></svg>'}})),"참고 자료"),"\n",l.createElement(t.p,null,"이 글에서 참고한 자료는 다음과 같다."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/reference/release-notes/v5.12/"},"Gatsby v5.12 Release Notes")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect"},"Gatsby Docs: createRedirect")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/zero-configuration-deployments/"},"Gatsby Docs: Zero-Configuration Deployments")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.npmjs.com/package/gatsby-adapter-netlify"},"gatsby-adapter-netlify")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.netlify.com/"},"Netlify")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"https://www.netlify.com/blog/gatsby-cloud-evolution/"},"Netlify Blog: Netlify Announces the Evolution of Cloud Platform")),"\n"))}var c=function(e={}){const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?l.createElement(t,e,l.createElement(s,e)):s(e)},r=a(6903),i=a(5193),o=a(8271),p=a(3626),g=a(3920),m=a(544),d=a(7540),b=a(7564),y=a(4781),u=a(8247),f=a(4918),E=a(1119),A=a(14),h=a(3311),w=a(6939),x=a(3209),k=a(8147),v=a(4308),C=a(8076),B=a(5534);const F=({data:e,children:t,pageContext:a})=>{var s,c,o,g,F;const{previous:N,next:G}=a,{frontmatter:z}=e.mdx,{subject:I,title:H,subtitle:L,image:R,tags:U,createdAt:M,updatedAt:S}=z,T=Math.ceil(null===(s=e.mdx)||void 0===s||null===(c=s.fields)||void 0===c||null===(o=c.timeToRead)||void 0===o?void 0:o.minutes);(0,k.Ub)({query:"(min-width: 1024px)"});return l.createElement(i.A,null,l.createElement("div",{className:"flex mx-auto justify-center gap-[100px]"},l.createElement("aside",{className:"hidden lg:block w-[300px] shrink-0"},l.createElement(x.A,{subject:I})),l.createElement("article",{className:"min-w-0 max-w-none md:max-w-[680px] prose dark:prose-invert"},l.createElement("header",{className:"mb-10"},l.createElement("nav",{"aria-label":"breadcrumb",className:"flex flex-wrap items-center gap-2 text-sm mb-8"},l.createElement(r.Link,{to:"/blog",className:"not-hover:text-secondary"},"블로그"),l.createElement("span",{className:"text-muted"},">"),l.createElement(r.Link,{to:`/blog/#${I.slug}`,className:"not-hover:text-secondary"},I.title)),l.createElement("h1",null,H),L&&l.createElement("p",{className:"text-xl mb-6 -mt-4"},L),l.createElement(v.A,{updatedAt:S,readMinutes:T,tags:U})),R&&l.createElement(p.G,{class:"-mx-10 mb-10 md:-mx-20",image:null===(g=R.childImageSharp)||void 0===g?void 0:g.gatsbyImageData,alt:`${H}${L?` — ${L}`:""}`}),l.createElement("div",{className:"mb-10 print:hidden"},l.createElement(m.A,{layoutKey:"-f9+5v+4m-d8+7b",slot:"9726040265"}

1)),l.createElement(n.xA,{components:B.o},t),l.createElement("div",{className:"my-10 print:hidden"},l.createElement(m.A,{format:"auto",slot:"6926754782",responsive:!0})),l.createElement("footer",{className:"mt-20"},l.createElement("div",{className:"text-xs bg-gray-200 dark:bg-gray-800 mb-20 p-6"},l.createElement("div",{className:"text-xl mb-2"},l.createElement(d.gc,{className:"cc-icon",icon:b.vd}),l.createElement(d.gc,{className:"cc-icon",icon:y.KG}),l.createElement(d.gc,{className:"cc-icon",icon:u.se}),l.createElement(d.gc,{className:"cc-icon",icon:f.zY})),l.createElement("div",{className:"text-secondary"},"블로그 글의 내용은 ",l.createElement("a",{className:"text-inherit",href:"https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko",target:"_blank",rel:"nofollow"},"크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스"),"에 따라 이용하실 수 있습니다.")),l.createElement("div",{className:"text-lg flex flex-row gap-4 justify-between flex-wrap print:hidden"},N&&l.createElement("div",{className:"grow"},l.createElement(r.Link,{to:`/blog/${N.frontmatter.slug}`},l.createElement("span",{className:"text-xl mr-2"},l.createElement(d.gc,{icon:E.II}),l.createElement(d.gc,{icon:h.ae})),N.frontmatter.title)),G&&l.createElement("div",{className:"text-right grow"},l.createElement(r.Link,{to:`/blog/${G.frontmatter.slug}`},G.frontmatter.title,l.createElement("span",{className:"text-xl ml-2"},l.createElement(d.gc,{icon:h.ae}),l.createElement(d.gc,{icon:A.ZB}))))))),l.createElement("aside",{className:"hidden 2xl:block w-[280px] shrink-0"},l.createElement("div",{className:"sticky top-[130px] h-[calc(100vh-180px)] overflow-y-auto"},l.createElement(w.A,{toc:null===(F=e.mdx)||void 0===F?void 0:F.tableOfContents,title:H}),l.createElement(C.A,null)))))},N=({data:e,location:t})=>{var a,n,s;const c=(0,g.Q)(),{title:r,subject:i,excerpt:p,image:m,tags:d,createdAt:b,updatedAt:y}=e.mdx.frontmatter,u=[{"@context":"https://schema.org","@type":"BlogPosting",headline:r,image:m?[m.publicURL]:void 0,datePublished:b,dateModified:y,author:[{"@type":"Person",name:c.author,url:c.siteUrl+"/about/"}],wordCount:null===(a=e.mdx)||void 0===a||null===(n=a.fields)||void 0===n||null===(s=n.timeToRead)||void 0===s?void 0:s.words,keywords:d||void 0,isPartOf:{"@type":"Blog",name:c.title+" 블로그",url:c.siteUrl+"/blog/"}},{"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"블로그",item:`${c.siteUrl}/blog/`},{"@type":"ListItem",position:2,name:i.title,item:`${c.siteUrl}/blog/#${i.slug}`},{"@type":"ListItem",position:3,name:r}]}];return l.createElement(o.A,{title:r,useSiteTitle:!0,description:p,image:null==m?void 0:m.publicURL,pathname:t.pathname,schema:u})};function G(e){return l.createElement(F,e,l.createElement(c,e))}}}]);
2//# sourceMappingURL=component---src-templates-post-tsx-content-file-path-src-posts-deploy-to-netlify-from-gatsby-cloud-mdx-7195db52162aedcca82f.js.map