Micro Frontends Architecture with Module Federation · レッスン

フェデレーテッドアプリのローカル実行とデバッグ

ホストアプリとリモートアプリを同時に起動し、ブラウザーでフェデレーテッドモジュールを調査し、ローカル開発中の一般的な問題をデバッグする方法を学びます。

「フェデレーテッドアプリのローカル実行とデバッグ」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Local Development Setup

A federated app is really several apps. To develop, you run each remote and the host at the same time, each on its own port.

Assigning Ports

Give every app a fixed dev-server port so the host can reliably reference each remote during development.

devServer: { port: 3001 } // remote
devServer: { port: 3000 } // host

Running Everything at Once

Manually opening many terminals is tedious. A tool like concurrently starts all dev servers with one command.

"scripts": {
  "dev": "concurrently \"npm:dev:host\" \"npm:dev:remote\""
}

Pointing the Host at Remotes

During development the host references each remote by its dev-server URL plus the exposed entry file.

remotes: {
  cart: "cart@http://localhost:3001/remoteEntry.js"
}

Inspecting remoteEntry.js

Every remote exposes a remoteEntry.js manifest. Open it directly in the browser to confirm the remote is running and to see what modules it exposes.

Using Browser DevTools

In the Network tab, watch for remoteEntry.js and the exposed module chunks loading. A 404 here is the most common federation error.

Common Error: Module Not Found

The error Cannot find module cart/Widget usually means the exposed path in the remote config does not match what the host imports. Names must match exactly.

exposes: { "./Widget": "./src/Widget" } // remote
import Widget from "cart/Widget";       // host

Common Error: Shared React Twice

If React hooks throw Invalid hook call, two React copies are loading. Confirm singleton: true on React in every app config.

Hot Reload Limitations

Changes inside a remote may not hot-reload in the host automatically. Refresh the host, or restart the remote dev server, after editing exposed modules.

Logging Federation Resolution

Set verbose webpack stats or add console logs in your bootstrap to confirm which remote and shared versions resolved at run time.

console.log("loading remote cart...");
import("cart/Widget").then(m => mount(m.default));

A Local Debug Checklist

When something breaks, check in order:

Are all dev servers running?
Does remoteEntry.js load (no 404)?
Do exposed names match imports?
Is React a singleton everywhere?

Quick Check

Test your local debugging knowledge.

Recap

You learned to run and debug federated apps locally:

Run host and remotes together on fixed ports
Use concurrently for one-command startup
Inspect remoteEntry.js and the Network tab
Fix module-not-found and double-React errors
Follow a quick debug checklist

Smooth local debugging speeds up MFE development.

よくある質問

「フェデレーテッドアプリのローカル実行とデバッグ」レッスンは無料ですか？

はい。「フェデレーテッドアプリのローカル実行とデバッグ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

「フェデレーテッドアプリのローカル実行とデバッグ」で何を学びますか？

ホストアプリとリモートアプリを同時に起動し、ブラウザーでフェデレーテッドモジュールを調査し、ローカル開発中の一般的な問題をデバッグする方法を学びます。ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「フェデレーテッドアプリのローカル実行とデバッグ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？

はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Micro Frontends Architecture with Module Federationに戻る