웹앱을 배포하는 6가지 방법

목차

1. 앱 배포 방법
2. 클라우드 플레어 가입하기
3. 클라우드 플레어 페이지로 앱 배포하기
5. 마무리
 
 

웹앱을 배포하는 6가지 방법

 
앞서 만들어본 MBTI 웹앱을 누구나 사용할 수 있도록 배포하는 방법을 몇가지 알아보고 클라우드 플레어 서비스를 사용하여 실제 서버에 배포해보겠습니다. 이제 인터넷만 되면 언제 어디서나 우리가 만든 웹앱을 사용할 수 있게 됩니다.
 

1. 앱 배포 방법

1) 파일을 직접 전달

가장 간단한 방법으로 웹앱을 구성하고 있는 파일들을 복사해서 USB메모리 카드에 담거나, 압축파일로 만들어 메일 혹은 메신저로 첨부해서 보내는 방법입니다. 지극히 비밀스러운 앱을 제작했다면 모르겠으나 웹이라는 이점을 활용하지 못한 방법이라 할 수 있겠습니다.
 

2) 웹서버 구축

PC에 Apache, Nginx, IIS 등의 서버를 직접 설치하고 웹 서비스 환경을 직접 구축해서 앱을 배포하는 방법입니다. 직접 구축하게 될 경우 운영상에 자유로움이 있으며 전기세 외의 별도의 비용이 발생하지 않는 장점이 있습니다. 하지만 설치, 환경설정 등의 난이도가 있는 방법이며 직접 구축을 한다고 하더라도 인터넷 연결이 끊어지거나 PC를 켜두지 않으면 접속을 못하는 문제가 있습니다. 그리고 서버는 항상 외부의 공격에 노출이 되기 때문에 보안상 안심할 수 없습니다.
 

3) 서버 호스팅

독립적인 서버를 구매하거나 매월 일정 비용을 지불하고 서버를 빌려쓰는 서비스입니다. 이 경우 운영체제나 웹서버를 설치하고 환경을 직접 구축해서 앱을 서비스하게 됩니다. 서버에 대한 지식과 관리 노하우가 필요하며 개인 PC와는 달리 원격으로 조작 해야하기 때문에 번거로우나 인터넷 장애나 정전등의 문제로 부터 어느정도 안정성이 보장이 된다는 장점이 있습니다. 하지만 서버 성능에따라 매월 몇 만원 이상의 비용이 지출되기 때문에 지금은 넘어가고 우리가 만들 앱이 서비스 규모가 커진다면 그때 사용을 고민해봐도 되겠습니다. 어느정도 규모있는 동적 웹 어플리케이션에 적합한 서비스 방식입니다.
 

4) 웹 호스팅

한대의 서버 자원을 여러명이 나눠 쓰는 방식인 웹호스팅 서비스를 사용해서 앱을 서비스하는 방법입니다. 서버 호스팅에 비해 비용이 저렴하고 무료 서비스를 제공하는 곳도 많습니다. 그리고 대부분 웹서버가 설치되어 있는 환경이라 파일만 업로드하면 바로 서비스가 가능하다는 편리한 점이 있습니다. 하지만 저장공간이나 속도 일일 트래픽 부분등에서 제약이 있는 경우가 많고 무료서비스의 경우 접속 장애 문제가 자주 발생하는 편입니다. 대부분의 사이트나 소규모 웹앱에 적합합니다. 국내 대표적인 웹 호스팅 회사는 Cafe24가 있습니다.
 

5) 클라우드 서버

클라우드 플랫폼 서비스를 사용하여 애플리케이션을 배포하는 방법입니다. 사용량이 많지 않아도 고 비용이 지출되고 업그레이드가 번거로운 서버 호스팅과는 달리 클라우드 호스팅은 사용한 만큼만 비용을 지불하면 되고 필요시 서버 자원을 늘렸다 줄였다 조절이 자유로운 큰 장점이 있습니다. 그렇기때문에 오늘날 대부분의 웹 서비스는 클라우드 서버를 이용한다고 볼수 있겠습니다. 아마존, 구글, 마이크로소프트 등의 대기업에서도 직접 클라우드 플랫폼을 운영하고 있습니다. 
 

6) 정적 웹 호스팅

서버 호스팅과 클라우드 서버 방식이 동적인 호스팅 서비스라면 정적 웹 호스팅 서비스는 정적인 파일(HTML, CSS, JavaScript, 이미지 등)을 호스팅하는 서비스 입니다. 서버 경험이 없더라도 서버 구성이나 관리에 대해 걱정하지 않아도 될 정도로 사용이 쉽고 편합니다. 대표적인 정적 웹 호스팅 서비스로는 Netlify, GitHub Pages, AWS S3, Firebase Hosting 등이 있습니다. 우리가 만든 웹앱은 정적인 파일로만 구성되어 있기에 이 정적 웹 호스팅 방식이 적합하다 할 수 있겠습니다.
 
