2022. 6. 7. 13:30ㆍWEB Dev/GIT | GITHUB
카페24 쇼핑몰 쓰면 쓸수록 괴롭기도 하고 진국이라는 생각도 든다.
정말 기능이 많은 어드민을 쓰기 위해 계속 카페24로 작업을 하고 있는데, 개발자 입장에서 소스코드 관리가 안 된다는 점이 너무 괴로웠다.
일단 뭔가 하나 변경하면 별도로 텍스트 파일로 저장해놓고 (주로 노션에) 작업을 해야 했다.
깃허브로 복구를 많이 진행해 본 것은 아니지만 소스코드가 어딘가에 온전히 살아있다는 것이 얼마나 큰 위안을 주는지 개발자들은 알거다.
카페24의 임대형 쇼핑몰은 기본적으로 ftp 를 이용해 배포를 진행한다.
개발자가 아닌 사람들도 쇼핑몰을 쉽게 이용할 수 있도록 만드는 것이 카페24의 특징인데, 모듈-변수 라는 방식으로 각 컴포넌트의 기능들을 이용할 수 있게 해주고 HTML이나 CSS에 지식이 있으면 프로 모드로 작업을 하게 되고 아니면 드래그해서 붙여넣기 해서 기능을 쓸 수 있는 에디봇 시스템도 갖추고 있다.
나는 프론트엔드 개발자기 때문에 카페24의 백오피스를 일종의 백엔드라고 생각하고 지정된 모듈과 변수를 이용해 화면에 뿌려주는 작업들을 하고 있다.
서론이 매우 길었는데 정리를 하자면
카페24 임대형 쇼핑몰 장점
- 개발자가 아니어도 쉽게 쇼핑몰을 만들 수 있다.
- 백오피스(어드민, 쇼핑몰 관리자)가 매우 기능이 많고 상세하다.
- 매뉴얼이 잘 되어 있고 고객센터가 활발하게 운영되어 하루에서 이틀 정도면 원하는 답변을 받아볼 수 있다.
- 모듈-변수로 구성되어 있는 쇼핑몰의 각 기능들은 기본적인 마크업 지식과 자바스크립트 기초 지식이 있으면 쉽게 사용이 가능하다.
- 개발 관련 지식이 없으면 드래그해서 붙여 넣는 쉬운 방식의 인터페이스를 쓸 수 있다.(에디봇)
- 모바일 쇼핑몰에 마크업을 올리면 그대로 웹뷰 방식의 앱을 만들어 주는 서비스도 있다.(플러스앱)
- 외부 기능을 쉽게 붙일 수 있다.(리뷰 관련, 자동화 추천 등 외부 업체에서 만든 앱을 내 쇼핑몰에 붙여 쓸 수 있다)
- SNS 로그인 작업을 카페24 측에서 도와주기 때문에 백엔드 지식이 없어도 쉽게 SNS 로그인도 붙일 수 있다.
- 내부 데이터베이스를 API 형태로 받아서 쓰거나 정보를 보낼 수 있다.
카페24 임대형 쇼핑몰 단점
- 데이터베이스를 마음대로 조작할 수 없다. 데이터베이스의 권한이 카페24 측에 있다.
- 배포를 FTP 방식으로 하기 때문에 빌드해서 배포하는 요즘 방식의 CI/CD가 불가능하다.
- 임대형 쇼핑몰이기 때문에 서버에 SVN을 심을 수 없다. 소스코드 관리를 완전 수동으로 해야 한다.
- 어드민의 기능이 너무 많아서 매뉴얼을 숙지하기가 어렵다.
- 모듈-변수로 생성되는 마크업이 너무 오래된 방식이고 모듈-변수만 입력하면 되기 때문에 태그의 세부 속성을 컨트롤하기 힘들다.
- 제이쿼리를 기본 자바스크립트 라이브러리로 사용하는데 심지어 1. 대 버전을 사용한다. 높은 버전의 제이쿼리와 충돌한다.
- 기능을 실행하는 함수와 API는 숨겨져 있어 원하는 대로 컨트롤하거나 커스텀할 수 없다.
그렇다면 어떻게 이 FTP를 이용하는 카페24 임대형 쇼핑몰에 깃헙을 연동할 수 있을까 한 번 방법을 알아보자.
우리는 웹 skin과 모바일 skin이 완벽하게 동일하다.
만약 모바일과 웹 디자인이 다르다면 웹 skin이 올라가는 FTP 폴더와 github 웹 레포지토리, 모바일 skin이 올라가는 FTP 폴더와 github 모바일 레포지토리를 각각 연결해야 한다.
요즘에는 완전 반응형을 많이 작업하니 웹 skin과 모바일 skin이 동일하다는 가정하에 작업했던 방법을 공유해본다.
우리 회사, 그리고 내가 쓰는 방법은 테스트용 스킨을 통해 웹 폴더와 모바일 폴더에 업로드하는 방법이다.
그림으로 표현하자면 아래와 같다.
카페 24의 스킨들은 각각의 skin_no가 부여된다. 웹의 경우 skin00으로 붙게 되고 모바일은 mobile00으로 붙게 된다.
skin100이 테스트하는 폴더라고 가정하고 skin200과 mobile200이 실제 배포되는 폴더라고 생각해보자.
1️⃣ skin100에서 화면 작업을 다 하고 해당 로컬 폴더를 깃허브 레포지토리에 push 하게 되면
2️⃣ 레포지토리에서 설정한 GitHub Action에서 변경 내용을 확인하고 해당 파일들을
3️⃣ 실제 배포 폴더인 skin200과 mobile200에 ftp로 업로드하게 된다.
처음 이 작업을 할 때 Timeout이라던지 여러 가지 오류가 많았는데 오류를 해결하는 방법과 함께 카페24 임대형 쇼핑몰에 어떻게 ftp 배포 방식을 적용할 수 있는지 확인해보자
GitHub에서 GitHub Action을 이용한 카페24 임대형 쇼핑몰 배포하기
* 많은 CI/CD 중에서 굳이 GitHub Action을 쓴 이유는
우선 무료여야 하고 (배포를 자주 해야 하는 마크업 파일 특성상)
어차피 깃헙에 연결하기도 하고
FTP 배포를 지원하는 몇 안 되는 CI/CD였기 때문이다.
방법
1. 모바일쇼핑몰 혹은 디자인관리에 디자인 생성 (우측의 기본 디자인 추가 이용 - 테스트하는 폴더가 된다.)
2. 새로운 기본 디자인이 생성되면 skin_no 확인해서 로컬에 ftp 혹은 sftp 연결해 다운로드
2-1. VSCode sftp 연결은 아래와 같이 설정파일에 입력하면 된다.
{
"name": "원하는 연결 이름",
"host": "카페24 ftp 연결 주소",
"protocol": "sftp",
"port": 기본 포트는 22이나 접속이 안되면 ftp 로 변경하고 21 포트 사용 혹은 문의하면 열린 포트를 알려준다.,
"username": "ftp 접속 아이디",
"password": "ftp 접속 비밀번호",
"remotePath": "/sde_design/생성한 스킨 폴더명",
"uploadOnSave": true, 해당 설정들은 자유롭게 설정
"downloadOnOpen": true,
"ignore": [
".vscode",
".git",
".gitignore",
".DS_Store",
".github",
".temp",
"*.scss"
이렇게 해 둔 이유는 sftp 설정 시 카페24 ftp에 올라가지 못하는 파일을 ignore 시키는 것
],
"watcher": {
"files": "*/*",
"autoUpload": false,
"autoDelete": true
}
}2-2. 혹은 파일질라와 같은 ftp 프로그램을 이용하여 폴더를 다운로드하여도 된다.
path는 /sde_design/스킨 폴더명이다.
3. 로컬로 디자인 스킨을 다운로드하였다면 실제 배포할 skin_no를 만들어준다. (디자인관리와 모바일디자인에서 각각 기본 디자인을 한 번 씩 더 생성해준다.)
4. FTP 프로그램을 이용해 실제 배포할 skin 폴더를 비워준다.
폴더를 삭제하는 것이 아니라 폴더 내의 파일을 지워준다.
디자인관리와 모바일쇼핑몰에서 생성한 폴더 내의 파일을 모두 지운다. 폴더를 통째로 삭제하면 안 됨!
이는 최초 업로드할 때 충돌하지 않게 하고 로컬과 서버 내 파일을 비교하지 않고 바로 올릴 수 있게 하기 위해서다.
카페24 FTP 전송에는 제한 시간이 있기 때문에 시간이 너무 오래 걸리면 에러 메시지를 뱉고 연결이 종료되기 때문이다.
5. 테스트용으로 만든 폴더에 GitHub Repo를 연결해준다.
6. GitHub Repo에서 Action을 누르면 하단에 Skip this and set up a workflow yourself를 눌러준다.
7. 올라간 파일 내에 .github/workflow/main.yml 파일을 생성할 수 있는 화면이 나타난다.
8. 기본으로 적혀있는 workflow는 FTP 가 아니기 때문에 FTP deploy의 yml 파일 양식을 사용한다.
https://github.com/marketplace/actions/ftp-deploy
FTP Deploy - GitHub Marketplace
Automate deploying websites and more with this GitHub action via FTP and FTPS
github.com
기본 설정 yml을 사용해서 커스터마이징 하면 된다.
아래와 같이 작성할 수 있다.
git push를 하게 되면 2개의 job이 실행되는데 처음엔 웹 배포 폴더로
그다음엔 모바일 배포 폴더로 FTP 업로드가 진행된다.
on: push
name: 🚀 Deploy on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
timeout-minutes: 1000 //임의로 1000으로 설정하였다.
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v2
- name: 📂 Sync files 모바일
uses: SamKirkland/FTP-Deploy-Action@4.3.0
with:
server: // ftp 서버 주소
server-dir: /sde_design/모바일 폴더명/
username: // ftp 아이디
password: // ftp 비밀번호
protocol: ftp
port: 21
exclude: |
**/.git*
**/.git*/**
**/node_modules/**
**/.github*
**/.github*/**
**/preference*
**/preference*/**
*.json
*.ini
*.gif
*.yml
*.scss
*.css.map
// 이외 내가 사용하는 파일 중 카페24가 허용하지 않는 확장자를 모두 입력해준다.
- name: 📂 Sync files 웹
uses: SamKirkland/FTP-Deploy-Action@4.3.0
with:
server: // ftp 서버 주소
server-dir: /sde_design/모바일 폴더명/
username: // ftp 아이디
password: // ftp 비밀번호
protocol: ftp
port: 21
exclude: |
**/.git*
**/.git*/**
**/node_modules/**
**/.github*
**/.github*/**
**/preference*
**/preference*/**
*.json
*.ini
*.gif
*.yml
*.scss
*.css.map
// 이외 내가 사용하는 파일 중 카페24가 허용하지 않는 확장자를 모두 입력해준다.
8-1. 반드시 exclude에 카페24 FTP 가 허용하지 않는 파일을 적어준다.
아래와 같이 업로드 가능한 확장자를 제외하고 모든 파일 확장자를 지원하지 않기 때문에,
혹시 로컬 폴더에 이것과 다른 확장자가 있는지 확인하고 exclude에 작성해준다.
나의 경우는 scss를 별도로 로컬에서 사용하고 있기 때문에 scss 관련 확장자까지 작성했다.
카페24 FTP 서버에 올라갈 수 없는 확장자 파일이 올라가려고 하면 바로 Timeout 오류가 난다.
8-2. ftp 주소, 아이디, 비밀번호와 같은 중요 정보들은 공개하지 않고 깃헙 레포지토리 환경변수로 관리할 수 있다.
GitHub Repo 내의 Settings - Security - Secrets - Action에서 지정할 수 있다.
카페24 파일이라고 보안이 중요하지 않은 것은 아니다 FTP 정보를 노출하지 않도록 주의하자.
설정 방법은 다음 블로그를 참고하자
https://ji5485.github.io/post/2021-06-26/create-env-with-github-actions-secrets/
Github Actions에서 Secrets을 통해 env 파일 생성하기
일반적으로 Github에 업로드하지 않는 env 파일을 어떻게 Github Actions에서 생성하고, 환경 변수를 추가할 수 있는지 알아봅시다.
ji5485.github.io
9. 이제 테스트 폴더에서 소스코드를 수정하고 git add . - git commit -m "msg" - git push 순으로 파일을 레포지토리로 푸시해준다.
그러면 push 트리거에 따라 Action이 실행된다.
초반 업로드에는 시간이 조금 걸리고 ftp 관련 json 파일이 각 폴더에 자동으로 들어간다.
카페24 FTP 에는 원래 웹 FTP를 이용하는 경우 JSON이 올라가지 지는 않지만 다른 FTP 클라이언트를 이용하면 올릴 수 있다.
해당 json 파일은 내가 파일을 수정하고 삭제하고 만든 정보가 입력되기 때문에 삭제해서는 안된다.
10. 이제 각 배포 폴더의 주소(웹, 모바일)를 쇼핑몰관리자에서 클릭해보면 정상적으로 디자인이 표시될 것이다.
FTP Deploy를 이용해 카페24의 임대형 쇼핑몰도 소스코드를 버전 관리할 수 있지만 FTP라는 한계가 있다.
그리고 GitHub Action을 사용하려면 기본적으로 소스코드 repository가 Public 이어야 한다. (배포 횟수에는 제한이 있음)
Private면 비용이 발생한다.
About billing for GitHub Actions - GitHub Docs
About billing for GitHub Actions GitHub Actions usage is free for both public repositories and self-hosted runners. For private repositories, each GitHub account receives a certain amount of free minutes and storage, depending on the product used with the
docs.github.com
또한 카페24 내에도 버전관리 시스템이 기본적으로 존재하기는 하나(삭제해도 복구해주고, 매일 자동으로 백업되고 있음) git 연결 기능도 빨리 개발되었으면 하는 바람이 있다
'WEB Dev > GIT | GITHUB' 카테고리의 다른 글
| [카페24] 카페24 디자인 버전관리와 함께 자동 배포하기 (0) | 2022.09.20 |
|---|---|
| [Github] git@github.com: Permission denied (publickey) 오류 (3) | 2022.01.18 |