15. CI/CD(프론트엔드)
blog.komlalebu.com
에 업로드하는 프로세스를 자동화할 때였습니다.힘내: https://github.com/jicoing/git-komlalebu
힘내 작업
GitHub Actions를 사용하면 모든 소프트웨어 워크플로를 쉽게 자동화하고 GitHub에서 바로 코드를 배포할 수 있습니다.
Git 허브 작업은 소스 코드가 actions
를 사용하여 내 git 저장소로 푸시되는 순간 내 S3 버킷으로 푸시합니다. 많은 검색 끝에 나는 마침내 here과 here에서 배웠고, 그래서 내 자신의 액션 생성을 진행했습니다.
이 간단한 작업은 바닐라 AWS CLI를 사용하여 디렉터리(리포지토리에서 또는 워크플로 중에 생성됨)를 원격 S3 버킷과 동기화합니다. IAM 역할에는 S3에 액세스할 수 있는 권한이 있어야 합니다.
Github Actions를 구성하는 첫 번째 단계는 리포지토리 기반에 .github라는 폴더를 만드는 것입니다. 구조는 일반적으로 다음과 같습니다
나무:
git-komlalebu
┣ 📂.github
┃ ┣ 📂작업
┃ ┃ ┗ 📂샘
┃ ┃ ┃ ┗ 📂패키지
┃ ┃ ┃ ┃ ┣ 📜action.yml
┃ ┃ ┃ ┃ ┣ 📜Dockerfile
┃ ┃ ┃ ┃ ┗ 📜entrypoint.sh
┃ ┗ 📂워크플로
┃ ┃ ┗ 📜main.yml
┣ 📜error.html
┣ 📜git.png
┣ 📜힐탑.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜컴라프로세스로고.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png
git-komlalebu
┣ 📂.github
┃ ┣ 📂작업
┃ ┃ ┗ 📂샘
┃ ┃ ┃ ┗ 📂패키지
┃ ┃ ┃ ┃ ┣ 📜action.yml
┃ ┃ ┃ ┃ ┣ 📜Dockerfile
┃ ┃ ┃ ┃ ┗ 📜entrypoint.sh
┃ ┗ 📂워크플로
┃ ┃ ┗ 📜main.yml
┣ 📜error.html
┣ 📜git.png
┣ 📜힐탑.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜컴라프로세스로고.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png
index.html
, error.html
, styles.css
는 내 정적 웹 사이트의 소스 코드 파일입니다. .gif
및 .png
파일은 웹 사이트 스타일 지정에 필요합니다. main.yml
는 .github/workflows
폴더에 있습니다. 내 작업 흐름을 정의하는 ci.yml 파일을 살펴보겠습니다.
main.yml
여기에서
jobs
를 정의합니다. 이는 워크플로 중에 발생하는 작업과 순서를 결정합니다. 작업은 ubuntu-latest
이미지를 사용합니다. uses 문은 사용하려는 특정 작업을 정의합니다. 여기에는 action/checkout@v1이라는 표준 작업이 있으며 내 작업의 경로로 ./.github/actions/sam/package
를 사용합니다.워크플로우는 다음에 있는 파일을 사용합니다.
./.github/actions/sam/package
📂 행동┗ 📂샘
┗ 📂패키지
┣ 📜action.yml
┣ 📜도커파일
┗ 📜entrypoint.sh
action.yml
action.yaml 파일은 특정 작업에 대한 메타데이터를 자세히 설명합니다. Dockerfile에 정의된 이미지를 사용합니다.
도커파일
도커 이미지
python:3.8-alpine
를 빌드하고 여기에서 환경AWSCLI_VERSION='1.18.14'
을 실행하도록 dockerfile을 구성합니다.내 작업 저장소에서 컨테이너
/
( Refer )의 파일 시스템 경로COPY entrypoint.sh /entrypoint.sh
로 코드 파일을 복사합니다. 그러나 연속Permission denied
예외에 직면하여 아래 명령을 추가해야 했습니다.RUN ["chmod", "+x", "/entrypoint.sh"]
. ( Refer ).entrypoint.sh
대부분의 작업은 도커 이미지의 이 파일에서 수행됩니다.
이 작업에 사용된 것과 동일한 코드( Refer - jakejarvis/s3-sync-action )이지만 내 배포용 클라우드 프런트 캐시를 무효화하기 위해
entrypoint.sh
를 약간 수정했습니다. 나는 또한 새로운 --profile git-komlalebu
를 설정했습니다.비밀
보안을 위해 환경 변수로 전달되었습니다.
자식 푸시 .
CMD
C:\Users\USER_NAME\git-komlalebu-sam>git add .
C:\Users\USER_NAME\git-komlalebu-sam>git commit -m master
C:\Users\USER_NAME\git-komlalebu-sam>git push origin master
파일이 리포지토리로 푸시되면 워크플로는 S3 버킷blog.komlalebu.com
을 사용하여 아래 파일을 업로드/동기화합니다.
┣ 📜error.html
┣ 📜git.png
┣ 📜힐탑.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜컴라프로세스로고.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png
작동 중인 워크플로.
업데이트된 S3 버킷
내 파일은 로컬에서 git push 시 자동으로 업로드됩니다. 결과적으로 정적 웹 사이트도 업데이트됩니다.
Cloudfront 캐시 무효화.
그리고 CI/CD 프런트 엔드가 설정됩니다.
Reference
이 문제에 관하여(15. CI/CD(프론트엔드)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/jicoing/15-ci-cd-front-end-1626
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
CMD
C:\Users\USER_NAME\git-komlalebu-sam>git add .
C:\Users\USER_NAME\git-komlalebu-sam>git commit -m master
C:\Users\USER_NAME\git-komlalebu-sam>git push origin master
작동 중인 워크플로.
업데이트된 S3 버킷
Cloudfront 캐시 무효화.
Reference
이 문제에 관하여(15. CI/CD(프론트엔드)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jicoing/15-ci-cd-front-end-1626텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)