Back4App으로 풀스택 웹 애플리케이션 생성 및 호스팅 가이드

풀스택 웹 애플리케이션 만들기 및 호스팅 소개 풀스택 애플리케이션을 시작하는 것은 벅찰 수 있습니다 프론트 엔드를 호스팅하고, 서버를 구성/제공하며, 모든 것을 연결하는 것에 대해 걱정해야 합니다 당신은 몰랐을 수도 있지만, back4app은 위의 모든 것에 최적의 인프라를 제공합니다 back4app의 웹 호스팅을 사용하면 프론트엔드 html(react 및 vue와 같은 프론트엔드 프레임워크 포함)을 쉽게 제공할 수 있습니다 클라우드 코드는 빠르게 시작되는 훌륭한 백엔드를 만듭니다 이 가이드에서는 back4app에서 완전한, 비록 기본적인, 웹 애플리케이션을 구축할 것입니다 이것은 https //github com/considine 이 작성한 게스트 튜토리얼입니다 그는 https //koptional com/ 의 수석 개발자입니다 목표 back4app에서 풀스택 웹 애플리케이션 시작하기 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 명령줄에 익숙해야 합니다 https //git scm com/book/en/v2/getting started installing git 및 https //docs npmjs com/getting started 이 설치되어 있어야 합니다 back4app 계정이 있어야 하며, cli 도구가 설치되고 구성되어 있어야 합니다 도움말은 https //blog back4app com/cli parse server/ back4app 대시보드에서 새 프로젝트를 생성해야 합니다 도움말은 https //www back4app com/docs/get started/new parse app 이 튜토리얼은 parse server 버전 3 1 x로 설정되어야 합니다 자세한 내용은 아래를 참조하세요 이 프로젝트는 새로 출시된 3 1 버전의 parse server를 사용할 것입니다 이는 back4app 프로젝트가 이 릴리스로 설정되어 있어야 함을 의미합니다 그렇지 않으면 작동하지 않습니다 프로젝트 대시보드에서 서버 설정 » parse server 관리(설정)로 이동하여 3 1 1을 선택하세요(베타일 수 있습니다) parse server 3 1 x로 마이그레이션에 대한 자세한 정보는 https //www back4app com/docs/advanced guides/parse server 3 이 프로젝트의 클라우드 코드 구문을 이해하지 못하는 경우 이 가이드를 참조하세요 프로젝트 배경 우리는 기본적인 티켓 교환 애플리케이션을 출시할 것입니다 이 애플리케이션은 사용자가 가입하고 로그인하며, 관리자가 대시보드를 사용하여 생성할 수 있는 다양한 이벤트에 대해 판매하는 티켓을 게시할 수 있도록 합니다 다른 사용자는 게시자가 표시하기로 선택한 이메일 또는 전화번호를 통해 그들과 연락할 수 있습니다 나는 이 앱을 출시했습니다 http //ticketlister koptional com/ , 이 가이드에서 탐색하는 동일한 코드를 사용하여 계정을 만들고, 티켓을 게시하고, 앱이 어떻게 생겼는지 확인하는 것은 자유입니다 이 튜토리얼의 목적은 애플리케이션을 효율적으로 출시하는 방법을 보여주는 것입니다 따라서 각 코드 줄에 대해 깊이 파고들기보다는 대부분 완료된 코드베이스로 시작하여 배포의 용이성에 집중할 것입니다 코드를 편집해야 하는 곳은 단 하나입니다 1단계에서는 프로젝트 설정(애플리케이션 id, javascript 키 및 서버 url)을 추가해야 합니다 하지만 이 애플리케이션을 원하는 대로 수정하고 확장하는 것은 환영합니다 프로젝트 구조 코드를 준비하기 시작하기 전에 이 프로젝트의 파일 구조를 이해하는 것이 중요합니다 이 가이드 전반에 걸쳐 이를 참조로 사용할 것입니다 모든 것이 완료되면 디렉토리는 다음과 같이 보일 것입니다 1 project 2 │ parse local 3 │ parse project 4 │ gitignore 5 │ readme md 6 └───public 7 │ │ index html 8 │ │ login html 9 │ │ signup html 10 │ └───css 11 │ │ signin css 12 │ │ bootstrap min css 13 │ └───js 14 │ │ main js 15 │ │ parse js 16 │ │ signin js 17 │ │ signup js 18 │ 19 └───cloud 20 │ main js 이 설정에서 주요 요점은 다음과 같습니다 프론트엔드 코드는 public 디렉토리에 있습니다 프론트엔드는 최종 사용자가 상호작용하는 애플리케이션의 부분입니다 백엔드 코드는 cloud 디렉토리에 있습니다 백엔드는 애플리케이션에서 비하인드 씬 작업을 수행합니다 여기에는 데이터베이스에 항목을 저장하고 데이터를 전송하는 것이 포함됩니다 프론트엔드는 http 요청을 보내 백엔드에 무엇을 해야 하는지 알려줍니다 우리의 경우, 이는 클라우드 기능을 실행하는 것을 의미합니다 이 설정의 간단함도 주목해 주세요 세 개의 html 파일이 이 애플리케이션의 세 개의 페이지를 나타냅니다 우리의 전체 백엔드는 단일 파일입니다! 2단계에서는 프론트엔드 코드, 즉 공개 디렉토리를 간단히 살펴보겠습니다 3단계에서는 백엔드로 이동합니다 1 파일 준비하기 앞서 언급한 바와 같이, https //www back4app com/docs/advanced guides/web application hosting#prerequisites , back4app에 새 프로젝트를 생성하고 https //blog back4app com/2017/01/20/cli parse server/ 코드를 방문하기 전에 다운로드하여 준비해야 합니다 이 단계에서는 바로 그 작업을 수행합니다 명령줄에서 여러 명령을 실행해야 한다는 점에 유의하세요 각 명령을 복사하여 실행할 수 있도록 제공하겠습니다 이 단계에서 혼란스러우면 걱정하지 마세요; 이는 back4app 앱을 git에 있는 프로젝트에 연결하기 위해 필요한 과정일 뿐입니다 무슨 일이 일어나고 있는지 아는 것은 중요하지 않습니다 이 단계에서 우리는 cli를 사용하여 back4app 프로젝트로 로컬 디렉토리를 초기화합니다 git을 사용하여 이 디렉토리로 예제 프로젝트 파일을 가져옵니다 back4app으로 초기화 명령줄에서 다음을 실행합니다 1 b4a new 다음과 같은 메시지가 표시됩니다 1 새 앱을 만들거나 기존 앱에 cloud code를 추가하시겠습니까? 2 "(n)ew" 또는 "(e)xisting"을 입력하세요 기존 앱을 위해 “e”를 선택하세요 그런 다음 목록에서 생성한 애플리케이션을 선택합니다 다음으로, 코드가 설치될 디렉토리 이름을 입력하라는 메시지가 표시됩니다 선호하는 것이 없다면 그냥 ‘enter’를 누르세요 이 프로젝트를 위해 디렉토리 이름이 “ticketlister”라고 가정하겠습니다 마지막으로, 질문을 받으면 1 디렉토리 이름 2 빈 프로젝트를 설정하거나 현재 배포된 cloud code를 다운로드할 수 있습니다 3 빈 프로젝트를 설정하려면 "(b)lank"를 입력하세요 그렇지 않으면 enter를 누르세요 그냥 enter를 누르세요 (빈칸을 누르지 마세요) 이 명령이 반환되면 새 디렉토리로 cd할 수 있습니다 “cloud”라는 디렉토리와 “public”이라는 디렉토리가 두 개 보일 것입니다 전체 출력은 다음과 비슷하게 보여야 합니다 1 $ b4a new 2 새 앱을 만들거나 기존 앱에 cloud code를 추가하시겠습니까? 3 "(n)ew" 또는 "(e)xisting"을 입력하세요 e 4 1 ticketlister 5 구성에 추가할 앱 선택 11 6 최신 배포된 cloud code를 다운로드할 폴더 이름을 입력하세요 7 앱 "ticketlister"의 cloud code 8 9 디렉토리 이름 10 빈 프로젝트를 설정하거나 현재 배포된 cloud code를 다운로드할 수 있습니다 11 빈 프로젝트를 설정하려면 "(b)lank"를 입력하세요 그렇지 않으면 enter를 누르세요 12 현재 프로젝트에 대한 이메일이 성공적으로 구성되었습니다 "jackconsidine3\@gmail com" 13 cloud code가 /tmp/ticketlister에 생성되었습니다 14 15 여기에는 "hello world" 클라우드 함수가 포함되어 있으므로 배포 후, 16 인쇄된 curl 명령으로 작동하는지 테스트할 수 있습니다 17 18 다음으로, 이 코드를 배포하려면 19 20 cd /tmp/ticketlister 21 b4a deploy 22 23 배포가 완료되면 다음을 실행하여 작동하는지 테스트할 수 있습니다 24 curl x post \\ 25 h "x parse application id ivy4qajquajdhpqq2d3mcr4jlrcvdcvvh6yom1kk" \\ 26 h "x parse rest api key ylgphnent0jnzwy9byt6zcwhqmswryvcfsmqrvus" \\ 27 h "content type application/json" \\ 28 d "{}" \\ 29 https //parseapi back4app com/functions/hello 30 31 $ cd ticketlister 32 $ ls 33 cloud public 앱을 프로젝트 파일과 동기화 중입니다 클라우드 및 공개 폴더 외에도 디렉토리에 두 개의 파일이 있습니다 parse local parse project 이 파일들은 back4app 프로젝트와 관련된 데이터를 포함하고 있습니다 나머지는 https //github com/back4app/back4app ticketlister 의 기존 프로젝트 파일로 덮어써야 합니다 다음은 이를 수행하는 가장 쉬운 방법입니다 1 cd ticketlister 2 git init 3 git remote add origin https //github com/back4app/back4app ticketlister 4 git fetch origin 5 git checkout force b master track origin/master 모든 것이 잘 작동했다면, 이제 다음 파일이 준비되어 있어야 합니다 $ ls r readme md cloud index js package lock json package json public /cloud main js /public css index html js login html signup html /public/css bootstrap min css signin css /public/js main js parse js signin js signup js 걱정하지 마세요 그게 어려운 부분이었습니다! 이제 프로젝트에 집중할 수 있습니다 2 프론트엔드 다시 말하지만, 이 앱의 프론트엔드 코드는 public 디렉토리에 있습니다 상대적으로 간단하게 유지하기 위해 react, angular 또는 vue와 같은 프론트엔드 프레임워크를 사용하지 않기로 결정했습니다 이렇게 하면 외부 종속성이나 빌드가 없습니다 이 프로젝트는 html5 웹 컴포넌트를 사용합니다 이들은 브라우저에서 기본적으로 지원됩니다 이들은 사용자 인터페이스의 다양한 부분의 기능을 캡슐화하는 데 도움을 줍니다 개발자가 새로운 html 요소를 선언할 수 있게 해줍니다(‘\<p>’를 생각해 보세요) 그렇지 않으면 그냥 일반 javascript를 사용합니다 다음은 public/js 디렉토리에 있는 4개의 javascript 파일입니다 $ ls public/js \# main js parse js signin js signup js main js 는 메인 페이지에서 로드되는 코드입니다, index html 이 페이지는 사용자가 티켓 등을 나열하는 곳입니다 signup js 는 가입 페이지에서 로드되는 코드입니다, signup html signin js 는 로그인 페이지에서 로드되는 코드입니다, login html parse js 는 모든 페이지에서 사용하는 간단한 파일입니다 백엔드와의 연결을 생성합니다 이 파일만 수정하면 되며, 수정하지 않으면 프로젝트가 작동하지 않습니다! back4app 자격 증명 추가하기 먼저, application id 와 javascript key 를 back4app 프로젝트에서 가져와야 합니다 back4app에 로그인한 후, 프로젝트를 선택합니다 그런 다음 왼쪽에서 app settings 를 클릭하고 security & keys 를 선택합니다 여러 개의 키가 표시되는 것을 볼 수 있어야 합니다 application id 와 javascript key 를 가져와서 잘 보관하세요 마지막으로, public/js/parse js 를 열고 각 문자열을 적절한 위치에 배치하세요 serverurl이 https //parseapi back4app com 인지 확인하는 것을 잊지 마세요 1 // part 1 put your app id, js key, and server url 2 parse initialize( 3 '', // your app id 4 '' // your javascript key 5 ); 6 // your server url 7 parse serverurl = 'https //parseapi back4app com'; 이제 애플리케이션이 서버와 통신할 수 있습니다! 코드에 대한 간단한 다이브입니다 이 프로젝트의 모든 코드는 이 가이드의 범위를 벗어나지만, 각 파일을 살펴보시기를 권장합니다 아무것도 복잡하지 않으며, 1,000피트 뷰를 제공할 수 있는 시간을 잠깐 가지겠습니다 이 프로젝트는 https //developer mozilla org/en us/docs/web/api/web components 를 사용하여 인터페이스의 각 논리적 섹션을 캡슐화합니다 html 파일의 중요한 마크업은 html \<template> html \<template> 태그 내에 있습니다 이것이 우리가 레이아웃을 설명하는 방법입니다 애플리케이션의 “기능성”은 javascript 파일에서 발생합니다 여기서 앱은 양식이 제출되거나 버튼이 클릭될 때 무엇을 해야 하는지를 설명합니다 예를 들어, 로그인 컴포넌트를 살펴보세요 마크업 ( public/login html )은 다음과 같습니다 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 그리고 기능은 javascript 파일 ( public/signin js )에 나타납니다 1 // code above ^ 2 // when the code is ready, listen for the form to be submitted when it is, 3 // call the 'onsubmit' method 4 connectedcallback() { 5 const form = this shadowroot queryselector('form'); 6 form addeventlistener('submit', this onsubmit bind(this), false); 7 } 8 // obtain the email and password from the markup inputs 9 onsubmit(e) { 10 e preventdefault(); 11 // get inputs 12 const email = this shadowroot queryselector('#inputemail') value; 13 const password = this shadowroot queryselector('#inputpassword') value; 14 this login(email, password); 15 } 16 // send a request to the backend, attempting to login if the login 17 // is successful, go to the index html page otherwise, give the user 18 // an alert explaining what went wrong 19 login(email, password) { 20 // add login method here 21 parse user login(email, password) 22 then(user => { 23 window\ location href = 'index html'; 24 }) 25 catch(e => { 26 alert(e message); 27 }); 28 } 29 // more code below 30 전체 애플리케이션은 이 일반적인 구조를 가집니다 프론트 엔드가 백엔드와 이렇게 통신하는 경우를 주의 깊게 살펴보세요 ( public/js/main js ) 다음 단계에서는 이러한 함수가 어떻게 선언되는지 살펴보겠습니다 3 백엔드 전체 백엔드는 cloud/main js , 클라우드 코드 함수 파일에 있습니다 이는 back4app으로 얼마나 적은 코드로 많은 것을 이룰 수 있는지를 증명하는 매우 적은 양의 코드로 구성되어 있습니다 앱의 일부(티켓이 나열될 수 있는 이벤트 생성)는 단순히 back4app 대시보드를 사용할 것입니다 이 멋진 기능은 우리 프로젝트와 함께 제공되므로, 바퀴를 다시 발명할 필요가 없습니다! 다시 말해, 각 코드 라인을 검토하는 것은 우리의 범위를 벗어납니다 그러나 우리는 코드가 어떻게 작동하는지에 대한 또 다른 넓은 시각을 가질 것입니다 당신은 cloud functions 를 cloud/main js 파일에 선언합니다 이러한 함수는 프론트 엔드에서 호출할 수 있습니다 (참조 2단계 ) cloud functions에 대한 자세한 정보는 https //docs parseplatform org/cloudcode/guide/#cloud functions 를 참조하세요 또한, 이러한 cloud functions는 parse server에서 실행됩니다 이 https //www back4app com/docs/advanced guides/parse server 3 는 사용되는 구문에 대해 설명하므로, 살펴보는 것이 도움이 될 수 있습니다 보다 구체적으로, 우리가 정의하는 함수는 다음과 같습니다 ‘ user\ signup ’ 사용자 가입 흐름을 처리하는 코드 ‘ tickets\ list ’ 모든 나열된 티켓을 검색하는 코드 ‘ tickets\ create ’ 새 티켓을 생성하는 코드 ‘ events\ list ’ 모든 이벤트를 나열하는 코드 마지막으로 코드 노트 파일 상단에 간단한 메서드를 추가했습니다 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; 특정 클라우드 기능은 사용자가 로그인해야 합니다 요청의 사용자 속성과 함께 이 함수를 호출함으로써, 아무도 무단 요청을 할 수 없도록 보장합니다 나머지 함수들을 훑어보는 것을 강력히 권장합니다 그들이 무엇을 하는지 알게 되었으니, 이제 배포할 수 있습니다! 4 배포하기 모든 코드를 정리했으며, 이제 앱을 back4app에 배포할 수 있습니다 다음 명령어는 모든 공개 및 클라우드 파일을 업로드합니다 b4a deploy 로컬 웹사이트 호스팅 업로드한 웹 앱을 보기 위해 공개 도메인을 얻으려면 back4app 대시보드에서 웹 호스팅을 활성화해야 합니다 먼저, 대시보드 왼쪽에서 “서버 설정”을 엽니다 다음으로, “웹 호스팅 및 라이브 쿼리” 아래의 “설정” 링크를 클릭합니다 마지막으로, “back4app 호스팅 활성화”를 체크합니다 고유한 하위 도메인을 선택해야 합니다 이 프로젝트에 대해 ticketlister를 이미 등록했으므로 다른 것을 선택하세요 선택적으로, 소유한 도메인을 이 back4app 도메인으로 “포인팅”하도록 구성할 수 있습니다 나는 https //www back4app com/docs/advanced guides/my%20website 에 대해 이렇게 설정했습니다 웹사이트에서 시작할 계획이라면 “사용자 정의 도메인” 아래의 텍스트를 주의 깊게 확인하세요 이 단계를 제대로 완료하면 도메인으로 이동하여 앱을 사용할 수 있습니다 사용자 정의 도메인이 없는 경우, http //\<your subdomain> back4app io를 열면 됩니다 여기서 your subdomain은 방금 선택한 이름입니다 5 사용 및 대시보드 티켓을 나열하려면 back4app의 관리 대시보드에서 이벤트를 생성해야 합니다 데이터 브라우저로 이동하여 ‘이벤트’ 클래스를 생성하세요 ‘이름’(문자열)과 ‘언제’(날짜)라는 열을 추가합니다 그런 다음 이벤트를 직접 추가할 수 있습니다 모든 열을 채우는 것을 잊지 마세요 다음과 비슷하게 보일 것입니다 이제 웹 앱에서 로그인하고 해당 이벤트로 티켓을 나열할 수 있습니다 parse / back4app와 함께 제공되는 이 관리 기능은 작업량을 줄여주는 또 다른 지름길입니다 결론 백엔드가 있는 웹 애플리케이션을 만드는 것은 종종 몇 주 또는 몇 달이 걸리는 작업입니다 우리는 back4app의 강력한 인프라와 parse sdk를 활용하여 훨씬 더 빠르게 출시했습니다 이 접근 방식을 사용하면 시간을 낭비하지 않고도 놀라운 것을 구축할 수 있습니다