클라우드 플레어에서 JAMStack 플랫폼인 Pages라는 정적 웹 호스팅 서비스를 출시하였습니다. 무료인데다가 제약사항이 거의 없다시피 하기 때문에 클라우드 플레어의 Pages 서비스를 사용하여 앱을 배포해보도록 합니다.
 
 

2. 클라우드 플레어 가입

 
 
먼저 클라우드 플레어 Pages 페이지로 접속합니다.
 
https://pages.cloudflare.com 

Cloudflare Pages

 

 
Sign Up 버튼을 클릭하여 회원 가입을 진행 합니다.
 

1~2 우측 상단의 언어 선택 부분에서 한국어로 변경할 수 있습니다. 3번 부분에 이메일과 비밀번호를 입력하고 아래의 파란색 Sign Up(한국어 변경시 가입하기) 버튼을 누르면 화면이 전환되고 인증 메일이 발송 됩니다.
 
 

 
입력한 메일주소로 인증 메일이 발송되는데 메일을 열어서 중간의 링크를 클릭합니다.
 

보안 과정을 거치고 사이트 가입시 입력한 메일주소와 비밀번호를 입력하고 로그인을 합니다.
 

회원 가입이 완료 되었습니다.
 
 

3. 클라우드 플레어 페이지로 앱 배포하기

이제 앱을 배포해보겠습니다. 
 

 
1번 좌측 메뉴에서 Workers 및 Pages 메뉴나 그 하단의 개요 메뉴를 클릭합니다. 2번 응용 프로그램 생성 버튼을 클릭합니다.
 

1번 페이지 탭을 클릭합니다. 파일을 직접 업로드 하기때문에 2번 자산 업로드 버튼을 클릭합니다.
 

1번 입력란에 프로젝트 이름을 입력합니다. 이 이름이 접속 주소가 되기때문에 짧고 간결하게 적어 주면 좋습니다. 다른 사람이 등록한 프로젝트명과 중복되는 경우 임의로 코드번호를 덧붙여 주는데 나중에 도메인을 연결할 예정이라면 그냥 아무렇게나 입력해도 상관은 없습니다. 그리고 2번 버튼을 클릭하면 프로젝트가 생성 됩니다.
 

 
파일 업로드 부분에 파일 탐색기에서 배포할 웹앱 폴더를 선택하여 그대로 끌어다 놓습니다.
 

 
파일 업로드가 진행이 되고 업로드가 완료 되면 사이트 배포 버튼을 클릭하여 배포를 완료 합니다.
 

 
배포가 완료 되고 이제 저기 표시된 URL로 웹앱 접속이 가능해집니다. URL 부분을 클릭하면 바로 새창으로 배포한 앱을 확인할 수 있습니다.
 

 
배포가 완료되었습니다. 이제 어디서나 이 URL로 접속하면 우리가 만든 앱을 확인할 수 있습니다.
 
 

5. 마무리

 
클라우드 플레어의 Pages 서비스를 이용하여 우리가 만든 웹앱을 배포해 보았습니다. 클라우드 플레어 Pages 서비스는  복잡한 서버 환경을 신경쓸 필요없이 파일을 끌어다 놓는것 만으로도 앱 배포가 가능합니다. 다른 앱들도 같은 방식으로  배포가 가능하니 하나씩 배포 해보시기 바랍니다.
 
 

ChatGPT로 수익 창출 앱 만들기 연재 글입니다.

 
2023.05.14 - [모바일 앱] - ChatGPT로 수익 창출 앱 만들기 - 모바일 웹페이지 맛보기

ChatGPT로 수익 창출 앱 만들기 - 모바일 웹페이지 맛보기

2023.05.16 - [모바일 앱] - ChatGPT로 수익 창출 앱 만들기 - 개발 환경 준비하기

ChatGPT로 수익 창출 앱 만들기 - 개발 환경 준비하기

2023.05.17 - [모바일 앱] - ChatGPT로 수익 창출 앱 만들기 - 로또번호 추천 앱 제작하기

ChatGPT로 수익 창출 앱 만들기 - 로또번호 추천 앱 제작하기

2023.05.22 - [모바일 앱] - HTML 설명 및 로또번호 추천 앱 코드 직접 수정해보기

HTML 설명 및 로또번호 추천 앱 코드 직접 수정해보기

2023.05.18 - [모바일 앱] - ChatGPT로 수익 창출 앱 만들기 - MBTI 테스트 앱 제작하기

ChatGPT로 수익 창출 앱 만들기 - MBTI 테스트 앱 제작하기