웹 사이트를 만들고 싶다!

준비 단계 설계도

실제 사이트


해커슨 등에 참가하고 있으면 뭔가 만들려고 생각한 것이 시작으로,
서비스를 둘러싼 것 전반을 똑같이 접할 수 있으면 좋겠다고 생각합니다
지금 모두 AWS에서 완결되었습니다.

만드는 사이트

나도 못

네일 모델 찾기 네일리스트와 무료로 네일을 받고 싶은 사람을 매칭하는 서비스입니다

길: 준비편

먼저 코드를 푸시하면 프로덕션 반영되는 환경을 만듭니다.
개발 환경이 없어 문제는 무시했습니다! !

개발 흐름

CodeCommit로 코드를 넣을 리포지토리 준비

게시용 S3 준비

CodeBuild를 사용하여 html를 S3에 자동으로 배치하는 작업 만들기

CodePipeline에서 CodeCommit와 CodeBuild 연결

미세한 흐름

CodeCommit 준비

원래 왜 CodeCommit를 사용했는지,CodeCommit이면 일정 이하이면 무료로 privte 리포지토리를 사용할 수 있기 때문입니다.
또 후술합니다만 CI 환경으로서 CodeCommit 등이 있으므로,
별도 Jenkins Server 등을 세우지 않아도 CI 환경을 만들 수 있습니다
CodeCommit는 다음 페이지를 참고하여
https 연결용 사용자를 만들고 설정했습니다.
Git 자격 증명을 사용하는 HTTPS 사용자를 위한 설정

이런 식으로 리포지토리를 관리 할 수 ​​있습니다.

공개용 S3 준비

※보안 관점은 0이므로 주의해 주세요
일단 좋아하는 이름으로 버킷을 만듭니다.
그런 다음 콘솔에서 アクセス権限>バケットポリシー로 이동하여 다음 설정을 구성합니다.

bucket_policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{{BUCKET_NAME}}/*"
        }
    ]
}

그러면 다음 상태가 되어 전세계에서 버킷의 내용을 참조할 수 있는 상태가 됩니다.
(AWS가 추천하지 않은 방법으로 인해,
후술 예정인 CloudFront를 사용한 접속 방법으로 빨리 전환하는 것이 좋다)

CodeBuild 설정

여기에서는 push시에 움직이는 작업을 설정해 갑니다
(어쨌든 CodeBuild를 사용했지만 CodeDeploy를 사용해야 할 수도 있습니다 ...)
web측에서 커멘드를 등록하는 방법과 repository측에서 커멘드를 가지는 방법이 있었습니다만,Jenkinsfile에 익숙해 졌기 때문에 후자를 선택했습니다.
다음 파일을 방금 만든 리포지토리에 넣었습니다.

buildspec.yml

version: 0.2
env:
  variables:
    AWS_REGION: "ap-northeast-1"
phases:
  build:
    commands:
    - aws s3 sync ./frontend/ s3://{{BUCKET_NAME}}/ --acl public-read

내용은 간단하며 ./frontend/*에있는 모든 파일을 S3 바로 아래로 이동시킵니다../frontend/index.html 등을 배치하는 이미지로 만들었습니다.

이 후 AWS 콘솔에서 빌드 프로젝트를 생성하면 완성됩니다.

CodePipeline 설정

이제 push + 빌드 시작 버튼으로 배포 할 수있는 상태가되었습니다.
마지막으로 푸시 점화로 움직이도록 합니다.
방법으로는 AWS 콘솔에서 파이프라인 만들기를 누르고,
Source와 Build를 지금까지 만든 것으로 지정하면 됩니다.
그러면 다음과 같은 느낌이 듭니다.



이것으로 push만으로 배포를 할 수 있는 매우 쉽고 위험한 환경이 생겼습니다!
다음과 같은 URL에서 바로 배포한 페이지를 볼 수 있습니다.https://s3-ap-northeast-1.amazonaws.com/{{BUCKET_NAME}}/index.html

준비에 관하여

보안적으로 완전히 아웃한 환경이지만,
일단 인터넷에서 자신의 페이지를 볼 수 있으므로 상당히 텐션은 올라갑니다
다음은 CloudFlont 나 Cognito 주위를 정리하려고 생각합니다
일단 움직이는 웹 사이트를 만들고 싶은 CloudFront

수작업으로 하고 있는 상태이므로 가끔 지적을 주시면 기쁩니다!
또 기억하면서 써 갔기 때문에 잘못된 내용이 있으면 죄송합니다. .