GitHub Action + Cafe24 웹호스팅 업로드 방법

Ai가 다~했다.GitHub Action + Cafe24 웹호스팅 업로드 방법

 

 

GitHub Action + Cafe24 웹호스팅 업로드 방법

1. 준비 사항

• GitHub 저장소: 프로젝트를 올려둔 저장소
• Cafe24 웹호스팅 계정: FTP 접속 정보 (서버 주소, 아이디, 비밀번호)
• GitHub Secrets 설정:
  • FTP_SERVER → FTP 서버 주소
  • FTP_USER → FTP 아이디
  • FTP_PASS → FTP 비밀번호

Secrets는 GitHub 저장소 → Settings → Secrets and variables → Actions 메뉴에서 등록합니다.

---

2. .github/workflows/deploy.yml 생성

프로젝트 루트에 .github/workflows/deploy.yml 파일을 만들고 아래 내용을 작성합니다.

name: Deploy via FTP

on:
  push:
    branches: [ "master" ]   # master 브랜치에 push될 때 실행

jobs:
  ftp-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USER }}
          password: ${{ secrets.FTP_PASS }}
          local-dir: ./                       # HTML/CSS/JS 파일이 있는 루트 폴더
          server-dir: /www/                   # 카페24 웹 루트 폴더
          protocol: ftp                       # Passive Mode 활성화

 

---

3. 주요 설정 포인트

• 브랜치: 저장소 기본 브랜치가 master라면 반드시 branches: [ "master" ]로 설정해야 합니다.
• server-dir: 카페24 웹 루트는 /www/입니다. 반드시 /로 끝나야 하며, 루트(/)로는 업로드 불가합니다.
• Passive Mode: 외부 서버에서 접속 시 반드시 Passive Mode를 사용해야 하므로 protocol: ftp 옵션을 추가합니다.
• local-dir: HTML/CSS/JS 구조라면 ./로 지정하면 됩니다. 빌드 결과물이 따로 있다면 ./dist/ 또는 ./build/로 변경하세요.

---

4. 실행 확인

1. GitHub 저장소에 push하면 Actions 탭에서 워크플로우가 실행됩니다.
2. 성공 시 초록색 체크(✔️) 표시가 뜨고, 로그에서 FTP 업로드 내역을 확인할 수 있습니다.
3. Cafe24 서버의 /www/ 폴더에 파일이 정상적으로 올라가면 배포 완료입니다.

---

5. 문제 해결 팁

• 550 오류 → server-dir 경로가 잘못되었거나 / 루트로 지정했을 때 발생. 반드시 /www/로 설정.
• ENOENT 오류 → local-dir에 지정한 폴더가 존재하지 않을 때 발생. 실제 프로젝트 구조에 맞게 수정.
• 로그인 실패(530 오류) → FTP 계정정보가 틀린 경우. GitHub Secrets에 올바른 값 입력 필요.

---

마무리

이제 GitHub Actions를 이용해 코드 push → 자동 배포 → Cafe24 웹호스팅 반영까지 완전 자동화가 가능합니다. HTML/CSS/JS 정적 사이트라면 별도의 빌드 과정 없이 바로 /www/에 업로드되므로, 손쉽게 CI/CD 환경을 구축할 수 있습니다.

 

---

 

 

 

 

몇번 실패를 경험 후 에러가 폴더 경로 때문이라 판단하여 Cafe24 문의게시판에 글을 남겼다.   

답글을 Ai에게 받았다.

----------------------------------------------------------------------------------
[550 오류 해결 방법]

1. Passive Mode 활성화
GitHub Actions 등 외부 서버에서 FTP 접속 시에는 Passive Mode를 사용해야 합니다.
FTP-Deploy-Action 설정에서 protocol 옵션을 확인하시고, 다음과 같이 Passive Mode가 활성화되어 있는지 확인해 주세요.

2. 권장 설정 예시
- server: ftp서버주소
- username: FTP 아이디
- password: FTP 비밀번호
- server-dir: /www/
- local-dir: ./ (또는 빌드 결과물 경로)

3. 주의사항
- 카페24 공유 웹호스팅은 보안상 /www/ 상위 경로(루트 경로)로의 파일 업로드가 불가합니다.
- server-dir를 / (루트)로 설정하면 550 오류가 발생할 수 있습니다.
- 반드시 /www/를 기준으로 설정해 주세요.

4. FTP 접속 정보 확인
FTP 접속 정보는 나의 서비스관리 > 계정 정보 > 접속 정보 메뉴에서 확인하실 수 있습니다.

 

최종

 

 

GitHub 무료 vs 유료 차이

GitHub 무료 vs 유료 차이