정적 웹 사이트 호스팅

AWS에서 단순한 마케팅 웹 사이트 또는 웹 애플리케이션 호스팅

소개

정적 웹 사이트는 HTML, JavaScript, 이미지, 동영상 및 기타 파일을 웹 사이트 방문자에게 제공합니다. 정적 웹 사이트는 비용이 매우 저렴하고, 높은 수준의 안정성을 제공하며, IT 관리가 거의 필요 없고, 추가 작업 없이 엔터프라이즈 수준의 트래픽을 처리하도록 확장할 수 있습니다.

FAQ에서 자세히 알아보기 >>

학습 내용

  • AWS 콘솔에서 AWS Amplify를 사용하여 정적 웹 사이트를 호스팅합니다. AWS Amplify는 정적 웹 사이트 및 웹 앱에 대한 완전관리형 호스팅을 제공합니다. Amplify의 호스팅 솔루션은 Amazon CloudFront 및 Amazon S3를 활용하고 AWS 콘텐츠 전송 네트워크(CDN)를 통해 사이트 자산을 전송합니다.
  • 지속적 배포 설정: Amplify는 Git 기반 지속적 배포 워크플로를 제공합니다. 따라서 고객은 코드를 커밋할 때마다 사이트에 자동으로 업데이트를 배포할 수 있습니다.

 AWS 경험

초보자

 완료 시간

10분

 완료 비용

AWS에서 정적 웹 사이트를 호스팅하는 데 소요되는 총 비용은 사용량에 따라 달라집니다.

사용한 서비스 및 관련 비용 내역은 AWS AmplifyAmazon Route 53에 대한 요금을 참조하십시오.

 자습서 사전 조건

  • 관리자 수준의 액세스 권한이 있는 AWS 계정* AWS에 가입
  • Git 공급자: AWS CodeCommit(AWS 프리 티어에 포함됨) 또는 GitHub를 사용할 수 있습니다.
 
[*] 생성된 지 24시간이 지나지 않은 계정은 이 자습서를 완료하는 데 필요한 서비스에 액세스할 권한이 아직 없을 수 있습니다.

구현

  • 리포지토리 생성 및 연결

    이 자습서를 사용하려면 리포지토리를 생성하고 초기화해야 합니다. 가장 쉬운 방법은 create-react-app 명령을 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 사용하여 이 패키지를 설치합니다.

    연결할 리포지토리가 이미 있습니까? 아래의 c단계로 건너뛰십시오.
    Git 공급자에 연결하지 않고 배포하려고 합니까? 여기를 클릭하여 시작하십시오.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    이 단계에서는 GitHub 리포지토리를 생성하고 코드를 이 리포지토리에 커밋합니다. 이 단계를 완료하려면 GitHub 계정이 필요합니다. 계정이 없으면 여기에서 가입합니다.

    a. 앱을 위한 새 GitHub 리포지토리를 생성합니다(링크).

    Front End GitHub Repository Module 1

    b. 명령줄 인터페이스에서 다음 명령을 실행하여 git를 초기화하고 애플리케이션을 새 GitHub 리포지토리에 푸시합니다.

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. 리포지토리를 연결하려면 Amplify 콘솔에 로그인하고 [배포(Deploy)]에서 [시작하기(Get Started)]를 선택합니다.

    1-gettingstarted

    GitHub, Bitbucket, GitLab 또는 AWS CodeCommit 리포지토리를 연결합니다. Git 리포지토리 연결 없이 수동으로 빌드 아티팩트를 업로드할 수도 있습니다(수동 배포 참조). Amplify 콘솔에 권한을 부여하면 Amplify가 리포지토리 공급자로부터 액세스 토큰을 가져오지만 토큰을 AWS 서버에 저장하지는 않습니다. Amplify는 특정 리포지토리에 설치된 배포 키만 사용하여 리포지토리에 액세스합니다.

    2-connectrepository

    리포지토리 서비스 공급자를 연결한 후 리포지토리를 선택한 다음 구축하고 배포할 브랜치를 선택합니다.

    3-repositorybranch
  • 빌드 설정 확인

    선택한 브랜치에 대해 Amplify는 리포지토리를 검사하여 실행할 빌드 명령의 시퀀스를 자동으로 감지합니다. 빌드 설정을 확인하고 [다음(Next)]을 클릭합니다.

    next-host
  • 저장 및 배포

    모든 설정을 검토하여 모든 항목이 올바르게 설정되었는지 확인합니다. [저장 및 배포(Save and deploy)]를 선택하여 웹 앱을 글로벌 콘텐츠 전송 네트워크(CDN)에 배포합니다. 프런트 엔드 구축은 일반적으로 1~2분이 소요되지만 앱의 크기에 따라 달라질 수 있습니다.

    8-saveanddeploy

이 자습서가 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
닫기
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
닫기

Amazon S3로 정적 웹 사이트 호스팅

Amazon S3를 사용하여 정적 웹 사이트를 호스팅할 수도 있습니다. Amazon S3에서 정적 웹 사이트를 호스팅하면 기존 웹 서버보다 훨씬 더 저렴한 비용으로 고성능의 확장 가능한 웹 사이트를 제공할 수 있습니다.

Amazon S3에서 정적 웹 사이트를 호스팅하려면 웹 사이트 호스팅을 위한 Amazon S3 버킷을 구성하고 웹 사이트 콘텐츠를 업로드합니다. AWS Management Console을 사용하여 코드 작성 없이 Amazon S3 버킷을 정적 웹 사이트로 구성할 수 있습니다. 웹 사이트 요구 사항에 따라 리디렉션, 웹 트래픽 로깅 및 사용자 지정 오류 문서와 같은 일부 선택적 구성을 사용할 수도 있습니다.

지침 및 단계별 시연을 포함하여 Amazon S3에서 정적 웹 사이트를 호스팅하는 것에 대한 자세한 내용은 구현 안내서를 참조하십시오.

축하합니다!

AWS에서 정적 웹 애플리케이션을 구축했습니다! 다음 단계로 AWS Amplify를 자세히 살펴보고 AWS 기반 모바일 및 웹 앱 개발을 위한 전체 도구 및 서비스 세트를 확인하십시오.