Circle CI 및 AWS S3를 사용하여 Hugo에 이미지 저장

이제 블로그에 의 디자인(이전theme도 포함)을 준수하는 표지 이미지가 있다는 점을 고려하면 저장소 자체를 포함하여 이미지 수가 점점 더 많아지고 있습니다. 이후 리포지토리에서 이미지를 제거하고 AWS S3에 저장했습니다.

기본 아이디어는 로컬 파일 시스템의 이미지를 S3의 버킷으로 동기화하고 버킷의 파일을 Hugo의 빌드 파일이 포함된 Circle CI 작업 공간으로 복사한 다음 마지막으로 빌드 파일을 Netlify에 배포하는 것입니다.

이미지 동기화

블로그용 이미지를 저장하기 위해 먼저 S3에 버킷을 생성했습니다. 로컬 파일 시스템에서 이미지를 동기화하기 위해 설치 및 구성했습니다AWS CLI.

$ brew install awscli
$ aws configure

구성은 매우 간단합니다. API 키와 이미지를 저장할 지역을 설정하기만 하면 된다고 생각합니다. 권한은 AWS를 많이 사용하지 않았기 때문에 약간 혼란 스러웠습니다. 이미지를 저장하는 것이 목적이기 때문에 비공개로 설정했지만 Netlify는 실제로 이미지를 호스팅하는 것입니다.

구성 후 aws sync를 사용하여 로컬 파일 시스템에서 버킷으로 파일을 동기화했습니다.

$ aws s3 sync . s3://path-to-bucket/

배포 시 Circle CI를 사용하여 파일 복사

Circle CI에 구 aws-s3 를 사용하고 작업images을 추가하여 실행했습니다. 그런 다음 파일은 작업 공간에 유지됩니다. build 작업은 Hugo 빌드를 담당하는 작업이므로 이 작업에 작업 공간을 연결하고 마지막으로 파일을 "콘텐츠/이미지"에 복사했습니다. images 작업은 build 작업에 대한 종속성이기도 합니다.

orbs:
# The rest of the orbs.
hugo: circleci/hugo@0
aws-s3: circleci/aws-s3@1
version: 2.1
jobs:
images:
docker:
- image: circleci/python:2.7
steps:
- aws-s3/copy:
from: 's3://path-to-bucket'
to: images
arguments: --recursive
- persist_to_workspace:
root: .
paths:
- images
build:
docker:
- image: cibuilds/hugo:latest
steps:
- attach_workspace:
at: ~/images
- checkout
- run: cp -r ~/images/images/* content/images
# The rest of the steps.
workflows:
main:
jobs:
- images
- build:
requires:
- images
# The rest of the jobs.

aws-s3 orb를 구성하는 데 필요한 환경 변수는 다음과 같습니다.

AWS_ACCESS_KEY_ID

AWS_SECRET_ACCESS_KEY

AWS_REGION

프로젝트 설정 » 빌드 설정 » 환경 변수 아래의 Circle CI를 통해 구성할 수 있습니다.


프로젝트 설정

지금까지는 그게 다입니다. 방금 리포지토리에서 이미지를 제거하고 "content/images"아래의 이미지를 무시하도록 .gitignore 파일을 추가했습니다.

여전히 정적 이미지를 포함해야 하지만 나중에 언젠가는 그렇게 할 것입니다.