사용자 정의 도메인, HTTPS 및 지속적인 배포가 있는 AWS S3 관리형 Angular 어플리케이션을 만드는 방법

13096 단어 https aws github angular

AWS S3에서 Angular 응용 프로그램을 호스팅하는 방법에 대한 안내서입니다. 이 응용 프로그램은 사용자 정의 도메인, HTTPS 및 GitHub repo의 연속적인 배치를 갖추고 있습니다.(2019년 12월 16일 기준 정확)

요구 사항

GitHub 계정

루트 디렉토리

에 생성된 Angular 애플리케이션을 포함하는 GitHub Repo

AWS 계정

DNS 설정을 업데이트할 수 있는 도메인 이름

기본 정적 사이트 설정

S3

사이트명 (example.com)의bucket 만들기

탭'Properties'으로 이동

선택 'Static Website'

선택 'Use this bucket to host a website' 및 색인을 입력합니다.색인 문서와 오류 문서에 사용되는 html

수동으로 색인을 추가합니다.테스트용 저장통 html 파일

나중에 CDN을 설정할 때 필요한 점을 기록합니다.

탭'Permissions'으로 이동

선택 'Bucket Policy'

다음 json을 복사하여 BUCKET_NAMEbucket의 이름(example.com)으로 바꿉니다.

