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

풀스택 웹 애플리케이션 만들기 및 호스팅 소개 풀스택 애플리케이션을 시작하는 것은 벅찰 수 있습니다 프론트 엔드를 호스팅하고, 서버를 구성/제공하며, 모든 것을 연결하는 것에 대해 걱정해야 합니다 당신은 몰랐을 수도 있지만, back4app은 위의 모든 것에 최적의 인프라를 제공합니다 back4app의 웹 호스팅을 사용하면 프론트엔드 html(react 및 vue와 같은 프론트엔드 프레임워크 포함)을 쉽게 제공할 수 있습니다 클라우드 코드는 빠르게 시작되는 훌륭한 백엔드를 만듭니다 이 가이드에서는 back4app에서 완전한, 비록 기본적인, 웹 애플리케이션을 구축할 것입니다 이것은 john considine https //github com/considine 이 작성한 게스트 튜토리얼입니다 그는 k optional https //koptional com/ 의 수석 개발자입니다 목표 back4app에서 풀스택 웹 애플리케이션 시작하기 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 명령줄에 익숙해야 합니다 git 및 npm 이 설치되어 있어야 합니다 back4app 계정이 있어야 하며, cli 도구가 설치되고 구성되어 있어야 합니다 도움말은 여기에서 확인하세요 back4app 대시보드에서 새 프로젝트를 생성해야 합니다 도움말은 여기에서 확인하세요 이 튜토리얼은 parse server 버전 3 1 x로 설정되어야 합니다 자세한 내용은 아래를 참조하세요 이 프로젝트는 새로 출시된 3 1 버전의 parse server를 사용할 것입니다 이는 back4app 프로젝트가 이 릴리스로 설정되어 있어야 함을 의미합니다 그렇지 않으면 작동하지 않습니다 프로젝트 대시보드에서 서버 설정 » parse server 관리(설정)로 이동하여 3 1 1을 선택하세요(베타일 수 있습니다) parse server 3 1 x로 마이그레이션에 대한 자세한 정보는 이 가이드를 참조하세요 이 프로젝트의 클라우드 코드 구문을 이해하지 못하는 경우 이 가이드를 참조하세요 프로젝트 배경 우리는 기본적인 티켓 교환 애플리케이션을 출시할 것입니다 이 애플리케이션은 사용자가 가입하고 로그인하며, 관리자가 대시보드를 사용하여 생성할 수 있는 다양한 이벤트에 대해 판매하는 티켓을 게시할 수 있도록 합니다 다른 사용자는 게시자가 표시하기로 선택한 이메일 또는 전화번호를 통해 그들과 연락할 수 있습니다 나는 이 앱을 출시했습니다 여기 http //ticketlister koptional com/ , 이 가이드에서 탐색하는 동일한 코드를 사용하여 계정을 만들고, 티켓을 게시하고, 앱이 어떻게 생겼는지 확인하는 것은 자유입니다 이 튜토리얼의 목적은 애플리케이션을 효율적으로 출시하는 방법을 보여주는 것입니다 따라서 각 코드 줄에 대해 깊이 파고들기보다는 대부분 완료된 코드베이스로 시작하여 배포의 용이성에 집중할 것입니다 코드를 편집해야 하는 곳은 단 하나입니다 1단계에서는 프로젝트 설정(애플리케이션 id, javascript 키 및 서버 url)을 추가해야 합니다 하지만 이 애플리케이션을 원하는 대로 수정하고 확장하는 것은 환영합니다 프로젝트 구조 코드를 준비하기 시작하기 전에 이 프로젝트의 파일 구조를 이해하는 것이 중요합니다 이 가이드 전반에 걸쳐 이를 참조로 사용할 것입니다 모든 것이 완료되면 디렉토리는 다음과 같이 보일 것입니다 이 설정에서 주요 요점은 다음과 같습니다 프론트엔드 코드는 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으로 초기화 명령줄에서 다음을 실행합니다 다음과 같은 메시지가 표시됩니다 기존 앱을 위해 “e”를 선택하세요 그런 다음 목록에서 생성한 애플리케이션을 선택합니다 다음으로, 코드가 설치될 디렉토리 이름을 입력하라는 메시지가 표시됩니다 선호하는 것이 없다면 그냥 ‘enter’를 누르세요 이 프로젝트를 위해 디렉토리 이름이 “ticketlister”라고 가정하겠습니다 마지막으로, 질문을 받으면 그냥 enter를 누르세요 (빈칸을 누르지 마세요) 이 명령이 반환되면 새 디렉토리로 cd할 수 있습니다 “cloud”라는 디렉토리와 “public”이라는 디렉토리가 두 개 보일 것입니다 전체 출력은 다음과 비슷하게 보여야 합니다 앱을 프로젝트 파일과 동기화 중입니다 클라우드 및 공개 폴더 외에도 디렉토리에 두 개의 파일이 있습니다 parse local parse project 이 파일들은 back4app 프로젝트와 관련된 데이터를 포함하고 있습니다 나머지는 레포지토리 https //github com/back4app/back4app ticketlister 의 기존 프로젝트 파일로 덮어써야 합니다 다음은 이를 수행하는 가장 쉬운 방법입니다 모든 것이 잘 작동했다면, 이제 다음 파일이 준비되어 있어야 합니다 걱정하지 마세요 그게 어려운 부분이었습니다! 이제 프로젝트에 집중할 수 있습니다 2 프론트엔드 다시 말하지만, 이 앱의 프론트엔드 코드는 public 디렉토리에 있습니다 상대적으로 간단하게 유지하기 위해 react, angular 또는 vue와 같은 프론트엔드 프레임워크를 사용하지 않기로 결정했습니다 이렇게 하면 외부 종속성이나 빌드가 없습니다 이 프로젝트는 html5 웹 컴포넌트를 사용합니다 이들은 브라우저에서 기본적으로 지원됩니다 이들은 사용자 인터페이스의 다양한 부분의 기능을 캡슐화하는 데 도움을 줍니다 개발자가 새로운 html 요소를 선언할 수 있게 해줍니다(‘\<p>’를 생각해 보세요) 그렇지 않으면 그냥 일반 javascript를 사용합니다 다음은 public/js 디렉토리에 있는 4개의 javascript 파일입니다 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피트 뷰를 제공할 수 있는 시간을 잠깐 가지겠습니다 이 프로젝트는 html5 웹 컴포넌트 를 사용하여 인터페이스의 각 논리적 섹션을 캡슐화합니다 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에 대한 자세한 정보는 문서 를 참조하세요 또한, 이러한 cloud functions는 parse server에서 실행됩니다 이 가이드 는 사용되는 구문에 대해 설명하므로, 살펴보는 것이 도움이 될 수 있습니다 보다 구체적으로, 우리가 정의하는 함수는 다음과 같습니다 ‘ 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에 배포할 수 있습니다 다음 명령어는 모든 공개 및 클라우드 파일을 업로드합니다 로컬 웹사이트 호스팅 업로드한 웹 앱을 보기 위해 공개 도메인을 얻으려면 back4app 대시보드에서 웹 호스팅을 활성화해야 합니다 먼저, 대시보드 왼쪽에서 “서버 설정”을 엽니다 다음으로, “웹 호스팅 및 라이브 쿼리” 아래의 “설정” 링크를 클릭합니다 마지막으로, “back4app 호스팅 활성화”를 체크합니다 고유한 하위 도메인을 선택해야 합니다 이 프로젝트에 대해 ticketlister를 이미 등록했으므로 다른 것을 선택하세요 선택적으로, 소유한 도메인을 이 back4app 도메인으로 “포인팅”하도록 구성할 수 있습니다 나는 http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website 에 대해 이렇게 설정했습니다 웹사이트에서 시작할 계획이라면 “사용자 정의 도메인” 아래의 텍스트를 주의 깊게 확인하세요 이 단계를 제대로 완료하면 도메인으로 이동하여 앱을 사용할 수 있습니다 사용자 정의 도메인이 없는 경우, http //\<your subdomain> back4app io를 열면 됩니다 여기서 your subdomain은 방금 선택한 이름입니다 5 사용 및 대시보드 티켓을 나열하려면 back4app의 관리 대시보드에서 이벤트를 생성해야 합니다 데이터 브라우저로 이동하여 ‘이벤트’ 클래스를 생성하세요 ‘이름’(문자열)과 ‘언제’(날짜)라는 열을 추가합니다 그런 다음 이벤트를 직접 추가할 수 있습니다 모든 열을 채우는 것을 잊지 마세요 다음과 비슷하게 보일 것입니다 이제 웹 앱에서 로그인하고 해당 이벤트로 티켓을 나열할 수 있습니다 parse / back4app와 함께 제공되는 이 관리 기능은 작업량을 줄여주는 또 다른 지름길입니다 결론 백엔드가 있는 웹 애플리케이션을 만드는 것은 종종 몇 주 또는 몇 달이 걸리는 작업입니다 우리는 back4app의 강력한 인프라와 parse sdk를 활용하여 훨씬 더 빠르게 출시했습니다 이 접근 방식을 사용하면 시간을 낭비하지 않고도 놀라운 것을 구축할 수 있습니다