JS Framework
백포앱에서 Node.js 앱 호스팅 설정 및 라우팅 가이드
13 분
back4app 서버에 node js 웹 애플리케이션 호스팅하기 소개 이 튜토리얼에서는 서브도메인을 설정하고 정적 페이지를 쉽게 호스팅하는 방법을 설명합니다 이 단계별 가이드를 완료하면 node js 앱을 사용하여 사용자 등록 및 로그인을 할 수 있습니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 이 앱을 로컬에서 테스트하려면 로컬 환경에 node js를 설치해야 합니다 다음을 따를 수 있습니다 back4app으로 생성된 앱 확인해 보세요 프로젝트와 함께 구성된 back4app 명령줄 다음 단계를 진행하세요 우선, 우리의 새로운 간단한 애플리케이션에 대해 이야기해 봅시다! node js를 사용한 웹 호스팅의 예를 설명하겠습니다! 사용자가 back4app 대시보드에 포함된 간단한 로그인, 등록 및 비밀번호 요청을 구축해야 한다고 가정해 보겠습니다 우리는 프로젝트에서 bootstrap, 정적 파일(css 및 이미지) 및 express를 사용할 수 있습니다 여기에서 라이브 앱을 확인하세요 nodeapplication back4app io back4app 플랫폼의 앱 코드 템플릿에서 이 전체 애플리케이션을 클론할 수 있습니다 여기 먼저, 명령줄 인터페이스를 사용하여 설정을 완료하세요 ( 전제 조건 보기 https //www back4app com/docs/js framework/node web server#content prerequisites ) 최종 파일 구조가 어떻게 작동하는지 이해하기 위해 ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 back4app에서 서브도메인 이름 활성화하기 웹 호스팅 기능을 활성화하려면 아래 가이드의 단계를 따르세요 웹 호스팅 및 실시간 쿼리 활성화하기 2 파일 생성 및 업로드 이 단계에 착수하기 전에, 파일을 쉽게 업로드할 수 있도록 command line tool ( 사전 요구 사항 보기 https //www back4app com/docs/js framework/node web server#content prerequisites )를 사용하는 것을 권장합니다! 먼저, app js app js 와 package json package json 파일을 클라우드 디렉토리 안에 생성하세요! back4app에 모듈 설치하기 터미널에서 클라우드 폴더 안에 다음을 입력해야 합니다 $ touch package json 이제 package json 파일 안에 npm 모듈 ‘body parser’를 삽입하세요 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } 문제 해결 클라우드 폴더 안에서 npm install npm install 을 실행할 필요는 없습니다 back4app 서버가 자동으로 설치할 것입니다 app js 1 // 모듈 요구하기 2 var bodyparser = require("body parser"); 3 4 // 뷰 디렉토리 설정 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // 앱에 body parser 설정 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 // routes js 파일 요구하기 13 14 require(' /routes'); 3 앱의 뷰 생성하기 템플릿 앱을 만들기 위해 템플릿 ejs 파일을 제공할 것입니다 언제든지 귀하의 쪽에서 변경할 수 있습니다 ) 터미널로 돌아가기 cloud 디렉토리 내에 views 폴더와 다음 ejs 파일을 생성해야 합니다 head ejs head ejs html 구조의 head에 내용을 추가하는 데 사용할 것입니다 index ejs index ejs 사용자 등록 및 로그인을 위해 사용할 것입니다 reset password ejs reset password ejs 사용자가 비밀번호 재설정을 요청하는 데 사용할 것입니다 힌트 우리는 bootstrap을 사용하여 뷰를 구성할 것입니다 여기를 클릭하세요 더 많은 정보를 읽으려면 각각의 뷰에 내용을 추가할 수 있습니다 아래 템플릿을 사용하여 번거로움 없이 작업할 수 있습니다 head ejs 1 \<title>back4app node js application\</title> 2 \<meta charset="utf 8"> 3 \<meta name="viewport" content="width=device width, initial scale=1"> 4 \<link rel="shortcut icon" type="image/png" href="/favicon png"/> 5 \<! bootstrap css > 6 \<link rel="stylesheet" href="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/css/bootstrap min css" integrity="sha384 bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> 7 8 \<! jquery > 9 \<script src="https //cdnjs cloudflare com/ajax/libs/jquery/3 3 1/jquery min js">\</script> 10 11 \<! bootstrap js > 12 \<script src="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/js/bootstrap min js" integrity="sha384 tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous">\</script> 13 14 \<! stylesheet pages > 15 \<link rel="stylesheet" type="text/css" href="/css/style css"> index ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm 6"> 11 \<div class="box settings box register"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/register"> 14 \<h2 class="title screen"> 15 register a new account 16 \</h2> 17 \<div class="form group"> 18 \<input type="text" name="usernameregister" placeholder="username" class="form control" value="<%= infouser usernameregister %>"> 19 \</div> 20 \<div class="form group"> 21 \<input type="text" name="emailregister" placeholder="email" class="form control" value="<%= infouser emailregister %>"> 22 \</div> 23 \<div class="form group"> 24 \<input type="password" name="passwordregister" placeholder="password" class="form control" value="<%= infouser passwordregister %>"> 25 \</div> 26 <% if (registermessage != 'undefined' ? registermessage '' ) { %> 27 \<div class="alert alert <%= typestatus %>" role="alert"> 28 \<p><%= registermessage %>\</p> 29 \</div> 30 <% } %> 31 \<div class="form group"> 32 \<button class="btn login btn"> 33 register 34 \</button> 35 \</div> 36 \</form> 37 \</div> 38 \</div> 39 \</div> 40 \<div class="col sm 6"> 41 \<div class="box settings box login"> 42 \<div class="wrap login100"> 43 \<form class="validate form" method="post" action="/users/login"> 44 \<h2 class="title screen"> 45 access your account 46 \</h2> 47 \<div class="form group"> 48 \<input type="text" name="usernamelogin" placeholder="username" class="form control" value="<%= infouser usernamelogin %>"> 49 \</div> 50 51 \<div class="form group"> 52 \<input type="password" name="passwordlogin" placeholder="password" class="form control" value="<%= infouser passwordlogin %>"> 53 \</div> 54 <% if (loginmessage != 'undefined' ? loginmessage '' ) { %> 55 \<div class="alert alert <%= typestatus %>" role="alert"> 56 \<p><%= loginmessage %>\</p> 57 \</div> 58 <% } %> 59 \<div class="form group"> 60 \<button class="btn login btn"> 61 login 62 \</button> 63 \</div> 64 65 \<div class="text forgot"> 66 \<a href="/users/forgot password"> 67 forgot password? click here to retrive your access! 68 \</a> 69 \</div> 70 \</form> 71 \</div> 72 \</div> 73 \</div> 74 \</div> 75 \</div> 76 \</section> 77 \</body> 78 \</html> reset password ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm offset 3 col sm 6" align="center"> 11 \<div class="box settings box password"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/forgot password"> 14 \<h2 class="title screen"> 15 retrieve your access 16 \</h2> 17 \<p>insert your email address\</p> 18 \<div class="form group"> 19 \<input type="text" name="email" placeholder="email" class="form control" value="<%= infouser email %>"> 20 \</div> 21 <% if (resetpass != 'undefined' ? resetpass '' ) { %> 22 \<div class="alert alert <%= typestatus %>" role="alert"> 23 \<p><%= resetpass %>\</p> 24 \</div> 25 <% } %> 26 \<div class="form group"> 27 \<button class="btn login btn"> 28 reset password 29 \</button> 30 \</div> 31 \</form> 32 \</div> 33 \</div> 34 \</div> 35 \</div> 36 \</div> 37 \</section> 38 \</body> 39 \</html> 4 뷰를 렌더링할 경로 만들기 이제 이전에 생성된 뷰를 렌더링하기 위해 라우트를 구성해야 합니다 라우트는 express https //expressjs com/ 를 사용하여 구축됩니다 1 // index 2 app get('/', (req, res) => { 3 res render('index', {loginmessage '', registermessage '', typestatus '', infouser ''}); 4 }); 5 // request password 6 app get('/users/forgot password', (req, res) => { 7 res render('reset password', { resetpass '', typestatus '', infouser ''}); 8 }); 힌트 보시다시피, 우리는 페이지에 경고를 표시하는 데 사용될 매개변수로 변수를 구성하고 있습니다 5 정보를 데이터베이스에 저장하기 위한 경로 생성하기 우리는 parse server 자바스크립트 가이드 https //docs parseplatform org/js/guide/ 를 참조하여 등록, 로그인 및 비밀번호 요청 기능을 개발할 것입니다 1 // request the log in passing the email and password 2 app post('/users/login', async(req, res) => { 3 let infouser = req body; 4 5 try{ 6 let user = await parse user login(infouser usernamelogin, infouser passwordlogin) 7 res render('index', { loginmessage "user logged!", registermessage '', typestatus "success", infouser infouser }); 8 } catch (error){ 9 res render('index', { loginmessage error message, registermessage '', typestatus "danger", infouser infouser}); 10 } 11 }); 12 13 // register the user passing the username, password and email 14 app post('/users/register', async(req, res) => { 15 let infouser = req body; 16 let user = new parse user(); 17 18 user set("username", infouser usernameregister); 19 user set("password", infouser passwordregister); 20 user set("email", infouser emailregister); 21 22 try{ 23 await user signup(); 24 res render('index', { loginmessage '', registermessage "user created!", typestatus "success", infouser infouser}); 25 } catch (error) { 26 res render('index', { loginmessage '', registermessage error message, typestatus "danger", infouser infouser}); 27 } 28 }); 29 30 // request the password reset passing the email 31 app post('/users/forgot password', function(req, res) { 32 let infouser = req body; 33 try{ 34 await parse user requestpasswordreset(infouser email); 35 res render('reset password', { resetpass "check your email!", typestatus "success", infouser infouser}); 36 } catch (e){ 37 res render('reset password', { resetpass error message, typestatus "danger", infouser infouser}); 38 } 39 }); 6 거의 다 왔습니다! 공개 폴더의 정적 파일 아직 끝나지 않았습니다! 공개 폴더에 css 및 이미지와 같은 정적 파일을 삽입하여 뷰에서 이를 요구할 수 있습니다 ) css 및 이미지를 추가하면 생성한 웹사이트에 다양한 스타일시트를 제공할 수 있습니다! 7 완료되었습니다! 이 시점까지 클라우드 코드를 사용하여 node js 애플리케이션을 만드는 방법을 훌륭하게 배웠습니다 다음 링크를 클릭하여 이 링크 를 통해 언제든지 back4app에서 전체 프로젝트에 접근하세요 위에서 설명한 단계에 따라 node js 애플리케이션을 사용할 때 웹 호스팅 작업을 수행할 수 있습니다!