Back4AppでのフルスタックWebアプリ開発とホスティングガイド

フルスタックwebアプリケーションの作成とホスティング はじめに フルスタックアプリケーションの立ち上げは daunting です。フロントエンドのホスティング、サーバーの設定/プロビジョニング、すべてを結びつけることを心配しなければなりません。あなたは知らなかったかもしれませんが、back4appは上記のすべてに最適なインフラストラクチャを提供します。 back4appのwebホスティングを使用すれば、フロントエンドhtml（reactやvueなどのフロントエンドフレームワークを含む）を簡単に提供できます。cloud codeは迅速に立ち上がる優れたバックエンドを提供します。このガイドでは、back4app上で完全な、とはいえ基本的なwebアプリケーションを構築します。 これは、 https //github com/considine によって書かれたゲストチュートリアルです。彼は、 https //koptional com/ のリード開発者です。 目標 back4app上でフルスタックwebアプリケーションを立ち上げる 前提条件 このチュートリアルを完了するには、次のものが必要です コマンドラインに慣れていること https //git scm com/book/en/v2/getting started installing git と https //docs npmjs com/getting started がインストールされていること back4appアカウントを持ち、cliツールがインストールされ、設定されていること。詳細については、 https //blog back4app com/cli parse server/ back4appダッシュボードで新しいプロジェクトを作成すること 詳細については、 https //www back4app com/docs/get started/new parse app このチュートリアルはparse serverバージョン3 1 xに設定する必要があります。詳細については、直接下を参照してください このプロジェクトは新しくリリースされたバージョン3 1のparse serverを使用します。これは、back4appプロジェクトがこのリリースに設定されていることを確認する必要があることを意味します そうでないと動作しません。プロジェクトダッシュボードで、サーバー設定 » parse serverを管理（設定）に移動し、3 1 1を選択してください（ベータ版である可能性があります）。 parse server 3 1 xへの移行に関する詳細情報については、 https //www back4app com/docs/advanced guides/parse server 3 を参照してください。 このプロジェクトのクラウドコードの構文が理解できない場合は、このガイドを参照してください。 プロジェクトの背景 私たちは基本的なチケット交換アプリケーションを立ち上げます。これにより、ユーザーはサインアップ、ログインし、販売しているチケットを異なるイベントに投稿できます これは管理者がダッシュボードを使用して作成できます。他のユーザーは、ポスターが表示することを選択したメールアドレスまたは電話番号で彼らに連絡できます。 私はアプリを立ち上げました http //ticketlister koptional com/ , このガイドで探求するのと同じコードを使用しています。アカウントを作成し、チケットを投稿し、アプリがどのように見えるかを確認することができます。 このチュートリアルの目的は、アプリを効率的に立ち上げる方法を示すことです。したがって、各行のコードにこだわるのではなく、ほぼ完成したコードベースから始め、展開の容易さに焦点を当てます。コードを編集する必要があるのは1箇所だけです ステップ1では、プロジェクト設定（アプリケーションid、javascriptキー、サーバーurl）を追加する必要があります。 ただし、このアプリケーションを好きなように編集したり拡張したりすることは歓迎します。 プロジェクト構造 コードの準備を始める前に、このプロジェクトのファイル構造を理解することが重要です。このガイド全体でこれを参照として使用します。すべてが完了したときのディレクトリは次のようになります 1 project 2 │ parse local 3 │ parse project 4 │ gitignore 5 │ readme md 6 └───public 7 │ │ index html 8 │ │ login html 9 │ │ signup html 10 │ └───css 11 │ │ signin css 12 │ │ bootstrap min css 13 │ └───js 14 │ │ main js 15 │ │ parse js 16 │ │ signin js 17 │ │ signup js 18 │ 19 └───cloud 20 │ main js このセットアップからの主なポイントは次のとおりです フロントエンドコードは public ディレクトリにあります。フロントエンドは、エンドユーザーが対話するアプリケーションの部分です。 バックエンドコードは cloud ディレクトリにあります。バックエンドはアプリケーションの裏方の作業を行います。これには、データベースへの保存やデータの送信が含まれます。 フロントエンドはhttpリクエストを送信することでバックエンドに何をするかを指示します。私たちの場合、これはクラウドファンクションを実行することを意味します。 このセットアップのシンプルさにも注意してください。このアプリケーションの3つのページを表す3つのhtmlファイルがあります。私たちのバックエンド全体は1つのファイルです！ ステップ2では、フロントエンドコード、つまり公開ディレクトリを簡単に見ていきます。ステップ3ではバックエンドに移ります。 1 ファイルの準備 前述のように、 https //www back4app com/docs/advanced guides/web application hosting#prerequisites , back4appに新しいプロジェクトを作成し、 https //blog back4app com/2017/01/20/cli parse server/ コードを訪れる前に、ダウンロードして準備を整えておく必要があります。このステップでは、まさにそれを行います。このステップでは、コマンドラインでいくつかのコマンドを実行します。それぞれをコピーして実行するために提供します。このステップで混乱しても心配しないでください。これは、back4appアプリを私のgitプロジェクトに接続するために必要なプロセスです。何が起こっているのかを知ることは重要ではありません。 このステップでは私たちは cliを使用してback4appプロジェクトでローカルディレクトリを初期化する gitを使用してこのディレクトリにサンプルプロジェクトファイルをプルする back4appによる初期化 コマンドラインで実行します 1 b4a new プロンプトが表示されるはずです 1 新しいアプリを作成しますか、それとも既存のアプリにcloud codeを追加しますか？ 2 "(n)ew" または "(e)xisting" と入力してください 既存のために「e」を選択します。次に、リストから作成したアプリケーションを選択します。 次に、コードがインストールされるディレクトリの名前を尋ねられます。特に希望がなければ「enter」を押すだけで大丈夫です。このプロジェクトのために、ディレクトリは「ticketlister」と呼ばれると仮定します。最後に、尋ねられたとき 1 ディレクトリ名 2 空のプロジェクトを設定するか、現在デプロイされているcloud codeをダウンロードできます 3 空のプロジェクトを設定したい場合は「(b)lank」と入力してください。そうでなければenterを押してください ただ「enter」を押してください（空白は押さないでください）。このコマンドが戻ったら、新しいディレクトリにcdできます。「cloud」と「public」という2つのディレクトリが表示されるはずです。 出力全体は次のようになります 1 $ b4a new 2 新しいアプリを作成しますか、それとも既存のアプリにcloud codeを追加しますか？ 3 "(n)ew" または "(e)xisting" と入力してください e 4 1 ticketlister 5 設定に追加するアプリを選択してください 11 6 最新のデプロイされたcloud codeをダウンロードできるフォルダの名前を入力してください 7 アプリ "ticketlister" のための 8 9 ディレクトリ名 10 空のプロジェクトを設定するか、現在デプロイされているcloud codeをダウンロードできます 11 空のプロジェクトを設定したい場合は「(b)lank」と入力してください。そうでなければenterを押してください 12 現在のプロジェクトのメールが正常に設定されました "jackconsidine3\@gmail com" 13 cloud codeは/tmp/ticketlisterに作成されました。 14 15 これには「hello world」クラウド関数が含まれているので、デプロイしたら、 16 印刷されたcurlコマンドで動作するかテストできます。 17 18 次に、このコードをデプロイしたい場合は 19 20 cd /tmp/ticketlister 21 b4a deploy 22 23 デプロイが完了したら、次のコマンドを実行して動作をテストできます 24 curl x post \\ 25 h "x parse application id ivy4qajquajdhpqq2d3mcr4jlrcvdcvvh6yom1kk" \\ 26 h "x parse rest api key ylgphnent0jnzwy9byt6zcwhqmswryvcfsmqrvus" \\ 27 h "content type application/json" \\ 28 d "{}" \\ 29 https //parseapi back4app com/functions/hello 30 31 $ cd ticketlister 32 $ ls 33 cloud public アプリをプロジェクトファイルと同期中 クラウドとパブリックフォルダに加えて、ディレクトリには2つのファイルがあります parse local parse project これらはback4appプロジェクトに関連するデータを保持しています。それ以外のすべては、 https //github com/back4app/back4app ticketlister からの既存のプロジェクトファイルで上書きする必要があります。以下は、これを行う最も簡単な方法です 1 cd ticketlister 2 git init 3 git remote add origin https //github com/back4app/back4app ticketlister 4 git fetch origin 5 git checkout force b master track origin/master すべてがうまくいけば、次のファイルが設定されているはずです $ ls r readme md cloud index js package lock json package json public /cloud main js /public css index html js login html signup html /public/css bootstrap min css signin css /public/js main js parse js signin js signup js 心配しないでください それが難しい部分でした！今はプロジェクトに集中できます。 2 フロントエンド 念のために言うと、このアプリのフロントエンドコードは public ディレクトリにあります。比較的シンプルに保つために、react、angular、またはvueのようなフロントエンドフレームワークを使用しないことにしました。この方法では、外部依存関係やビルドがありません。 プロジェクトはhtml5 webコンポーネントを使用しています。これらはブラウザでネイティブにサポートされています。これにより、ユーザーインターフェースの異なる部分の機能をカプセル化するのに役立ちます。開発者は新しいhtml要素を宣言することができます（‘\<p>’を考えてみてください）。さもなければ、ただの古いjavascriptを使用します。 その中に public/js ディレクトリには4つのjavascriptファイルがあります $ ls public/js \# main js parse js signin js signup js main js はメインページによって読み込まれるコードです、 index html 。このページはユーザーがチケットをリストする場所です。 signup js はサインアップページによって読み込まれるコードです、 signup html signin js はサインインページによって読み込まれるコードです、 login html parse js はすべてのページで使用されるシンプルなファイルです。バックエンドへの接続を作成します。これが唯一編集する必要があるファイルで、これを行わないとプロジェクトは機能しません！ back4appの資格情報を追加する まず、あなたの application id と javascript key をback4appプロジェクトから取得する必要があります。back4appにログインした後、プロジェクトを選択します。次に、左側の app settings をクリックし、 security & keys を選択します。 いくつかのキーが表示されるはずです。 application id と javascript key を取得しておきましょう。 最後に、 public/js/parse js を開き、各文字列を適切な場所に配置します。serverurlが https //parseapi back4app com であることを確認してください。 1 // part 1 put your app id, js key, and server url 2 parse initialize( 3 '', // your app id 4 '' // your javascript key 5 ); 6 // your server url 7 parse serverurl = 'https //parseapi back4app com'; アプリケーションは現在、サーバーと通信できます！ コードの浅いダイブ。 このプロジェクトのすべてのコードはこのガイドの範囲外ですが、各ファイルをブラウズすることをお勧めします。何も複雑ではなく、1,000フィートの視点を提供するために少し時間を取りたいと思います。 このプロジェクトは https //developer mozilla org/en us/docs/web/api/web components を使用して、インターフェースの各論理セクションをカプセル化します。 htmlファイルの重要なマークアップは、 html \<template> html \<template> タグ内にあります。これがレイアウトを説明する方法です。 アプリケーションの「機能」はjavascriptファイル内で発生します。ここで、フォームが送信されたときやボタンがクリックされたときに何をするかをアプリが説明します。 例えば、ログインコンポーネントを見てみましょう。マークアップ ( public/login html ) は次のようになります 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 そして、機能はjavascriptファイルに現れます ( public/signin js ) 1 // code above ^ 2 // when the code is ready, listen for the form to be submitted when it is, 3 // call the 'onsubmit' method 4 connectedcallback() { 5 const form = this shadowroot queryselector('form'); 6 form addeventlistener('submit', this onsubmit bind(this), false); 7 } 8 // obtain the email and password from the markup inputs 9 onsubmit(e) { 10 e preventdefault(); 11 // get inputs 12 const email = this shadowroot queryselector('#inputemail') value; 13 const password = this shadowroot queryselector('#inputpassword') value; 14 this login(email, password); 15 } 16 // send a request to the backend, attempting to login if the login 17 // is successful, go to the index html page otherwise, give the user 18 // an alert explaining what went wrong 19 login(email, password) { 20 // add login method here 21 parse user login(email, password) 22 then(user => { 23 window\ location href = 'index html'; 24 }) 25 catch(e => { 26 alert(e message); 27 }); 28 } 29 // more code below 30 アプリケーション全体はこの一般的な構造を持っています。フロントエンドがバックエンドとこのように話す時に注意してください ( public/js/main js ) 次のステップでは、これらの関数がどのように宣言されているかを見ていきます。 3 バックエンド バックエンド全体は cloud/main js , クラウドコード関数ファイルに存在します。非常に控えめな量のコードで構成されており、back4appでこれほど少ないものでどれだけのことができるかを証明しています。 アプリの一部（チケットがリストできるイベントの作成）は、単にback4appダッシュボードを使用します。この素晴らしい機能は私たちのプロジェクトに付属しているので、車輪を再発明する必要はありません！ 再度、各行のコードを詳しく調べることは私たちの範囲外です。しかし、コードがどのように機能するかをもう一度広く見ていきます。 あなたは cloud functions を cloud/main js ファイルで宣言します。これらの関数はフロントエンドから呼び出すことができます（参照 ステップ 2 )。cloud functions に関する詳細は、 https //docs parseplatform org/cloudcode/guide/#cloud functions を参照してください。 さらに、これらの cloud functions は parse server 上で実行されます。この https //www back4app com/docs/advanced guides/parse server 3 では使用される構文のいくつかについて説明しているので、目を通すと役立つかもしれません。 より具体的には、私たちが定義する関数は次のとおりです ‘ user\ signup ’ ユーザーサインアップフローを処理するためのコード ‘ tickets\ list ’ すべてのリストされたチケットを取得するためのコード ‘ tickets\ create ’ 新しいチケットを作成するためのコード ‘ events\ list ’ すべてのイベントをリストするためのコード そして最後のコードノート：ファイルの上部にシンプルなメソッドを追加しました 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; 特定のクラウドファンクションは、ユーザーがログインしている必要があります。この関数をリクエストのユーザー属性で呼び出すことで、誰も不正なリクエストを行えないことを保証します。 残りの関数をざっと見て、どのように機能するかを確認することを強くお勧めします。彼らが何をするかを知ったので、デプロイできます！ 4 デプロイ すべてのコードを整理し、アプリをback4appにデプロイできます。次のコマンドは、すべての公開およびクラウドファイルをアップロードします b4a deploy ローカルウェブサイトホスティング アップロードしたウェブアプリを表示するための公開ドメインを取得するには、back4appダッシュボードからwebホスティングをオンにする必要があります。 まず、ダッシュボードの左側にある「サーバー設定」を開きます 次に、「webホスティングとライブクエリ」の下にある「設定」リンクをクリックします。 最後に、「back4appホスティングを有効にする」をチェックします。ユニークなサブドメインを選択する必要があります。このプロジェクトのためにticketlisterをすでに取得しているので、別のものを選んでください。オプションで、所有しているドメインをこのback4appドメインに「ポイント」するように設定できます。私はこれを行いました。 https //www back4app com/docs/advanced guides/my%20website そして、私の設定は次のようになります ウェブサイトから立ち上げる予定がある場合は、「カスタムドメイン」の下のテキストに注意してください。 このステップを正しく完了すれば、ドメインにアクセスしてアプリを使用できます。カスタムドメインがない場合は、http //\<your subdomain> back4app ioを開いてください。your subdomainは、あなたが選択した名前です。 5 使用とダッシュボード チケットをリストするには、back4appの管理ダッシュボードからイベントを作成する必要があります。 データブラウザに移動し、「イベント」クラスを作成します。列「name」（文字列）と「when」（日付）を追加します。次に、直接イベントを追加できます。すべての列を記入することを忘れないでください。次のようになります 今、あなたのウェブアプリで、ログインしてそのイベントのチケットをリストできます。 parse / back4appに付属するこの管理機能は、あなたの作業負担を軽減する別のショートカットです。 結論 バックエンドを持つウェブアプリケーションを作成することは、通常、数週間または数ヶ月かかります。私たちは、back4appの強力なインフラストラクチャとparse sdkを活用して、はるかに迅速に立ち上げました。このアプローチを使用することで、時間を無駄にすることなく素晴らしいものを構築できます。