WebAppTemplate FARM

フルスタック Web アプリ テンプレート - FARM スタック

このリポジトリには、FARM ソリューション スタック上で実行されるフルスタック Web アプリケーション テンプレートが含まれています。これは次のことを意味します。

• F lask、バックエンドPython Web フレームワーク。
• mazon Web Servicesは、ソフトウェアをホストできるクラウド サービスです。
• React 、フロントエンドJavaScript Web フレームワーク。
• MySQL 、リレーショナル データベース管理システム。

ファームとは何ですか？

FARM スタックは、多かれ少なかれ LAMP スタックの拡張版であり、次のような注目すべき変更が加えられています。

• ミドルウェア フレームワークは明示的 (Flask)
• MEAN スタックと同様に、アプリケーション プレゼンテーション層 (React) が含まれています。
• ソフトウェアが動作する環境は、PaaS/IaaS クラウド コンピューティング サービス (AWS) に置き換えられます。
• どのオペレーティング システムを使用するかについては意見がありません

フラスコ

Flask は、Web UI と Web バックエンド/データベース間で通信できる Web API/ミドルウェアを作成するために使用されます。これは、フルスタック アプリケーションの各部分を結合するアプリケーション全体の中核です。

この特定のテンプレートは ORM を使用せず、代わりにpymysqlモジュールを使用することに注意してください。つまり、開発者は SQL クエリを作成する必要がありますが、データベース上で実行する必要があるクエリの複雑さを最大限に高めることができます。

アマゾン ウェブ サービス

AWS は、アプリケーションをホストできるクラウド サービスです。ソフトウェア スタック全体を次のサービスでホストできます。

• サーバーレスインフラストラクチャ上でアプリケーションをホストするためのAWS Lambda 。 Zappa 経由で Flask API をホストすることも選択できるため、運用環境へのデプロイメントが非常に簡単になります。
• データベースをホストするためのAWS RDS 。
• 画像やファイルなど、他のあらゆる種類のオブジェクトを保存するためのAWS S3 。

これは、開発者がすべてを 1 つのプラットフォーム上に維持し、DevOps / IT 作業を最小限に抑えることができることを意味します。

反応する

React は Web UI が動作するフレームワークです。 React アプリケーションは、NodeJS を使用して AWS Lambda 上で実行することもできます。

このテンプレートは JavaScript / JSX を使用しますが、TypeScript も同様に使用できます。

MySQL

MySQL は、Web バックエンドが使用するリレーショナル データベースです。これは、RDS サービスを通じて AWS でホストすることもできます。

ローカルで実行する方法

この Web アプリケーションを実行するには、次のことを行う必要があります。

1. db/のスキーマを使用してローカル MySQL インスタンスをセットアップします。
2. APIとUIのモジュールをインストールする
3. API と UI をローカルで実行する

データベースのセットアップ

MySQL インスタンスをセットアップするには、次の手順に従います。

1. MySQL データベース インスタンスを作成して接続します。これを行う最も一般的な方法は、MySQL Workbench または Linux コマンド ライン インターフェイスのmysqlを使用することです。
2. インスタンス内でsample.sqlを実行します。 SampleInventoryというスキーマを作成し、 Inventoryというテーブルを初期化します。

APIのセットアップ

Flask API のコードベースは、 api/ディレクトリにあります。

初回セットアップ (macOS)

1. そのディレクトリに移動した後、 virtualenv farm-stack使用して Python 仮想環境を作成します。
2. source farm-stack/bin/activateでアクティブ化します。
3. api/に移動し、 pip3 install -r requirements.txtを実行して、API に必要なすべての Python モジュールをインストールします。
4. api/ディレクトリにあるdbcreds.pyを開き、必要に応じてデータベースの資格情報を編集します。

APIの実行

1. 上から仮想環境をアクティブ化します。
2. python3 app.pyを実行して、 http://localhost:8080で API を実行します。

UIのセットアップ

React UI のコードベースはui/ディレクトリにあります。このテンプレートはパッケージマネージャーとしてyarnを使用します。開発者が新しいモジュールを追加するときに、 npmなどの他のパッケージ マネージャーを混在させないことが重要です。

このテンプレートには、 react-bootstrapなどのパッケージが含まれていないことに注意してください。

初回セットアップ (macOS)

1. yarn install実行して、必要な依存関係をすべてインストールします。

UIの実行

1. 開発モードで実行をyarn start実行します。
2. ブラウザでhttp://localhost:3000に移動します。