이 모듈에서는 지속적인 배포가 내장된 웹 애플리케이션의 정적 리소스를 호스팅하도록 AWS Amplify를 구성합니다. Amplify Console은 풀 스택 웹 앱의 지속적인 배포 및 호스팅을 위한 git 기반 워크 플로를 제공합니다. 후속 모듈에서는 JavaScript를 사용하여 이러한 페이지에 AWS Lambda 및 Amazon API Gateway의 원격 RESTful API를 호출하는 동적 기능을 추가합니다.
이 모듈의 아키텍처는 매우 간단합니다. HTML, CSS, JavaScript, 이미지, 기타 파일을 비롯한 모든 정적 웹 콘텐츠는 AWS Amplify Console에서 관리합니다. 그런 다음 최종 사용자는 AWS Amplify Console에서 표시한 퍼블릭 웹 사이트 URL을 사용하여 해당 사이트에 액세스합니다. 사이트를 사용 가능하게 만들기 위해 웹 서버를 실행하거나 다른 서비스를 실행할 필요가 없습니다.
대부분의 실제 애플리케이션의 경우 사용자 지정 도메인을 사용하여 사이트를 호스트합니다. 개인 도메인을 사용하려면 Amplify에서 사용자 정의 도메인을 설정 지침을 따르십시오.
모듈 완료 시간: 15분
사용한 서비스: AWS Amplify
아래의 단계별 지침에 따라 정적 웹 사이트를 호스팅합니다. 각 단계 번호를 클릭하면 섹션이 확장됩니다.
-
1단계. 리전 선택
이 웹 애플리케이션은 이 애플리케이션에서 사용되는 모든 서비스를 지원하는 AWS 리전에 배포할 수 있습니다. 여기에는 AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon DynamoDB.등이 포함됩니다.
리전 표를 참조하여 지원되는 서비스를 포함하는 리전을 확인할 수 있습니다. 지원되는 리전 중에서 선택할 수 있습니다.
- 미국 동부(버지니아 북부)
- 미국 동부(오하이오)
- 미국 서부(오리건)
- EU(프랑크푸르트)
- EU(아일랜드)
- EU(런던)
- 아시아 태평양(도쿄)
- 아시아 태평양(서울)
- 아시아 태평양(시드니)
- 아시아 태평양(뭄바이)
AWS Management Console의 상단 오른쪽 모서리 부분의 드롭다운에서 리전을 선택합니다.
(확대하려면 클릭)
-
2단계: Git 리포지토리 만들기
이 모듈의 소스 코드를 관리하는 옵션에는 AWS CodeCommit (AWS 프리 티어에 포함) 또는 GitHub의 두 가지 옵션이 있습니다. 이 자습서에서는 CodeCommit을 사용하여 응용 프로그램 코드를 저장하지만 GitHub에 리포지토리 생성하여 동일한 작업을 수행할 수 있습니다.
a. AWS CodeCommit 콘솔를 엽니다
b. 리포지토리 생성을 선택합니다.
c. 리포지토리 이름*을 "wildrydes-site"로 설정합니다.
d. 생성을 선택합니다.
e. 리포지토리가 생성되었으므로 다음 지침에 따라 다음 지침에 따라 IAM 콘솔에서 Git 자격 증명을 사용하여 IAM 사용자를 설정하십시오.
f. CodeCommit 콘솔로 돌아가서 복제 URL 드롭 다운에서 HTTPS 복제를 선택합니다.
g. 터미널 창에서 git clone과 리포지토리의 HTTPS URL을 실행합니다.
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
‘wildrydes-site'로 복제 중 ...
‘https://git-codecommit.us-east-1.amazonaws.com'의 사용자 이름 : XXXXXXXXXX
’USERID'의 비밀번호 : XXXXXXXXXXXX
경고 : 빈 리포지토리를 복제 한 것 같습니다.
-
3단계 : Git 리포지토리 채우기
AWS CodeCommit 또는 GitHub.com을 사용하여 git 리포지토리를 생성하고 로컬로 복제 한 후에는이 워크숍과 관련된 기존의 공개적으로 액세스 가능한 S3 버킷에서 웹 사이트 컨텐츠를 복사하고 리포지토리에 컨텐츠를 추가해야합니다 .
a. 디렉토리를 리포지토리로 변경하고 S3에서 정적 파일을 복사하십시오:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Git 서비스로 파일 커밋하기
$ git add .
$ git push개체 수 : 95, 완료.
객체 압축 : 100% (94/94) 완료
객체 쓰기 : 100 % (95/95), 9.44 MiB | 14.87 MiB/s 완료
총 95 (Delta 2), 재사용 0 (Delta 0)
https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
4단계 : AWS Amplify 콘솔을 사용하여 웹 호스팅 활성화
다음으로 AWS Amplify 콘솔을 사용하여 방금 커밋한 웹 사이트를 배포합니다. Amplify Console은 정적 웹 응용 프로그램 코드를 저장할 장소를 설정하는 작업을 처리하고 해당 응용 프로그램의 수명 주기를 간소화하고 모범 사례를 활성화하는 등 여러 유용한 기능을 제공합니다.
a. Amplify Console 콘솔 페이지를 실행
b. Amplify Console에서 배포를 위해 시작를 클릭
c. 오늘 사용한 리포지토리 서비스 공급자를 선택하고 다음을 선택하십시오.
d. GitHub를 사용한 경우 GitHub 계정에 AWS Amplify를 승인해야 합니다.
e. From the dropdown select the Repository and Branch just created
e. "빌드 설정 구성"페이지에서 모든 기본 값을 그대로 두고 다음을 선택하십시오.
f. "검토"페이지에서 저장 및 배포를 선택합니다
g. Amplify Console이 필요한 리소스를 생성하고 코드를 배포하는 데 몇 분 정도 걸립니다.
완료되면 사이트 이미지를 클릭하여 Wild Rydes 사이트를 시작하십시오.
Master 링크를 클릭하면 지점과 관련된 빌드 및 배포 세부 정보와 다양한 장치에서 앱의 스크린 샷이 표시됩니다:
-
5단계 : 사이트 수정
AWS Amplify Console은 연결된 리포지토리의 변경 사항을 감지하면 앱을 재구축하고 재배포합니다. 이 프로세스를 테스트하려면 기본 페이지를 변경하십시오.
a. `index.html` 페이지를 열고 제목을 다음과 같이 수정합니다: <title>Wild Rydes - Rydes of the Future!</title>
b. 파일을 저장하고 git 저장소에 다시 커밋하십시오. Amplify Console은 리포지토리의 업데이트를 확인한 후 곧 사이트를 다시 구축하기 시작합니다. 얼마 걸리지 않습니다! Amplify Console 콘솔 페이지로 돌아가 프로세스를 확인합니다.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. 완료되면 Wild Rydes 사이트를 다시 열고 수정한 제목을 확인합니다.
-
요약
이 모듈에서는 Wild Rydes 비즈니스의 기반이 될 정적 웹 사이트를 만들었습니다. AWS Amplify Console을 사용하면 지속적인 통합 및 제공 모델에 따라 정적 웹 사이트를 쉽게 배포 할 수 있습니다. 보다 복잡한 Javascript 프레임 워크 기반 응용 프로그램을 “구축"하는 기능이 있으며 기능 분기 배포, 쉬운 사용자 지정 도메인 설정, 즉시 배포 및 암호 보호와 같은 기능이 있습니다.
