フロントエンドとバックエンドの分離に関するチュートリアルの例

原点

会社の開発者とプロジェクトの数が増加するにつれて、フロントエンドとバックエンドの通信コストは増加し続けています。元のプロジェクトではフロントエンドとバックエンドが分離されていなかったため、フロントエンドとして、PHP などのバックエンド言語の理解も必要となり、フロントエンドの学習コストが大幅に増加しました。特にデータベースエラーが発生し、その原因がわからない場合には、解決に多くの時間がかかります。したがって、現在のビジネス ニーズに基づいて、いくつかの新しいプロジェクトからフロント エンドとバック エンドを分離する試みを開始しました。

目標

1) コードの分離。フロントエンドとバックエンドのコードは、独立したプロジェクト ディレクトリを使用して分離されます。フロントエンドの開発環境では、すべてのプロジェクト コードが Git を使用して管理されます。

2) 開発プロセスの改善。開発プロセスは、ローカル [ローカル開発]、開発 [フロントエンドとバックエンドの共同デバッグ]、ベータ [QA テスト]、および本番 [オンライン リリース] に分かれます。

ツール

Nodejs

Webpack

コマンドパッド

ホストプロファイル

Git

Sftp

方法論

1) 要件を決定し、インターフェイスを設計します。

開発プロセス全体において、要件と設計が決定された後、フロントエンドとバックエンドは最初にインターフェイスを設計し、対応するインターフェイスのパラメーターと返されるデータのJSON構造を決定し、その後独立して開発する必要があります。

2) ローカル開発

ローカル開発環境は、Grunt、Gulp、Webpack を使用して構築できます。Webpack はモジュール化をサポートし、React や VUE などの開発をサポートしているため、通常は Webpack を使用して実装します。比較的良く、コミュニティも比較的人気があり、問題は比較的早く解決されます。 Webpack と Webpack-dev-server を使用すると、コードのホット ロードとリフレッシュをサポートするローカル サービスを迅速に構築できます。もちろん、Express を使用して簡単なサービスを構築することもできます。

現時点では、通常、一般的に使用される npm start や npm run dist などのコマンド ラインを管理するためにコマンド パッドを使用します。これは便利で高速です。

画像リソースは統合ディレクトリで管理され、事前にQiniuにデプロイされます。

ローカル開発では、モックデータメソッドを使用してインターフェイスをシミュレートし、ページロジックを開発します。 jquery が存在する一部のプロジェクトでは、モック ツールとして jquery.mockjax.js を使用します。通常、API ディレクトリはすべてのインターフェイス データを集中管理するために作成され、index.js を通じて均一にロードおよびブロックされます。

3) フロントエンドとバックエンドの共同デバッグ

フロントエンドとバックエンドが分離された後、フロントエンドとバックエンドのデータの共同デバッグは非常に簡単かつ効率的になります。コードを DEV サーバーに個別にデプロイし、デバッグのために Chrome が提供する開発ツールを使用する必要があります。それだけです。デバッグ プロセス中に問題が発生した場合は、いつでも修正して送信できます。フロントエンドはバックエンドの開発環境に依存せず、DEV環境で問題が発生した場合でもバックエンドが適切な分業で対応します。特に Docker の導入後は、複数の DEV 開発環境を簡単に作成できるため、複数の同僚がプロジェクトを開発しても、お互いの DEV の共同デバッグに影響を与えることはありません。

コードを公開するときに、ローカルでコンパイルされたコードを DEV サーバーに直接プッシュするための Sublime Text プラグイン sftp を導入し、プロセス全体を非常に高速にしました。

4) QA テスト

QA テスト フェーズへの移行は、オンラインのような環境がテスト用に別途提供されることを除いて、共同デバッグ フェーズとほぼ同じです。

5) オンライン公開

公開する前に、コードを圧縮してパッケージ化する必要があります。これも Webpack を使用して行われます。言及する価値があるのは、オンラインでバグが発生した場合、HostProfiles と nginx を使用して、デバッグのためにオンライン コードをローカルにマップする必要があるということです。 git のブランチ機能を使用して、処理用のホットフィックス ブランチを作成します。

これは、単純なフロントエンドとバックエンドの分離ソリューションです。もちろん、改善できる点はたくさんあります。たとえば、淘宝網のミッドウェイ プランでは、テンプレートのレンダリングとビジネス処理のために、nodejs の中間層が追加されます。

以上がフロントエンドとバックエンドの分離に関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。