--- title: 백포앱에서 Node.js 앱 호스팅 설정 및 라우팅 가이드 slug: docs-kr/js-framework/node-web-server description: 백포앱에서 Node.js 웹 앱 설정, 라우팅 및 데이터베이스 연결 방법 안내. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-07T13:31:50.743Z --- # Back4App 서버에 Node.JS 웹 애플리케이션 호스팅하기 ## 소개 이 튜토리얼에서는 서브도메인을 설정하고 정적 페이지를 쉽게 호스팅하는 방법을 설명합니다. 이 단계별 가이드를 완료하면 Node JS 앱을 사용하여 사용자 등록 및 로그인을 할 수 있습니다. ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - 이 앱을 로컬에서 테스트하려면 로컬 환경에 Node JS를 설치해야 합니다. 다음을 따를 수 있습니다. - Back4App으로 생성된 앱. - 확인해 보세요. - 프로젝트와 함께 구성된 Back4App 명령줄. - 다음 단계를 진행하세요. ::: ## 우선, 우리의 새로운 간단한 애플리케이션에 대해 이야기해 봅시다! Node JS를 사용한 웹 호스팅의 예를 설명하겠습니다! 사용자가 Back4App 대시보드에 포함된 간단한 로그인, 등록 및 비밀번호 요청을 구축해야 한다고 가정해 보겠습니다. 우리는 프로젝트에서 Bootstrap, 정적 파일(CSS 및 이미지) 및 Express를 사용할 수 있습니다. 여기에서 라이브 앱을 확인하세요: [nodeapplication.back4app.io](https://nodeapplication.back4app.io/). :::hint{type="info"} Back4App 플랫폼의 앱 코드 템플릿에서 이 전체 애플리케이션을 클론할 수 있습니다 [여기](https://www.back4app.com/database/back4app/node-app-template). ::: 먼저, 명령줄 인터페이스를 사용하여 설정을 완료하세요 ([전제 조건 보기](https://www.back4app.com/docs/js-framework/node-web-server#content-prerequisites)) 최종 파일 구조가 어떻게 작동하는지 이해하기 위해. :::BlockQuote ├── NodeJSWebApp/ │ ├── cloud/ │ │ ├── app.js │ │ ├── routes.js │ │ ├── package.json │ │ ├── views/ │ │ │ ├── head.ejs │ │ │ ├── index.ejs │ │ │ ├── reset\_password.ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style.css ::: ## 1 - Back4app에서 서브도메인 이름 활성화하기 웹 호스팅 기능을 활성화하려면 아래 가이드의 단계를 따르세요: [웹 호스팅 및 실시간 쿼리 활성화하기](https://www.back4app.com/docs/platform/parse-web-hosting) ## 2 - 파일 생성 및 업로드 이 단계에 착수하기 전에, 파일을 쉽게 업로드할 수 있도록 Command Line Tool ([사전 요구 사항 보기](https://www.back4app.com/docs/js-framework/node-web-server#content-prerequisites))를 사용하는 것을 권장합니다! 먼저, `app.js`와 `package.json` 파일을 클라우드 디렉토리 안에 생성하세요! ::::ExpandableHeading **Back4App에 모듈 설치하기** 터미널에서 클라우드 폴더 안에 다음을 입력해야 합니다: :::BlockQuote $ touch package.json ::: 이제 package.json 파일 안에 npm 모듈 ‘body-parser’를 삽입하세요: ```json 1 { 2 "dependencies": { 3 "body-parser": "*" 4 } 5 } ``` :::hint{type="danger"} **문제 해결: **클라우드 폴더 안에서 `npm install`을 실행할 필요는 없습니다. Back4App 서버가 자동으로 설치할 것입니다. ::: :::: :::ExpandableHeading **app.js** ```javascript 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`- HTML 구조의 head에 내용을 추가하는 데 사용할 것입니다. - `index.ejs`- 사용자 등록 및 로그인을 위해 사용할 것입니다. - `reset_password.ejs`- 사용자가 비밀번호 재설정을 요청하는 데 사용할 것입니다. :::hint{type="warning"} **힌트: **우리는 Bootstrap을 사용하여 뷰를 구성할 것입니다. [여기를 클릭하세요](https://getbootstrap.com/) 더 많은 정보를 읽으려면. ::: 각각의 뷰에 내용을 추가할 수 있습니다. 아래 템플릿을 사용하여 번거로움 없이 작업할 수 있습니다: :::CodeblockTabs head.ejs ```nodejs 1 Back4App - Node JS Application 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ``` index.ejs ```nodejs 1 2 3 4 <% include head.ejs %> 5 6 7 77 78 ``` reset\_password.ejs ```nodejs 1 2 3 4 <% include head.ejs %> 5 6 7 38 39 ``` ::: ## 4 - 뷰를 렌더링할 경로 만들기 이제 이전에 생성된 뷰를 렌더링하기 위해 라우트를 구성해야 합니다. 라우트는 [Express](https://expressjs.com/)를 사용하여 구축됩니다. ```nodejs 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 }); ``` :::hint{type="warning"} **힌트: **보시다시피, 우리는 페이지에 경고를 표시하는 데 사용될 매개변수로 변수를 구성하고 있습니다. ::: ## 5 - 정보를 데이터베이스에 저장하기 위한 경로 생성하기 우리는 [Parse Server 자바스크립트 가이드](https://docs.parseplatform.org/js/guide/)를 참조하여 등록, 로그인 및 비밀번호 요청 기능을 개발할 것입니다. ```javascript 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 애플리케이션을 만드는 방법을 훌륭하게 배웠습니다. :::hint{type="info"} 다음 링크를 클릭하여 [이 링크](https://nodeapplication.back4app.io/)를 통해 언제든지 Back4App에서 전체 프로젝트에 접근하세요. ::: 위에서 설명한 단계에 따라 Node JS 애플리케이션을 사용할 때 웹 호스팅 작업을 수행할 수 있습니다!