Review

[NCP] 정적 웹 호스팅 CI / CD에 관하여···.

Yeo Wun 2025. 4. 11. 00:16

 

📌 NCP CI / CD 그거 어떻게 하는 건데···.

 

부디 다른 분들에게 도움이 되길 바라는 마음에 오늘 있었던 일을 적어본다···.

일단 NCP에 Object Storage를 생성하고 프로젝트를 넣어두었다.

그리고 테스트 하기 위해 수동으로 파일 업로드를 해 보았는데,

폴더를 업로드 하면 되지 않아서, 직접 폴더를 생성하고 넣어줘야하는 번거로움이 있었다.

그래서 일단 CI / CD 를 세팅하게 되는데···.

 

 

 

 

🧐 AWS는 그냥 aws s3로 하면 되는데, NCP는 굳이 s3cmd를 써야 함? 

🧐  CLI라는 게 뭔데 꼭 써야 해?

 

이렇게 두가지 물음이 생겨서 해당 내용에 대해 먼저 이해하려고 한다.

 

 

🎯 CLI 란?

CLI = Command Line Interface로 명령어로 조작하는 인터페이스 이다.

마우스 클릭 없이, 터미널 명령어로 조작하는 방식이다.

CLI(Command Line Interface)는 소프트웨어를 조작하는 방식 중 하나일 뿐이다.

 

🤨 왜 Object Storage에는 CLI이 필요한가?

Object Storage는 단순한 파일 저장소이다.

우리가 서버에 배포하는 것이 아니라, 정적 파일 (html, css, js)를 업로드 하는 거기 때문에 이것을 업로드 하려면 결국

파일을 복사하고 설정하는 과정이 필요하다.

이것을 자동화 하려면, 즉 CI/CD에서 스크립트로 돌리기 위해 CLI 도구가 필수다!

 

 

‼️ 그럼 왜 aws-cli 대신 s3cmd를 쓰는 걸까?

AWS는 당연히 AWS-cli 지원을 잘함!!! 명령어를 바로 쓸 수 있는데~ NCP는 완벽하게 호환이 되지 않는다!

s3cmd는 S3 호환 스토리지를 폭넓게 지원하는 오픈소스 CLIA 툴이라 더 안정적이고 잘 맞는다.

그래서 NCP 공식 문서에서 s3cmd를 사용하는 예제가 많이 나와있다!
https://guide-gov.ncloud-docs.com/docs/object-storage-data-migration?utm_source=chatgpt.com

 

 

Object Storage

 

guide-gov.ncloud-docs.com

 

 

 

더보기

✅ aws-cli는 AWS에서 직접 만든 도구

  • 📦 공식 이름: AWS Command Line Interface
  • 🏢 제작사: Amazon Web Services
  • 📘 공식 문서: https://docs.aws.amazon.com/cli/
  • ✅ AWS의 모든 서비스 (EC2, S3, Lambda, etc.)를 명령어로 다룰 수 있게 해주는 공식 툴

✅ s3cmd는 AWS가 만든 건 아님!

  • 🛠️ 제작사: 오픈소스 커뮤니티 (SoftEra라는 회사에서 시작)
  • 🌍 GitHub 저장소: https://github.com/s3tools/s3cmd
  • 🧩 목적: AWS S3와 호환되는 모든 S3 호환 스토리지를 CLI로 다루기 위함
    • AWS S3뿐만 아니라
    • NCP, Wasabi, MinIO, DigitalOcean Spaces 등도 다 지원

 

📌 그래서 NCP CI / CD 는 s3cmd 를 활용!

 

name: Deploy To Dev NCP

on:
  push:
    branches:
      - develop
  pull_request:
    branches:
      - develop

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Github Repository 파일 불러오기
        uses: actions/checkout@v4

      - name: 의존성 설치
        run: npm install

      - name: 빌드
        run: npm run build -- --mode development

      - name: s3cmd 설치
        run: sudo apt-get update && sudo apt-get install -y s3cmd

      - name: NCP 인증 설정
        run: |
          echo "[default]" > ~/.s3cfg
          echo "access_key = ${{ secrets.NCP_ACCESS_KEY }}" >> ~/.s3cfg
          echo "secret_key = ${{ secrets.NCP_SECRET_KEY }}" >> ~/.s3cfg
          echo "host_base = kr.object.ncloudstorage.com" >> ~/.s3cfg
          echo "host_bucket = {bucket}.kr.object.ncloudstorage.com" >> ~/.s3cfg

      - name: Object Storage 기존 파일들 삭제
        run: |
          s3cmd del --recursive --force s3://${{ secrets.DEV_NCP_BUCKET }}/

      - name: Object Storage 새 파일 등록
        run: |
          s3cmd sync dist/ s3://${{ secrets.DEV_NCP_BUCKET }}/ --exclude '*.DS_Store'

 

 

