9. Canva에 앱 만들기. 앱 배포하기

Canva 앱 개발 후 배포하기

 

지금까지 개발 한 캔바 앱을 배포하겠습니다.

일단은 앱이 실행 중 이라면 ctrl + c 로 종료합니다.

 

그리고 .env 파일을 열어줍니다.

.env

CANVA_FRONTEND_PORT=8080
CANVA_BACKEND_PORT=3001
CANVA_BACKEND_HOST=http://localhost:3001
CANVA_APP_ID=여기에 본인의 앱 ID 를 입력
CANVA_APP_ORIGIN=*
CANVA_HMR_ENABLED=FALSE

앱 아이디는 https://www.canva.com/developers/apps 여기에서 확인 할 수 있습니다.

- CANVA_BACKEND_HOST 는 변수 명 그대로 백엔드의 url 인데, 저 같은 경우 lambda 를 호출하고 있으니 그 url 을 입력했습니다.

- CANVA_HMR_ENABLED 는  Hot Module Replacement 를 활성화할 수 있습니다. 

HMR 은 앱 배포 후 앱이 수정이 되었을 때, 수동으로 앱에 적용할 것인지(FALSE) 자동으로 앱에 적용할 것인지(TRUE)를 정합니다.
더 자세한 HMR 설명은 여기

 

캔바 앱 docs 에 아래와 같은 내용이 있는데, 설명을 추가해보자면,,

Known limitations

• Canva doesn't support code-splitting, so all code and dependencies must be bundled in a single file. (You can still organize your code into separate files. The webpack configuration in the starter kit takes care of the bundling.)

Canva에서는 코드 분할을 지원하지 않기 때문에 모든 코드와 라이브러리를 하나의 파일로 묶어야 합니다.
여기서 코드를 여러 파일로 나눌 수는 있지만, 웹팩(Webpack)이라는 도구가 이러한 파일들을 하나의 번들로 묶어줍니다.
이를 더 쉽게 이해할 수 있도록
1. 코드 분할 미지원: Canva에서는 코드를 여러 조각으로 나눠서 필요한 부분만 로드하는 기능을 지원하지 않습니다. 즉, 전체 애플리케이션의 모든 코드를 한 번에 로드해야 합니다.
2. 단일 파일로 묶기: 최종적으로 모든 코드와 라이브러리는 하나의 파일로 합쳐집니다. 이 파일을 번들(bundle)이라고 합니다. 따라서, 최종적으로 하나의 큰 파일이 생성됩니다.
3. 코드를 여러 파일로 나누기: 작업을 더 쉽게 하기 위해 코드를 여러 파일로 나눌 수 있습니다. 예를 들어, 컴포넌트나 유틸리티 함수를 각각 다른 파일에 저장할 수 있습니다. 이렇게 하면 코드의 가독성과 유지보수성이 높아집니다.
4. 웹팩 사용: 웹팩(Webpack)은 여러 파일로 나누어진 코드를 하나의 번들로 묶어주는 도구입니다. Canva의 스타터 키트는 웹팩 구성을 포함하고 있어서, 우리가 작성한 여러 파일을 자동으로 하나의 파일로 합쳐줍니다. 웹팩이 이 과정을 처리해주므로, 개발자는 여러 파일로 코드를 작성하기만 하면 됩니다. 이렇게 하면 Canva에서는 코드 분할을 지원하지 않더라도, 웹팩을 통해 여러 파일로 나뉜 코드를 하나의 번들로 묶어 사용할 수 있습니다.

 

소스 빌드

터미널에서 다음 명령어를 실행합니다.

npm run build

.env 에서 백엔드 URL 을 지정하지 않았다면, 다음과 같은 경고 메시지가 나옵니다.

대부분 앱에서는 백엔드가 있어서 api 를 사용하기 때문에 (대부분 그럴것이고) 이러한 경고가 뜹니다.

이건 예제니까 그냥 넘어갑니다.

빌드가 완료되면 아래 경로에 다음과 같은 파일이 생깁니다.

 

그리고 다시 Canva dev 웹으로 가보면,

아래로 스크롤 다운 하다보면,

Development URL 에서 App Source 로 바꿔서 선택하고, 방금 빌드해서 생성한 파일(app.js)을 업로드 합니다.

또, 참고로 자신의 BACKEND 에서 CORS 설정을 해야한다면, App source 아래에 있는 App Origin 을 허용해두면 됩니다.

 

이제 앱의 상세 정보를 입력합니다.

이 메뉴에서 앱에 대한 정보와 이미지들을 올려야 합니다.

이런건 읽어보면 다 할 수 있습니다.. 

이미지 준비하기가 좀 귀찮긴합니다만,, 사이즈 잘 맞춰서 등록하시고

한가지 팁으로 Terms, Policy 들을 올린 URL 이 필요한데, 

저는 노션(Notion)에 작성하고 배포하면 URL이 생기는데, 그 URL 을 입력했습니다. ㅋㅋ

 

모두 작성하고, 다음 메뉴로 넘어가면 체크 리스트가 있습니다.

X 없이 모두 V 되어야 합니다.

그러면 앱을 Release 할 수 있습니다.

관리자 계정이 아니라면 팀의 관리자가 승인을 하는 단계도 있습니다.

 

앱 삭제

앱 삭제는 App listing Details 의 최하단에 있습니다.

앱의 이름을 입력하고 Delete app 을 누르면 앱이 삭제됩니다.

 

 

마무리

여기까지, 캔바에서 앱을 개발하고 배포하는 과정을 포스팅해봤습니다.

백엔드는 비용이 절약되는 aws lambda 를 추천합니다.

lambda 에서 처리하기 어려운 작업이 있다면, 별도로 backend 서버를 띄워야겠고요.

앱을 사용할 때 인증을 붙힐 수 도 있습니다. Documents 에서 잘 찾아보시고.. (그런데 캔바앱은 대부분 인증없이 사용..)

 

이제 기발한 아이디어로 캔바앱을 만들어서 배포하는 일만 남았네요.

React 에 익숙하다면, 쉽게 앱을 만들 수 있겠습니다.

 

캔바 앱 만들기 시리즈 여기서 끝!

 

 

• [Canva] - 1. Canva에 앱 만들기. Canva Developers
• [Canva] - 2. Canva에 앱 만들기. 개발환경 설정 (mac)
• [Canva] - 3. Canva에 앱 만들기. canva-apps-sdk 설치
• [Canva] - 4. Canva에 앱 만들기. localhost 에서 app 띄우기
• [Canva] - 5. Canva에 앱 만들기. Button
• [Canva] - 6. Canva에 앱 만들기. api 호출 using axios
• [Canva] - 7. Canva에 앱 만들기. Select (dropdown)
• [Canva] - 8. Canva에 앱 만들기. Text Input / Number Input
• [Canva] - 9. Canva에 앱 만들기. 앱 배포하기