[카페24] 카페24 디자인 버전관리와 함께 자동 배포하기

 

*회고 겸 작성하기 때문에 엄청 길어요. 필요하신 분들은 하단의 방법만 참고하세요.

 

카페24를 호스팅으로 이용하는 커머스의 개발자로서 카페24는 그야말로 구원자이자 장애물인데

그 중 가장 해결해보고자 했던 것이 바로 '배포'라는 행위이다.

 

일단 카페24를 서버로 쓰는 것이 아니라 쇼핑몰 호스팅을 이용해서 솔루션 자체를 이용하는 경우 카페24의 페이지들은 전부 FTP를 통해 카페24 서버에서 돌아가게 된다. 그렇기 때문에 FTP가 가능한 배포 라이브러리들을 사용할 수 있는데, 말이 쉽지 실제로는 여러가지 문제가 있었다. 리액트 배포도 깃헙 배포 밖에 안해본 나로서는 '배포'라는 행위를 회사 시스템에 도입한다는데 큰 의의를 두었다.

 

대부분의 카페24 스킨은 디자인관리의 PC용 레이아웃과 모바일쇼핑몰 의 모바일용 레이아웃 두 개를 나눠서 작업을 한다. 실제로 카페24 기본 스킨도 아예 두 개를 나눠서 작업을 하도록 권장(이자 강요)하고 있다. 보통 실제 돌아가고 있는 (카페24에서는 대표 디자인 이라고 부른다) 실서버에서 디자인을 수정하고 테스트 하는 것은 별로 좋지 않기 때문에 디자인 관리에서도 대표 디자인을 복제해서 테스트용 디자인 스킨을 두고 작업하고, 모바일쇼핑몰에서도 동일하게 테스트용 디자인 스킨을 두고 테스트 후 대표 디자인으로 등록하는 방식을 사용할 것이다.

 

내가 입사하기 전 시스템은 모바일을 기반으로 쇼핑몰 스킨을 제작해서 mobile9 폴더를 통해 스킨을 작업한 다음 디자인관리의 skin36 폴더와 mobile10 폴더에 동일한 파일을 업로드 시켜 운영을 했었다. 일단 PC와 모바일의 디자인이 별개로 돌아가게 되면 당시 1인 개발이었기 때문에 공수가 너무 많이 들어 그냥 모바일 친화로 통합을 해버렸더랬다. 그래서 PC와 모바일 모두 대응되는 스킨 크기로 작업한 후 아래와 같은 방식으로 배포를 진행했다.

우선 mobile9 폴더를 로컬로 다운받아 VSCode를 이용해서 코드를 수정하고 VSCode의 플러그인인 SFTP를 통해서 업로드를 했다. 예를 들어 mobile9에서 index.html 파일 마크업을 다 한 다음에 배포를 위해 mobile10 폴더의 index.html 위에 엎은 다음 SFTP로 업로드 하고, 다시 skin36폴더에 들어가서 index.html를 연 다음 위에 코드를 엎어 SFTP로 업로드 하는 작업을 반복해야 했다. 한 개의 파일을 배포 하는 일이야 크게 번거롭지는 않았지만 HTML과 CSS를 여러개 수정해서 한 번에 배포해야 하는 경우에는 웹과 모바일을 번갈아가면서 어떤 파일을 배포했는지 수동으로 체크해야하는 엄청나게 구시대적인 방식을 적용해야 했다. 이러다가 하나라도 누락되는 경우 전부 diff해서 어떤 파일을 깜빡했는지 체크해야 했다.

 

그래서 내가 꿈꾸기 시작한 것은 테스트용 폴더에서 작업해서 스킨이 정상적으로 표시되었는지 확인 되었다면 PC용과 모바일용 모두 명령어 하나로 배포가 되는 그런 시스템이었다. 카페24에도 문의해보았지만 역시 솔루션사 답게 '내부 기능 외에는 답변해줄 수 없다.' 라는 답변을 받아서 너무 슬펐다.

 

