AWS에서 React 앱에 커스텀 도메인 설정하기

이전 장에서 서버리스 API에 커스텀 도메인을 설정했습니다. 이제 프론트엔드 React 앱에도 동일한 작업을 해보겠습니다.

infra/web.ts 파일에서 environment: { 라인 위에 다음 코드를 추가하세요.

domain:
  $app.stage === "production"
    ? {
        name: "<yourdomainhere.com>",
        redirects: ["www.<yourdomainhere.com>"],
      }
    : undefined,

API와 마찬가지로, production 스테이지에 배포할 때만 커스텀 도메인을 사용하려고 합니다. 이는 로컬에서 앱을 사용하거나 다른 스테이지에 배포할 때는 커스텀 도메인을 사용하지 않는다는 의미입니다.

물론, 다른 스테이지에서도 커스텀 도메인을 사용하고 싶다면 이 설정을 변경할 수 있습니다. 예를 들어 ${app.stage}.my-serverless-app.com과 같은 형식을 사용할 수 있습니다. dev 스테이지라면 dev.my-serverless-app.com이 됩니다. 하지만 이 부분은 여러분이 직접 해보는 연습으로 남겨두겠습니다.

redirects 속성은 www.my-serverless-app.com으로 접속한 방문자를 원하는 URL로 리다이렉트하기 위해 필요합니다. www. 버전과 루트 도메인 버전을 모두 지원하는 것이 좋습니다. 반대로 루트 도메인이 www. 버전으로 리다이렉트되도록 설정할 수도 있습니다.

비프로덕션 버전에서는 www. 버전이 필요하지 않으므로 redirects를 설정할 필요가 없습니다.

앱 배포하기

이전 챕터와 마찬가지로, 이 변경 사항을 프로덕션 환경에 반영해야 합니다.

프로젝트 루트에서 다음 명령어를 실행하세요.

$ npx sst deploy --stage production

배포 과정이 끝나면 다음과 같은 내용이 표시됩니다.

+  완료
   Api: https://api.my-serverless-app.com
   Frontend: https://my-serverless-app.com
   ...

이제 끝입니다! 우리의 React.js 앱이 이제 우리만의 도메인으로 프로덕션 환경에 배포되었습니다!

변경 사항 커밋하기

지금까지 작업한 코드를 커밋하고 GitHub에 푸시해 보겠습니다.

$ git add .
$ git commit -m "커스텀 도메인 설정"
$ git push

이 단계에서 우리의 풀스택 서버리스 앱은 거의 완성되었습니다. 다음 몇 가지 선택적 섹션에서는 배포를 자동화하는 방법을 살펴볼 것입니다. git push로 변경 사항을 푸시할 때 앱이 자동으로 배포되도록 설정하려고 합니다.