15. CI/CD(프론트엔드)

6866 단어 awsgithub
내 프런트엔드용 git 리포지토리를 설정한 후 내bio의 소스 코드를 CI/CD 파이프라인으로 S3 버킷blog.komlalebu.com에 업로드하는 프로세스를 자동화할 때였습니다.

힘내: https://github.com/jicoing/git-komlalebu

힘내 작업



GitHub Actions를 사용하면 모든 소프트웨어 워크플로를 쉽게 자동화하고 GitHub에서 바로 코드를 배포할 수 있습니다.



Git 허브 작업은 소스 코드가 actions를 사용하여 내 git 저장소로 푸시되는 순간 내 S3 버킷으로 푸시합니다. 많은 검색 끝에 나는 마침내 herehere에서 배웠고, 그래서 내 자신의 액션 생성을 진행했습니다.

Overview



이 간단한 작업은 바닐라 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
  • 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를 설정했습니다.



    비밀


  • AWS_ACCESS_KEY_ID, AWS_S3_BUCKET, DISTRIBUTION_ID 및 AWS_SECRET_ACCESS_KEY가
    보안을 위해 환경 변수로 전달되었습니다.

  • Github secrets.



    자식 푸시 .



    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 프런트 엔드가 설정됩니다.

    좋은 웹페이지 즐겨찾기