Amplify로 쉽게 Hosting

2656 단어 amplifyCloudFrontS3

전제


  • 지금까지의 기사를 전제로 작성하고 있습니다.
  • [Amplify, (ionic) Angular ] 하루에 인증된 채팅 도구 만들기(준비편)
  • [Amplify, (ionic) Angular ] 하루에 인증된 채팅 도구 만들기(실장편)
  • Amplify mock가 매우 편리!


  • 실행


  • Amplify에 Hosting 추가
  • $ amplify add hosting
    
  • CDN인 CloudFront 및 S3를 사용하여 호스팅합니다.
  • ? Select the plugin module to execute: Amazon CloudFront and S3
    
  • SSL 대응을 위해 다음을 선택합니다
  • ? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
    
  • S3 버킷 이름을 지정합니다.
  • ? hosting bucket name: test-chat
    
  • 설정을 Amplify에 반영합니다
  • $ amplify publish
    
    | Category | Resource name              | Operation | Provider plugin   |
    | -------- | -------------------------- | --------- | ----------------- |
    | Hosting  | S3AndCloudFront            | Create    | awscloudformation |
    ? Are you sure you want to continue? (Y/n) Y
    ? Do you want to update code for your updated GraphQL API (Y/n) Y
    ? Do you want to generate GraphQL statements (queries, mutations and subs
    cription) based on your schema types?
    This will overwrite your current graphql queries, mutations and subscript
    ions (Y/n) Y
    

    ·
    ・10분 정도 기다린다
    ·
  • 다음이 출력되는지 확인
  • ✔ Uploaded files successfully.
    Your app is published successfully.
    https://d3sddsev2inq7d.cloudfront.net
    
  • 액세스 해보기



  • 액세스할 수 없습니다.

    이번에는 CloudFront에서 S3에 연결되어 있으므로 CloudFront 콘솔을 확인해 보겠습니다.


    빨간색 프레임이 Progress로 남아 있으면 액세스 할 수 없으므로 Enable까지 기다립니다.
  • Enable이 되면, 액세스 해 본다



  • 요약



    Amplify는 AWS의 각 서비스가 패키지되어 있어 명령 하나로 간단하게 개발부터 호스팅까지 가능해진다

    다음은 Route53을 사용하여 자신의 도메인에서 호스팅하려고합니다.

    좋은 웹페이지 즐겨찾기