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.)