Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始める

この記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、選択、実行、起動という3つのノードを主に記録します。

プロジェクトの選択

React のスキャフォールディングの初期化では、コミュニティでより人気があるのは cra (create-react-app) と umi です。以下の点を比較した後、最終的にプロジェクトにより適した umi を選択しました。

1. 箱から出してすぐに使える使いやすさ。 Umi は組み込み機能が豊富ですが、制約も多くあります。例えば、プロジェクト構造の要件や独自のエコシステム用のプラグインには学習コストがかかります。Cra の初期化はテンプレートを選択して起動するだけなので、追加の学習コストはかかりません (Vue プレイヤーが来ても負担はありません)。
2. スケーラビリティ、Webpack 構成の変更。 cra は完全に露出して自分で制御する eject (不可逆な操作) を提供するため、最初にシンプルな構成を求めるという当初の意図が失われます。また、ここに示すように react-app-rewired と customize-cra を使用することもできます。 umi が webpack 設定を変更する必要がある場合、(webpack-chain に基づいて) ファイルを直接書き込むことができ、実行中の構成も提供します。
3. エコシステム、umi は Alibaba のオープンソースであり、人気の antd や qiankun など、オープンソースに関連する多くのプラグインが含まれています。公式 Web サイトには多くの実用的なガイダンスが提供されており、中国語のドキュメントになっています (一部の人はこれを好む)。CRA は簡潔で、スキャフォールディング作業のみを担当します (内部実装を理解しやすく、問題をすばやく特定して解決できます)。

最終的に、プロジェクトを迅速に構築する必要があり、多くの成熟したプラグインのサポートが必要であることを考慮して、umi が採用されました。 antdはとても良いです！ ！ ！ @umijs/plugin-model、このプラグインをお勧めします。内部のプラクティスを理解すれば、基本的にデータ管理をマスターできます。

ランタイム

Umi は、ランタイムの機能を拡張できるランタイム構成ファイルである app.ts を提供します。簡単に言えば、ページをレンダリングするためのすべての事前操作をここに配置できます。この概念は次のように分類できる。

storybook (preview.js) と比較すると、自分で実装したい場合は、対応する HTML にスクリプトを挿入することができます。ここにはプロジェクト関連のコンテンツがいくつか含まれます。プロジェクトは既存のプロジェクトに埋め込む必要があるため、iframe アプローチを採用します。必然的に、コミュニケーションと iframe サイズの調整が必要になります。

iframe 通信の場合、ドメインが異なるため、window.postmessage が使用されます。データの可読性を維持するために、後のメンテナンスの難易度が増すことを避けるために、対応するイベント送信コンテンツを定義することをお勧めします。頻繁な通信が必要な場合は、マイクロフロントエンドソリューションを採用することをお勧めします。

iframe の適応については、iframe-resizer プラグインが解決に役立ちます。埋め込みと埋め込みの両方をインストールする必要があることに注意してください。そうしないと、通信と適応ができなくなります。ここで問題があります。ページが埋め込まれている場合、bodyノードを内部から展開することはできないため、iframe-resizerが提供するカスタム計算方法を使用して、子ページに該当する方法を提供する必要があります。コードは次のとおりです。

サブシステム

'iframe-resizer/js/iframeResizer.contentWindow.js' をインポートします。
// 埋め込まれている場合は、実行時にリスナーを開きます const iframeInit = () => {
 if (親 !== ウィンドウ) {
  (ウィンドウは任意)iFrameResizer = {
   高さ計算方法: () => {
    document.body.children[0].clientHeightを返します。
   },
  };
  window.onmessage = (イベント: 任意) => {
   Array.isArray(event.data) の場合 {
    if (event.data[0] === 'イベント名') {
     console.log(event.data[1]) // イベントパラメータ}
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

ライブ配信

梱包作業を経て、ようやく発売されます。ここでは主に、リクエストを転送するように nginx を構成する方法について説明します。

開発中に、複数の異なるドメインへのインターフェースが必要な場合、フロントエンドの最初の反応はプロキシを構成することです。オンラインになったとき、少し混乱しました。

 プロキシ： {
  '/api': {
   ターゲット: 'http://aaa.com',
   変更元: true、
   パス書き換え: { '^/api': '' },
  },
  '/b-api': {
   ターゲット: 'http://bbb.com/',
   変更元: true、
   パス書き換え: { '^/b-api': '' },
  },
 },

nginxの設定は次のとおりです

サーバー{
  聞く 80;
  server_name アクセス アドレス;
  $rooturi を "xxxx/dist" に設定します。
  場所 ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
   有効期限は365日です。
   ルート $rooturi;
  }
  場所 ^~/api/ {

   ^/api/(.*)$ /$1 を書き換えて、break;
   proxy_pass http://aaa.com;
  }
  
  場所 ^~/b-api/ {

   ^/b-api/(.*)$ /$1 を書き換えて、break;
   proxy_pass http://bbb.com;
  }
  
  位置 / {
   ルート $rooturi;
   try_files $uri $uri/ /index.html =404;
   add_header Cache-Control "no-cache";
   アクセス制御許可オリジン * のヘッダーを追加します。
  }

 
}

これで、React プロジェクトの作成からデプロイまでの実装例に関するこの記事は終了です。React プロジェクトの作成からデプロイまでのより関連性の高い記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。