Angular : AWS S3 Angular 웹 사이트에 대한 각도 배포를 자동화하는 방법??

각도 앱을 AWS S3에 호스팅한 경우 다음 단계에 따라 ng build -prod를 자동화하고 S3 버킷으로 끌어다 놓을 수 있습니다.

1단계 - 추가
프로젝트에/ngx-aws-deploy하고 아래 명령을 실행합니다(각도 CLI가 최신 상태여야 함).

ng add @jefiozie/ngx-aws-deploy

2단계 - 1단계가 진행되는 동안 필요한 세부정보를 단말기에 제공합니다.
다음과 같은 몇 가지 질문이 표시됩니다.
귀하의 AWS 리전
파일을 업로드할 버킷입니다.
비밀 액세스 키
액세스 키 ID
파일을 업로드해야 하는 폴더(선택 사항)

3단계 - 제공한 세부 정보가 올바른지 확인하고 angular.json을 열고 배포를 검색하면 아래 코드를 볼 수 있어야 합니다.

angular.json is update with a new builder:

"deploy": {
    "builder": "@jefiozie/ngx-aws-deploy:deploy",
    "options": {
    "region": "YOUR REGION",
    "bucket": "YOUR BUCKET",
    "secretAccessKey": "YOUR SECRET ACCESSKEY",
    "accessKeyId": "YOUR ACCESS KEY ID"
    }

AWS 콘솔에서 액세스 키 ID와 보안 액세스 키를 얻을 수 있습니다. 리전은 이미 알고 있는 S3 URL과 버킷 이름에서 볼 수 있지만 URL에서 볼 수 있는 경우입니다.

4단계 - ng deploy 명령을 실행하면 앱이 빌드되고 S3에 배포됩니다.

모두 완료

추가 비트-
위의 모든 단계를 수행한 후 문제가 발생하고 아래 오류가 발생하는 경우 -

403 Forbidden
Code: AccessDenied
Message: Access Denied

그런 다음 솔루션은 버킷 정책을 지정하는 것입니다. 이를 위해 S3로 이동한 다음 버킷과 권한으로 이동하면 버킷 정책을 찾을 수 있습니다. 코드 아래에 붙여넣고 저장을 클릭하십시오.

{ "Version": "2012-10-17", "Statement": [{ "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject"], "Resource": ["arn:aws:s3:::your-bucket-name-here/*"] } ]}

위의 코드에서 your-bucket-name-here라는 단어를 버킷 이름으로 바꾸고 저장을 클릭합니다.

모두 완료하고 페이지를 새로고침하면 앱이 실행됩니다.



모든 것을 말하면서 계속 배우는 것이 좋습니다!

이 기사를 읽어 주셔서 감사합니다. 와 에서 언제든지 저와 연결해 주세요.