JS Framework

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

12 分

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 ）、ファイルの最終構造がどのように機能するかを理解します。 1 back4appでサブドメイン名を有効にする webホスティング機能を有効にするには、以下のガイドに記載されている手順に従ってください webホスティングとライブクエリの有効化 2 ファイルを作成してアップロードするこのステップを始める前に、コマンドラインツールを使用することをお勧めします ( 前提条件を確認 https //www back4app com/docs/js framework/node web server#content prerequisites ) あなたのファイルを簡単にアップロードするために! まず、 app js app js と package json package json をクラウドディレクトリ内に作成してください! back4appにモジュールをインストールするターミナルのクラウドフォルダ内で、次のように書く必要があります次に、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 // アプリにボディパーサーを設定する 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 // routes jsファイルを要求する 13 14 require(' /routes'); 3 アプリのビューを作成するテンプレートアプリを作成するためのテンプレートejsファイルを提供しますので、いつでもあなたの側で変更できます。 ) unhandled content type ターミナルに戻る 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 javascript guide 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 完了しました！ここまでのところ、cloudコードを使用してnode jsアプリケーションを作成する方法を見事に学びました。クリックしてこのリンクにアクセスして、いつでもback4appの完全なプロジェクトにアクセスできます。上記の手順に従うことで、node jsアプリケーションを使用してwebホスティングで作業できるようになります！