일단 나는 develop 브랜치에 push 를 하거나 PR을 올릴 때 돌아가게 작성했다. 

 

빌드를 진행한 후 s3cmd를 설치하고 인증을 설정했다.

 

그리고 기존 파일들을 삭제한 후 새 파일을 등록 했는데···.

 

 

 

css가 적용 되지 않고···. 이렇게 깨져서 보였다!
진짜 뭐가 문제인지 하루 종일 고민했는데, 부트캠프에서 조교님이 같이 찾다가 정답을 발견하고!! 알려주셨다.

그 이유는 바로

 

css의 메타 데이터 설정이···! 잘못 되었던 것이었다!

 

 

 

content-Type이 text/plain라니! css인데!!! 그래서 이게 어떻게 된 일인가 하구 해답을 찾다가~~ 찾다가 안 되어서···

멘토님께 도움을 요청했다!

 

어떻게 문제를 찾아야하나 사실 감도 잡기 어려워서···ㅠㅠ 그냥 냅다 content-Type이 바뀌는 이유라던지 등등을 찾았는데

멘토님께서 이렇게 문제를 좁혀주셔서 어떤게 문제인지 파악할 수 있었다!
그리고 이와 동시에 하나의 문서를 찾아주셨는데!

 

 

어떤 외국인 분이 쓰셨던 질문이었다!!!!

해당 글을 해석해 보자면 이 분도 s3cmd를 사용하는 도중 css의 context-type이 text-plain으로 바뀌어서 --guess-mime-type 라는 명령어를 썼는데도 효과가 없었다고 했다!! ( 심지어 나도 같은 구문을 썼는데 해결이 되지 않았었다! )

 

그리고 여기엔 해결책도 있었다!!!

 

 

 

사실 해당 문제는 s3cmd에 예전부터 있었던 오류로 추가적으로 

--no-mime-magic을 써주면 해결 된다고 써있었고! 작성자가 해당 방법으로 문제를 해결했다고 써있었다ㅠㅠㅠ

 

자세한 내용은 아래 링크를 참고 해 주셔라!

https://stackoverflow.com/questions/53708938/s3cmd-flagging-css-with-wrong-mime-type

 

s3cmd flagging CSS with wrong MIME type

I'm running automated builds on CircleCI of a react app. And a step involves running npm run build and then copying to an S3 bucket to host builds. What I'm seeing is that s3cmd is copying *.css...

stackoverflow.com


흑흑···. 멘토님 그저 빛···. 덕분에 s3cmd 관련한 깨알 해답책과···. 문제를 좁혀서 볼 수 있는 시야를 얻을 수 있었다ㅠㅠㅠ

하루 종일 헤맸는데 조교님이랑 멘토님 덕분에ㅠㅠ 흑흑 ㅠㅠ 감사합니다···.

 

 

그래서 고쳤다

      - name: Object Storage 새 파일 등록
        run: |
          s3cmd sync dist/ s3://${{ secrets.DEV_NCP_BUCKET }}/ --exclude '*.DS_Store' --guess-mime-type --no-mime-magic # dist 폴더 업로드

 

 

새 파일 등록할 때! 

--guess-mime-type --no-mime-magic
 
이걸 둘 다 붙였다!
 
 
 

--guess-mime-type 이거는 파일 확장자로 MIME를 자동으로 추정해주는 것이고

--no-mime-magic  이거는 python-magic 기반 감지 비활성화 (꼬이는 거 방지) 해주는 거라고 한다!

 

저렇게 작성하고 고쳐줬는데!!!

 

 

 

다시 이렇게 떠버린···ㅎㅎㅎㅎㅎ 이어서 배드 엔딩인 줄 알았지만!!!

shift + cmd + R 을 눌렀더니!!!

 

 

따란~!~! 예쁘게 잘 떠줬다 ㅠㅠ 흑흑 

이제 https만 잘 적용하면···. NCP 로 정적 웹사이트 배포하기 완료이닷···.

CDN 승인 받고 나면 다음 이야기를 작성하도록 하겠다!

부디 s3cmd로 부터 고통 받는 사람들이 줄어들기를!!

저작자표시 비영리 변경금지 (새창열림)

'Review' 카테고리의 다른 글

[NCP] 정적 웹사이트 배포에 관하여···  (0) 2025.04.10
[강의리뷰] 한 입 크기로 잘라먹는 타입 스크립트  (1) 2025.03.08

'Review'의 다른글

  • 현재글[NCP] 정적 웹 호스팅 CI / CD에 관하여···.

관련글

티스토리툴바