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

フルスタックwebアプリケーションの作成とホスティング はじめに フルスタックアプリケーションの立ち上げは daunting です。フロントエンドのホスティング、サーバーの設定/プロビジョニング、すべてを結びつけることを心配しなければなりません。あなたは知らなかったかもしれませんが、back4appは上記のすべてに最適なインフラストラクチャを提供します。 back4appのwebホスティングを使用すれば、フロントエンドhtml（reactやvueなどのフロントエンドフレームワークを含む）を簡単に提供できます。cloud codeは迅速に立ち上がる優れたバックエンドを提供します。このガイドでは、back4app上で完全な、とはいえ基本的なwebアプリケーションを構築します。 これは、 ジョン・コンシダイン https //github com/considine によって書かれたゲストチュートリアルです。彼は、 k optional https //koptional com/ のリード開発者です。 目標 back4app上でフルスタックwebアプリケーションを立ち上げる 前提条件 このチュートリアルを完了するには、次のものが必要です コマンドラインに慣れていること git と npm がインストールされていること back4appアカウントを持ち、cliツールがインストールされ、設定されていること。詳細については、 こちらを参照してください back4appダッシュボードで新しいプロジェクトを作成すること 詳細については、 こちらを参照してください このチュートリアルはparse serverバージョン3 1 xに設定する必要があります。詳細については、直接下を参照してください このプロジェクトは新しくリリースされたバージョン3 1のparse serverを使用します。これは、back4appプロジェクトがこのリリースに設定されていることを確認する必要があることを意味します そうでないと動作しません。プロジェクトダッシュボードで、サーバー設定 » parse serverを管理（設定）に移動し、3 1 1を選択してください（ベータ版である可能性があります）。 parse server 3 1 xへの移行に関する詳細情報については、 このガイド を参照してください。 このプロジェクトのクラウドコードの構文が理解できない場合は、このガイドを参照してください。 プロジェクトの背景 私たちは基本的なチケット交換アプリケーションを立ち上げます。これにより、ユーザーはサインアップ、ログインし、販売しているチケットを異なるイベントに投稿できます これは管理者がダッシュボードを使用して作成できます。他のユーザーは、ポスターが表示することを選択したメールアドレスまたは電話番号で彼らに連絡できます。 私はアプリを立ち上げました こちら http //ticketlister koptional com/ , このガイドで探求するのと同じコードを使用しています。アカウントを作成し、チケットを投稿し、アプリがどのように見えるかを確認することができます。 このチュートリアルの目的は、アプリを効率的に立ち上げる方法を示すことです。したがって、各行のコードにこだわるのではなく、ほぼ完成したコードベースから始め、展開の容易さに焦点を当てます。コードを編集する必要があるのは1箇所だけです ステップ1では、プロジェクト設定（アプリケーションid、javascriptキー、サーバーurl）を追加する必要があります。 ただし、このアプリケーションを好きなように編集したり拡張したりすることは歓迎します。 プロジェクト構造 コードの準備を始める前に、このプロジェクトのファイル構造を理解することが重要です。このガイド全体でこれを参照として使用します。すべてが完了したときのディレクトリは次のようになります このセットアップからの主なポイントは次のとおりです フロントエンドコードは 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による初期化 コマンドラインで実行します プロンプトが表示されるはずです 既存のために「e」を選択します。次に、リストから作成したアプリケーションを選択します。 次に、コードがインストールされるディレクトリの名前を尋ねられます。特に希望がなければ「enter」を押すだけで大丈夫です。このプロジェクトのために、ディレクトリは「ticketlister」と呼ばれると仮定します。最後に、尋ねられたとき ただ「enter」を押してください（空白は押さないでください）。このコマンドが戻ったら、新しいディレクトリにcdできます。「cloud」と「public」という2つのディレクトリが表示されるはずです。 出力全体は次のようになります アプリをプロジェクトファイルと同期中 クラウドとパブリックフォルダに加えて、ディレクトリには2つのファイルがあります parse local parse project これらはback4appプロジェクトに関連するデータを保持しています。それ以外のすべては、 リポジトリ https //github com/back4app/back4app ticketlister からの既存のプロジェクトファイルで上書きする必要があります。以下は、これを行う最も簡単な方法です すべてがうまくいけば、次のファイルが設定されているはずです 心配しないでください それが難しい部分でした！今はプロジェクトに集中できます。 2 フロントエンド 念のために言うと、このアプリのフロントエンドコードは public ディレクトリにあります。比較的シンプルに保つために、react、angular、またはvueのようなフロントエンドフレームワークを使用しないことにしました。この方法では、外部依存関係やビルドがありません。 プロジェクトはhtml5 webコンポーネントを使用しています。これらはブラウザでネイティブにサポートされています。これにより、ユーザーインターフェースの異なる部分の機能をカプセル化するのに役立ちます。開発者は新しいhtml要素を宣言することができます（‘\<p>’を考えてみてください）。さもなければ、ただの古いjavascriptを使用します。 その中に public/js ディレクトリには4つのjavascriptファイルがあります 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フィートの視点を提供するために少し時間を取りたいと思います。 このプロジェクトは html5 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 に関する詳細は、 ドキュメント を参照してください。 さらに、これらの cloud functions は parse server 上で実行されます。この ガイド では使用される構文のいくつかについて説明しているので、目を通すと役立つかもしれません。 より具体的には、私たちが定義する関数は次のとおりです ‘ 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にデプロイできます。次のコマンドは、すべての公開およびクラウドファイルをアップロードします ローカルウェブサイトホスティング アップロードしたウェブアプリを表示するための公開ドメインを取得するには、back4appダッシュボードからwebホスティングをオンにする必要があります。 まず、ダッシュボードの左側にある「サーバー設定」を開きます 次に、「webホスティングとライブクエリ」の下にある「設定」リンクをクリックします。 最後に、「back4appホスティングを有効にする」をチェックします。ユニークなサブドメインを選択する必要があります。このプロジェクトのためにticketlisterをすでに取得しているので、別のものを選んでください。オプションで、所有しているドメインをこのback4appドメインに「ポイント」するように設定できます。私はこれを行いました。 http //ticketlister koptional com 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を活用して、はるかに迅速に立ち上げました。このアプローチを使用することで、時間を無駄にすることなく素晴らしいものを構築できます。