입문

개요

Civichathttps://civichat.jp를 Jekyll로 변경하고 S3+CloudFront에 게시하기 위해 조사할 때 기사가 너무 낡았다(2016년...)영어라서 CodePipeline의 방법을 간신히 정리하려고 했어요.
Civichat: LINE에서 당신에게 맞는 보조금 등 공공 제도를 볼 수 있는 서비스입니다.
https://civichat.jp/

지킬이 뭐예요?

Jekyll은 개인, 프로젝트 또는 조직 사이트에 사용되는 간단한 블로그 정적 사이트 생성기입니다.그것은 GitHub의 공동 창시자인 Tom Preston-Werner가 루비로 작성하여 시작된 MIT 허가증으로 나누어 주었다.(by Wikipedia )
어쨌든 루비로 만든 정적 사이트 생성 도구입니다.
요즘은@Nuxt/Content나Gatsby.js인 것 같아요.

왜 AWS죠?왜 코드 Pipeline?Code Build는 무엇입니까?

어쩌면 Netlify나 Vercel도 할 수 있을지도...
이번에는 AWS의 요청을 요약하고자 합니다. AWS를 사용하고 싶어서 AWS입니다.

단계

GitHub에 Jekyll 코드 자체가 이미 있는지 확인하기 위해 로컬jekyll build에서 _site로 출력

S3 준비 시간

보통 삽질을 하지만 공공 방문 블록을 없애야 한다.

코드 파이프라인으로 파이프라인 만들기

파이프라인 설정

파이프라인 이름 설정하기
(이 파이프라인 이름은 변경할 수 없음을 주의하십시오.)

GitHub 연결

이번에는 Github의 제출을 촉발하기 위해 GitHub(バージョン2) 을 원본 공급업체로 선택했습니다.
GitHub에 연결하려면 접속 이름을 입력하고 GitHub에 설치AWS Connector
그런 다음 설치된 GitHub에서 저장소를 가져올 수 있으므로 저장소 이름과 분기 이름을 설정합니다.
(해를 채우기 위해)

코드 구성 설정

제공 프로그램에서 AWS CodeBuild를 지정하면 항목을 만드는 단추가 나타나므로
다음과 같이 CodeBuild 설정 페이지가 표시됩니다.

프로젝트 설정

프로젝트 이름이 적당합니다...

환경

어렵기 때문에 아마존 리눅스 2를 사용하세요
이번에는 특권적인 검사가 필요하지 않으니 우선 없애자.

Buildspec

Buildspec이루트 디렉터리에 yml를 넣을 수 없으면 이 위치를 지정하십시오

배치 설정 로그 설정

거의 그대로 있으면 돼요.
모든 설정이 끝나면 를 클릭하여 CodePipeline으로 돌아갑니다.

돌아오면 AWS가 자동으로 프로젝트 이름에 추가됩니다 (굿!!!)

배치 구성

배포 제공 프로그램에서 아마존 S3를 선택하면 시간대를 선택할 수 있기 때문에 처음 만든 시간대를 선택할 수 있습니다.
또한 이때 デプロイする前にファイルを抽出する 선택을 잊어버리면 S3에 구축된 파일이 Zip에 나타나므로 선택을 잊지 마십시오

작성 전 확인

각양각색 일단 이렇게 꽉 칠해져서...
중요한 건 FullRepositoryId 맞습니다 Extract 네 True 그러니까 확인해보세요
확인 후 파이프라인 생성을 클릭하여 파이프라인을 생성합니다.

buildspec.yml 만들기

CodeBuild가 지금 이러면 어떤 처리를 해야 하는지 알려주지 않았기 때문에 연결된 저장소의 루트 디렉터리에서buildspec을 사용합니다.yml 만들기 및 다음 내용 설명
buildspec.yml

version: 0.2

phases:
  pre_build:
    commands:
      - export LC_ALL="en_US.utf8"
      - bundle install
  build:
    commands:
      - bundle exec jekyll build

artifacts:
  base-directory: '_site'
  files:
    - '**/*'

일반bundle installjekyll buildexport LC_ALL="en_US.utf8 UTF-8에 고정하지 않으면 제이킬이 오류를 토할 수 있으니 주의하세요.
Commit & Push는 Pipeline이 자동으로 달립니다

이렇게 하면 성공!

결과물 보기

최초로 확인된 통을 보면 다음과 같은 다양한 서류가 있을 것이다!
이렇게 CD 완성!

CloudFront+S3 설정

[배포 생성] 을 클릭하고 웹에서 [시작됨 가져오기] 를 선택합니다.

Origin Settings

Origin Domain Name: 처음 생성된 S3의

선택

Restrict Bucket Access : Yes

Origin Access Identity : Create a New Identity

Grant Read Permissions on Bucket : Yes, Update Bucket Policy
↑ 에서 S3 시간대 액세스 설정 변경

Default Cache Behavior Settings

당신의 취향에 따라 Viewer Protocol Policy 를 Redirect HTTP to HTTPS

Distribution Settings

Price Class: 좋아요(Use U.S., Canada, Europe, Asia, Middle East and Africa)

Alternate Domain Names(CNAMEs): 필요한 경우

SSL Certificate: 필요한 경우

Default Root Object : index.html

표준 로그: 필요한 경우

구성 후 [배포 생성] 을 클릭하여 완료
Status가 In Progress 에서 Deployed 로 변경되면 Domain Name에 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcloudfront.net에 접근해 보세요. 모든 설정이 완료되면 연결할 수 있습니다.

고생하셨습니다.

이런 방법으로build스펙.yml을 바꾸면 Nuxt, Gatsby도 할 수 있지만 그건 다음에 다시...기회가 된다면...그래서
여러분도 꼭 해보세요!!
그럼 안녕히 계세요.