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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス
  • VSCode のデバッグ react-native android プロジェクトのエラー問題を解決する
  • webpack5 を使用して 0 から 1 までの React プロジェクトを構築する方法
  • Reactプロジェクトのパッケージ化に基づくCSS参照パスエラーの解決策
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • Vue または React プロジェクトの運用環境から console.log を削除する
  • Reactフロントエンドプロジェクトのパッケージを最適化する方法
  • npx create-react-app xxx を使用してプロジェクトを作成するときに報告されるエラーの解決策
  • WeChat公式アカウントでReactプロジェクトを実行する方法

<<:  Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法

>>:  MySQL データベースの Binlog 使用法の概要 (必読)

推薦する

Linux でファイルを削除するさまざまな方法の効率の比較

Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...

Nginx が Apache より優れている理由

Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...

トランザクションとロックを表示するための MySQL の一般的なステートメント

データベース内のトランザクションとロックを表示するための一般的なステートメントトランザクションの待機...

ブログデザイン ウェブデザイン デビュー

私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

JS にこれがあるのはなぜですか?

目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

DockerコンテナにNFS共有ディレクトリをマウントする実装

以前、https://www.jb51.net/article/205922.htm で、Docke...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

よく使われる HTML タグとその特徴の完全なリスト

まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...

ネイティブ js はカスタム スクロール バー コンポーネントを実装します

この記事の例では、カスタムスクロールバーコンポーネントを実装するためのjsの具体的なコードを参考まで...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

Vue+Openlayerはグラフィックスのドラッグと回転変形効果を実現します

目次序文関連資料成果を達成する実装手順序文Openlayer には独自の拡張プラグイン ol-ext...