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 使用法の概要 (必読)

推薦する

時間別にグループ化された MySQL クエリ ステートメント

年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...

MySQL 外部キー制約の例の説明

MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...

一般的な Dockerfile コマンドの使用方法の紹介

目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...

Linux における効果的なユーザー グループと初期ユーザー グループの実装

まず、/etc/group ファイルを確認します。 [root@localhost /]# cat ...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...

Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

1. css: ドラッグテーブル.css @charset "UTF-8"; ....

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

LinuxデバッガGDBの基本的な使い方の詳細な説明

目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...

MySQL マスタースレーブレプリケーションの実装手順

目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...

HTMLタグのtarget属性の使用法

1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...

純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...

CSSフィルターにはどんな魔法の用途があるか

背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...