그래서 아래와 같이 그림을 그려놓고 어떻게 하면 지금의 시스템을 좀더 전근대에서 근대적으로 바꿀 수 있는지 고민하였다. 배포 방식 + 버전관리까지 한 방에 하고 싶어서 GitHub에 레포지토리가 업데이트 되면 배포가 되는 방식으로 머리를 싸매고 고민했다. 안되는거 아는데, 나도 배포해보고 싶다!

 

 

배포 프로토타입

 

 

별도로 라이브러리나 패키지를 설치할 수 없는 카페24 호스팅의 경우 이도 저도 아닌 그냥 FTP를 이용하는 수 밖에 없었는데, 여러가지 배포 서비스들에서도 FTP 배포를 제공해주는 경우가 있어서 몇 가지를 검토해보았다. (이미지 상에 GitHub Action 부분에 들어갈 것들)

 

- Git FTP

- Jenkins 

- AWS Codedeploy

- GitHub Action

 

Git FTP의 경우 별도의 글을 작성했던 것처럼 잘 안되었다. 그리고 트리거가 없어서 배포용으로는 적합하지 않다는 생각을 했고, 아래 얘기할거지만 파일을 걸러내는 exclude 기능이 없어서 문제가 되었다. 젠킨스의 경우.. FTP를 지원해주기는 했는데 플러그인을 FTP내에 설치해야 했다. 여기서 먼저 이야기해야 할 것은 카페24가 제공해주는 가장 큰 장애물 하나인데, 바로 '확장자 제한' 이다. 

카페24 FTP의 경우 아래와 같은 확장자 제한이 있다.

 

말하자면 이미지 확장자 및 .html, .css, .js, 폰트 파일 말고는 아무것도 업로드가 안된다는 것이다. (텍스트 파일까지는 허용해준다. 히히)

당연히 젠킨스 플러그인 설치는 안되고 FTP 서버 내에 뭔가를 설치해야 하는 것은 다 안되었다.  

그러니 젠킨스 탈락. AWS는 더 복잡해서 셋팅도 못해봤고 남은건 GitHub Action이었다.

GitHub Action이 희망적이었던 이유는 별도로 파일을 업로드 할 필요 없이 레포지토리에 셋팅만 해두면 FTP가 돌아간다는 점이었다.

그래서 공식문서를 활용해서 새로운 레포지토리를 만들고 새로운 스킨을 만든 다음에 테스트를 해봤는데, 파일이 올라간다! git add . -> git commit -m "" -> git push를 하면 ACTION 탭에서 FTP로 업로드가 되는 것이다.

 

하지만 몇 가지 문제가 있었다.

1. mobile9에서 mobile10으로는 가는데... 나는 1개의 로컬 폴더에서 2개의 FTP 내 폴더로 동일한 파일을 전송해야 한다.

-> yml 문서 에서 job에 폴더를 2개 설정하면 2개가 순차적으로 업로드 된다

2. 일정 수준 이상 업로드가 되고 나면... 갑자기 오류가 나면서 TIMEOUT이 난다.

-> 카페24에 FTP 연결 문의를 해도 알 수 없는 오류라고 해서 해답을 받을 수 없었다.

 

이것도 결론부터 얘기하자면 확장자! 확장자 이슈였다.

FTP 를 통해 왔다갔다 할 수 있는 확장자는 위와 같이 한정적인데 거기다가 대고 json 파일이니 yml이니 올리려고 하니 FTP가 파일 업로드를 막아버리면서 TIMEOUT이 떴던 것이다. 

그리고 GitHub Action으로 FTP를 돌리려면 한번 workflow를 인식해야 하는데 이미 폴더가 가득 차 있는 상태면 파일이 있는지 없는지 파악을 못하는 상태 (설명이 잘 안되는데, 빈 폴더에 FTP로 파일을 올렸다는 흔적을 가지고 파일 삭제, 수정, 생성을 하는데 이미 해당 파일이 존재하는 상태에서 파일을 수정하려고 하니 안되었던 것 같다는 생각을 했다) 가 되면서 또 TIMEOUT이 나오는 것이었다.

 

