백포앱에서 Node.js 앱 호스팅 설정 및 라우팅 가이드

13 분

Back4App 서버에 Node.JS 웹 애플리케이션 호스팅하기

소개

이 튜토리얼에서는 서브도메인을 설정하고 정적 페이지를 쉽게 호스팅하는 방법을 설명합니다. 이 단계별 가이드를 완료하면 Node JS 앱을 사용하여 사용자 등록 및 로그인을 할 수 있습니다.

전제 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

이 앱을 로컬에서 테스트하려면 로컬 환경에 Node JS를 설치해야 합니다. 다음을 따를 수 있습니다.
Back4App으로 생성된 앱.
- 확인해 보세요.
프로젝트와 함께 구성된 Back4App 명령줄.
- 다음 단계를 진행하세요.

우선, 우리의 새로운 간단한 애플리케이션에 대해 이야기해 봅시다!

Node JS를 사용한 웹 호스팅의 예를 설명하겠습니다!

사용자가 Back4App 대시보드에 포함된 간단한 로그인, 등록 및 비밀번호 요청을 구축해야 한다고 가정해 보겠습니다. 우리는 프로젝트에서 Bootstrap, 정적 파일(CSS 및 이미지) 및 Express를 사용할 수 있습니다.

여기에서 라이브 앱을 확인하세요: nodeapplication.back4app.io.

Back4App 플랫폼의 앱 코드 템플릿에서 이 전체 애플리케이션을 클론할 수 있습니다 여기.

먼저, 명령줄 인터페이스를 사용하여 설정을 완료하세요 (전제 조건 보기) 최종 파일 구조가 어떻게 작동하는지 이해하기 위해.

├── 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 (사전 요구 사항 보기)를 사용하는 것을 권장합니다!

먼저, app.js와 package.json 파일을 클라우드 디렉토리 안에 생성하세요!

터미널에서 클라우드 폴더 안에 다음을 입력해야 합니다:

$ touch package.json

이제 package.json 파일 안에 npm 모듈 ‘body-parser’를 삽입하세요:

1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }

문제 해결: 클라우드 폴더 안에서 npm install을 실행할 필요는 없습니다. Back4App 서버가 자동으로 설치할 것입니다.

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- 사용자가 비밀번호 재설정을 요청하는 데 사용할 것입니다.

힌트: 우리는 Bootstrap을 사용하여 뷰를 구성할 것입니다. 여기를 클릭하세요 더 많은 정보를 읽으려면.

각각의 뷰에 내용을 추가할 수 있습니다. 아래 템플릿을 사용하여 번거로움 없이 작업할 수 있습니다:

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">

4 - 뷰를 렌더링할 경로 만들기

이제 이전에 생성된 뷰를 렌더링하기 위해 라우트를 구성해야 합니다. 라우트는 Express를 사용하여 구축됩니다.

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 자바스크립트 가이드를 참조하여 등록, 로그인 및 비밀번호 요청 기능을 개발할 것입니다.

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 애플리케이션을 사용할 때 웹 호스팅 작업을 수행할 수 있습니다!