JS Framework
Back4Appサーバーでホスティング可能なNode.jsアプリ構築ガイド

12min
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でサブドメイン名を有効にする
Webホスティング機能を有効にするには、以下のガイドに記載されている手順に従ってください:
                                   Webホスティングとライブクエリの有効化﻿
2 - ファイルを作成してアップロードする
このステップを始める前に、コマンドラインツールを使用することをお勧めします (前提条件を確認) あなたのファイルを簡単にアップロードするために!
まず、app.js と package.json をクラウドディレクトリ内に作成してください!
ターミナルのクラウドフォルダ内で、次のように書く必要があります:
$ touch package.json
次に、package.jsonファイル内にnpmモジュール「body-parser」を挿入してください:
JSON
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
﻿
トラブルシューティング: クラウドフォルダ内で npm install を実行する必要はありません。Back4Appサーバーが自動的にインストールします
JS
1   // モジュールを要求する
2   var bodyParser = require("body-parser");
3
4   // ビューのディレクトリを設定する
5   app.set('views', __dirname + '/views');
6   app.set('view engine', 'ejs');
7
8   // アプリにボディパーサーを設定する
9   app.use(bodyParser.json());
10  app.use(bodyParser.urlencoded({extended: true})); 
11
12  // routes.jsファイルを要求する
13
14  require('./routes');
1   // モジュールを要求する
2   var bodyParser = require("body-parser");
3
4   // ビューのディレクトリを設定する
5   app.set('views', __dirname + '/views');
6   app.set('view engine', 'ejs');
7
8   // アプリにボディパーサーを設定する
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を使用してビューを構築します。こちらをクリックして、詳細を読むことができます。
それぞれのビューにコンテンツを追加できます。以下のテンプレートを使って、手間なく作業できます:
head.ejs
index.ejs
reset_password.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">
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 を使用して構築されます。
Node.js
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   });
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 Javascript Guideを参照して、登録、ログイン、パスワードのリクエストのための関数を開発します。
JS
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  });
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 - 完了しました！
ここまでのところ、Cloudコードを使用してNode JSアプリケーションを作成する方法を見事に学びました。
クリックして このリンク にアクセスして、いつでもBack4Appの完全なプロジェクトにアクセスできます。
上記の手順に従うことで、Node JSアプリケーションを使用してWebホスティングで作業できるようになります！
Angularプリビルドテンプレートでのプロジェクトセットアップ手順
Ionicアプリテンプレートで始める方法｜開発者向けガイド