그래서 이런 문제점들을 타진한 다음 아래와 같은 시나리오를 짰다.

 

1. 로컬에 local-mobile9 로 생성
2. 로컬 local-mobile9 폴더에 readme.md 생성하고 새로운 리포지토리 git remote 연결
3. pull 받기
4. .gitignore 설정, 해당 리포지토리 git action main.yml 설정 (mobile10, skin38 서버로)
5. exclude 설정
6. cafe24 ftp 내부 mobile9 에서 로컬 local-mobile9로 폴더 일부분 다운로드
7. 로컬에 local-mobile9 폴더에서 ftp 세팅 위해 최초 push 나눠서 하기 (4번을 4회에 나눠서/한 번에 올리면 timed out)
8. git push 테스트

 

풀어서 말하자면 로컬에 아무것도 없는 빈 폴더를 하나 만든 다음에 그 폴더에 readme 같은 의미없는 파일을 하나 생성하고 레포지토리를 연결한 다음 .gitignore과 main.yml를 설정한다. 그 다음 main.yml에 exclude를 아주 꼼꼼하게 (카페24가 받아들이지 않는 파일 확장자 중 예상가능한건 다) 작성한 다음 FTP내에 실제 돌아가고 있는 대표 디자인의 파일을 일부분 받는다. 그리고 그 파일들을 git add 한 다음 레포지토리에 push 해보고  (처음 작업할 때는 혹시 몰라서 파일 전체를 1/4로 나눠서 한 개씩 받고 한 개씩 올렸다.) mobile10과 skin38에 잘 올라가는지 확인해보았다.

 

 

업로드가 된다!

일단 업로드가 되는 것을 확인했다.

그래서 GitHub Action의 secret을 통해서 FTP 주소와 비밀번호를 환경변수 설정하고 main.yml을 다시 다듬었다.

그리고 이 main.yml을 가지고 아예 새로운 작업을 하기 위해 '디자인관리' 에서 새 기본 디자인을 만들고(skin40), 이 디자인을 기반으로 마크업 작업을 한 다음 skin41과 mobile23에 올라가는 GitHub Action 파이프라인을 만들었다.

 

레포지토리에 skin40이 올라가 있으니 디자인 버전 관리도 되고, 이전 버전으로 돌아가고 싶으면 git reset, revert도 쓸 수 있고 아주 만족하면서 디자인을 완료하고 실 배포를 위해 카페24에서 대표 디자인 설정을 하는 순간

모든 것이 망가졌다.

 

작동해야 하는 스크립트는 동작 안하고 마크업은 깨지고 나와야 하는 가격은 안나오고...

몇 주는 새 스킨에서 오류를 수정하고 다시 대표디자인 설정해보고 또 수정하고를 반복하면서 구내염과 두통 방광염 파티를 벌였다.

 

이것도 결론적으로 말하자면 카페24 FTP는 받아들이는 확장자가 제한되어 있다는 점을 잘 상기해야 한다. 그리고 모바일과 PC용 디자인이 다르다는 점도 복선이었다. 

이게 무슨 이야기냐면 카페24 기본 디자인에는 자체적으로 가지고 있는 특수한 파일이 하나 있다. 바로 '원터치 주문서' 인데, 보기에는 아주 평범한 html 파일처럼 생겼지만 FTP로 다운받아서 보면 아무것도 나오지 않는다. 실제 디자인관리의 에디터로 들어가서 보더라도 조작할 수 없다. 자세한 사항은 여기 공지사항을 보면 알 수 있다. 모바일 환경에 맞춘 간단 주문서 시스템인데 html 파일의 탈을 쓴 다른 형태의 파일이었다. 그렇기 때문에 이 파일을 아무리 html로 올린다고 해서 빈 폴더에 새로 쓰여진 원터치 주문서는 그냥 빈 html 파일일 뿐이었다.