{
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/*"
            ]
        }
    ]
}

주의: 이 정책은 버킷 정책에서 찾을 수 있습니다.json은 이 버킷의 모든 대상을 기본적으로 공개할 것입니다. 이것은 우리의 배치 스크립트가 잠시 후에 필요합니다. 왜냐하면 일반적인 경우 대상은 기본적으로 개인이기 때문입니다.만약 이렇게 하지 않는다면, 당신의 사이트는 방문할 수 없을 것입니다.

사이트 이름과 하위 도메인 사용www.example.com

bucket 만들기

탭'Properties'으로 이동

선택 'Static Website'

선택 'Redirect requests' 및 프로토콜

선택 'http'
사용자 정의 도메인 및 HTTPS

라우팅 53 및 DNS

클릭'Create Hosted Zone' 및 도메인 예 입력유형'Public Hosted Zone' 포함 com

도메인을 얻은 도메인 등록소(예를 들어hover.com)

로 가세요

새로 만든 관리 영역에서 도메인으로 값을 복사하는 이름 서버 설정

AWS 인증서 관리자(SSL 인증서)

클라우드 쪽에서 (계기판 오른쪽 상단이) 필요하기 때문에 ns 구역을 선택했습니다.자세한 내용은 여기를 클릭하십시오https://aws.amazon.com/certificate-manager/faqs/.

도메인 예제를 추가합니다.com과 당신의 영역, 그리고 us-east-1 하위 영역www.example.com을 누르고 'www'

선택'Next', 클릭'DNS Validation'

클릭'Next'

클릭'Review'

도메인당 영역 확장 및 클릭'Confirm and Request'

클릭'Create record in route53'

AWS 클라우드(CDN)

클릭'Continue'

'Create Distribution'에서 'Web'

이전에 기록한 S3 사이트 노드를 'Get Started'에 입력합니다.그것은 포맷통에 있어야 한다.이름?s3 사이트aws구역.아마존com

'Origin Domain Name' 에서 'Viewer Protocol Policy'

'redirect http to https'에서 'Price class'를 선택합니다.이들 지역 이외의 사용자들은 더 많은 지연을 겪겠지만, 이것은 더 싸다

'use only US, Canada and Europe'에 apex역(example.com)을 입력하고 새 줄에 당신의 역과 'Alternate Domain Names (CNAMEs)' 자역www.example.com을 입력하세요

'www'에서 'SSL Certificate'를 선택하고 AWS 인증서 관리자

에서 만든 인증서를 선택합니다.

'Custom SSL Certificate'에서 'Default Root Object' 입력

클릭'index.html'

참고: 배포를 생성하는 데 15분에서 20분 정도 걸리며 다음 단계를 진행하기 위해 인내심을 가지고 기다려야 합니다.
주의: 매달 1000번의 무효 경로 요청은 무료이지만, 이후의 무효 경로 요청은 추가적인 무효 경로마다 0.005달러가 듭니다.
참고 한 번에 최대 3000개의 잘못된 경로 요청을 처리할 수 있습니다.와일드카드 '*' 요청은 한 번에 최대 15개의 경로를 무효화할 수 있습니다. 따라서 프로그램이 15개 이상의 파일을 포함하고 있다면, 와일드카드 경로가 아닌 배치 스크립트에서 모든 경로를 수동으로 삭제해야 합니다.

53번 도로로 돌아가다

클릭'Create Distribuion'

도메인 예 를 클릭합니다.com

클릭'Hosted Zones' 및 이름 비움'Create Record Set'를 'Alias'로 설정
선택 'Yes' 및 드롭다운 목록에서 이전에 만든 클라우드 프런트엔드 배포 선택
생성하려면 클릭

상기 절차를 반복하지만 이번 입력'Alias Target'은 이름으로 한다.

주: 이것은 몇 분 동안 전파될 수 있습니다. 제가 경험이 있는 사이트는 www 자역이 일하기 전의 사이트와 www 자역이 없습니다.최종적으로 www 자역도 작용할 수 있으니 인내심을 가지고 기다려 주십시오.
당신의 사이트는 지금 https://example.com와 https://www.example.com 아래에 있어야 합니다.

연속 제공

AWS 코드 파이핑

AWS 코드 파이핑으로 이동

입력 파이프의 이름

선택'www', 기본 이름은 벌금

확인'New service role'검사

클릭'Allow AWS CodePipeline to create a service role so it can be used with this new pipeline'

드롭다운 목록에서 'Next''Source provider'

를 선택합니다.

클릭'GitHub' 및 AWS가 GitHub 계정에 액세스할 수 있도록 허용

드롭다운 목록에서 귀하의 환매 협의

를 선택하십시오.

드롭다운 목록에서 원하는 분기

를 선택합니다.'Connect To GitHub' 아래

선택 보장 'Repository'

클릭'Branch'

드롭다운 목록에서 'Change detection options''GitHub webhooks'

를 선택합니다.

드롭다운 목록에서 원하는 AWS 지역

을 선택합니다.

'Next'에서 'Build provider'를 클릭합니다.이것은 너를 팝업 창으로 데려갈 것이다.

팝업 창의 'AWS CodeBuild'에 원하는 이름을 입력합니다.

'Region'에서 선택'Project name'

'Create project'에서 'Project Name'를 선택합니다.여기에는 Angular 애플리케이션 구축에 필요한 언어 실행 시간

이 포함됩니다.

'Environment image'에서 선택'Managed image'

'Operating System'에서 'Ubuntu'를 선택합니다.여기에는 우리가 원하는 NodeJS 버전 12가 포함되어 있습니다.

'Runtimes'에서 선택'Standard'

'Image'에서 선택'aws/codebuild/standard:3.0'

'Image version'에서 'Always use the latest image for this runtime version'를 선택하고 적당한 이름을 입력(예를 들어 "codebuild-service-role-s3-angular")

'Environment Type'에서 선택'Linux'

클릭'Service role'

코드 파이프로 돌아가야 한다

클릭'New Service Role'

클릭'Build specifications'하면 파이프 구축에 대해 설명합니다.

클릭'User a buildspec file'

AWS 코드 빌드

환매 협의의 루트 디렉터리에 'Continue to CodePipeline' 파일을 만듭니다.이는 CD 파이프의 코드 빌드 섹션에서 angular 응용 프로그램을 구축하고 S3 bucket의 루트 디렉토리로 복사하는 데 사용됩니다.

다음 내용을 'Next' 파일에 복사합니다.
당신의 사이트 이름(example.com)으로 바꾸세요'Skip deploy stage'.
ngbuild을 실행하면 'Create pipeline'angular app를 포함하는 폴더의 이름으로 바꿉니다. 이 폴더는 기본angular app의 buildspec.yaml 폴더에 있습니다.buildspec.yamlangular 응용 프로그램의 구축 환경@SITE_NAME을 기본값으로 바꾸기
이전에 만들어진cloudfront 발행판의 ID로 바꿉니다. @ANGULAR_APP_NAME이것은 Cloudfront 대시보드에서 찾을 수 있습니다.

version: 0.2

env:
  variables:
    S3_BUCKET: "@SITE_NAME"
    APP_NAME: "@ANGULAR_APP_NAME"
    BUILD_ENV: "@ANGULAR_APP_ENVIRONMENT"
    CDN_DISTRIBUTION_ID: "@CLOUDFRONT_DISTRIBUTION_ID"

phases:
  install:
    runtime-versions:
      # NodeJS included in the docker image
      nodejs: 12
    commands:
      # Install node dependancies.
      - npm install

  build:
    commands:
      # Builds Angular application.
      - node ./node_modules/@angular/cli/bin/ng build --$BUILD_ENV

  post_build:
    commands:
      # Clear S3 bucket.
      - aws s3 rm s3://$S3_BUCKET --recursive
      # Copy files from dist to S3
      - cd dist
      - aws s3 cp $APP_NAME s3://$S3_BUCKET --recursive
      # Begin cloudfront invalidation
      - aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"

코드 파이핑 IAM 역할 권한
코드 파이핑 및 코드 빌드에 대한 IAM 역할이 생성됩니다.CodeBuild 역할에게 S3 및 Cloudfront에 대한 액세스 권한을 부여해야 합니다.

IAM 대시보드로 이동

클릭dist

테이블에서 이전 코드 구축 기간에 만든 캐릭터를 클릭합니다.

클릭@ANGULAR_APP_ENVIRONMENT

검색 표시줄에 prod을 입력하고 @CLOUDFRONT_DISTRIBUTION_ID 옆에 있는 확인란을 클릭합니다.

검색 표시줄에 'Roles'을 입력하고 'Attach Policy' 옆에 있는 확인란을 클릭합니다.

이 역할에 정책을 추가하려면 'S3'을 클릭합니다.

결말
네가 해냈어, 일하는 좋은 친구야.❤️
..트위터에 팔로우 해주세요.

Reference

이 문제에 관하여(사용자 정의 도메인, HTTPS 및 지속적인 배포가 있는 AWS S3 관리형 Angular 어플리케이션을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-app-with-a-custom-domain-https-and-continuous-deployment-2i3i

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Delphi 로드 Txt 파일의 컨텐트가 Memo의 문자 앞에 표시됩니다.

[LeetCode] 545. Boundary of Binary Tree

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다