그리고 PC용 디자인 모듈과 모바일용 디자인 모듈이 다르기 때문에 발생한 문제도 있었다. 바로 가격 변수인데, PC에서 쓰이는 가격 변수의 이름과 모바일에서 쓰이는 가격 변수의 이름이 달라 내가 PC 디자인을 기반으로 만들었기 때문에 앱이나 모바일 화면에서는 가격이 뜨지 않는 커머스로서는 크리티컬한 문제가 발생했던 것이다.

 

이전 작업물에서는 모바일을 기반으로 PC를 맞춰서 그나마 수정 건이 더 적었지만 나는 'PC가 근간이지!' 하면서 PC 디자인을 기반으로 모든 모듈을 작업해서 모바일에서는 적용 안되는 것이 태반이었다. 

그럼 PC용을 다 버리고 모바일로 새로 작업했나? 그건 아니고 모바일 모듈을 반드시 써야하는 부분만 모바일을 모듈을 적용하고 나머지는 PC 모듈로 적용하고 있습니다..

만약 반응형으로 한 파일을 이용해 모바일 PC 둘 다 잡으시려면 반드시 모바일 기본 디자인으로 시작하시길...

 

---

 

GitHub Action 통해서 카페24 스킨 배포하기 (+버전 관리 하기)

 

*PC용과 모바일용 스킨의 코드가 전부 동일하다는 가정 

 

1. 작업할, 혹은 작업한 스킨 폴더를 로컬에 다운받습니다. (이 폴더는 VSCode STFP를 통해 업,다운로드 되지만 최초 다운은 파일질라 같은 FTP 프로그램으로 받아서 누락되는 파일이 없어야 됩니다.)

2. 디자인관리, 모바일쇼핑몰에서 새로운 스킨을 각각 1개씩 만듭니다.

3. FTP로 접속해서 해당 스킨에 파일을 전부 삭제합니다. (ㅋㅋ)

4. 로컬 폴더를 GitHub repository에 연결합니다.

5. github에서 해당 repository에 main.yml를 작성하고 push해줍니다. (main.yml은 아래에)

6. github secret으로 FTP 설정을 해줍니다. (변수명 꼭 확인)

7. 로컬 폴더에 pull 해줍니다. (main.yml 받기)

8. 로컬 폴더에 받아둔 스킨 파일이 많기 때문에 폴더를 1/4, 1/5해서 git add로 추가하고 commit 하고 push 해줍니다.

9. GitHub Action이 돌아가는 것을 봅니다.

 

* 원터치 주문서의 경우 애초에 삭제를 해보지 않거나 (제가 해보지 않아서 죄송합니다 ㅠㅠ) 만약 손상이 되어서 원터치 주문서가 작동하지 않으면 카페24 쇼핑몰관리자 1:1에 요청해서 파일 복구를 요청합니다.

 

 

main.yml

on: push
name: 🚀 Deploy on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    timeout-minutes: 1000
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v2

    - name: 📂 Sync files PC용폴더명
      uses: SamKirkland/FTP-Deploy-Action@4.3.0
      with:
        server: ${{ secrets.FTP_HOST }}
        server-dir: /sde_design/PC용폴더명/
        username: ${{ secrets.FTP_NAME }}
        password: ${{ secrets.FTP_PWD }}
        protocol: ftp
        port: 21
        exclude: |
          **/.git*
          **/.git*/**
          **/node_modules/**
          **/.github*
          **/.github*/**
          **/preference*
          **/preference*/**
          *.json
          *.ini
          *.gif
          *.yml
          *.scss
          *.css.map
    - name: 📂 Sync files 모바일폴더명
      uses: SamKirkland/FTP-Deploy-Action@4.3.0
      with:
        server: ${{ secrets.FTP_HOST }}
        server-dir: /sde_design/모바일폴더명/
        username: ${{ secrets.FTP_NAME }}
        password: ${{ secrets.FTP_PWD }}
        protocol: ftp
        port: 21
        exclude: |
          **/.git*
          **/.git*/**
          **/node_modules/**
          **/.github*
          **/.github*/**
          **/preference*
          **/preference*/**
          *.json
          *.ini
          *.gif
          *.yml
          *.scss
          *.css.map