ホストアプリケーションとリモートアプリケーション
Federation構成におけるホストアプリケーションとリモートアプリケーションの違いと、それぞれの役割を学びます。
「ホストアプリケーションとリモートアプリケーション」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What are Hosts & Remotes?
In Module Federation, applications play distinct roles: some are hosts, and others are remotes. Think of it like a main stage (host) that invites guest performers (remotes) to share their acts.
This setup allows large applications to be broken down into smaller, independently developed and deployed pieces.
The Host: Your Main App
The Host application is the primary application that boots up first. Its main job is to consume (or load) modules that are exposed by other applications, called Remotes.
It's like the main website that pulls in different widgets or sections from other services.
Host's Key Responsibilities
The Host application has a few crucial responsibilities:
- Loading Remotes: It tells Webpack which remote applications it needs to load.
- Providing Context: It often provides the overall application shell, routing, and shared dependencies.
- Integrating Modules: It renders components or uses functions provided by the remote applications.
The Remote: A Shared Piece
A Remote application is a separate, self-contained application that exposes specific parts of its code for others to consume. It can also consume modules from other remotes (or even act as a host itself!).
These exposed parts could be components, utility functions, or even entire pages.
Remote's Key Responsibilities
The Remote application focuses on:
- Developing Features: It builds specific features or UI components independently.
- Exposing Modules: It explicitly defines which parts of its codebase can be shared with host applications.
- Independent Deployment: It can be built and deployed without affecting the host or other remotes, as long as its exposed interfaces remain consistent.
ModuleFederationPlugin: The Link
Webpack's ModuleFederationPlugin is the magic behind this interaction. Both host and remote applications use this plugin in their Webpack configurations.
It orchestrates how modules are exposed by remotes and consumed by hosts, making them available at runtime.
Remote: Exposing Modules
On the Remote side, you use the exposes property in the ModuleFederationPlugin configuration.
This tells Webpack which files or modules from your remote application should be made available to others.
// webpack.config.js (remote app)
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Button': './src/Button.js',
'./Header': './src/Header.js'
}
})Host: Consuming Remotes
On the Host side, you use the remotes property to declare which remote applications you want to consume from.
You specify a unique name for the remote and its entry point URL.
// webpack.config.js (host app)
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
}
})How They Interact
When the Host application loads, it fetches the remoteEntry.js file from the configured remote URL. This entry file contains a manifest of all modules the remote exposes.
The Host can then dynamically import and use these exposed modules as if they were part of its own codebase.
Quick Check
Which of the following best describes the primary role of a Host application in a Module Federation setup?
Host & Remote Recap
We've learned about the fundamental roles of Host and Remote applications in Module Federation.
- Host apps are the main integrators, consuming functionality.
- Remote apps are independent units that expose specific modules.
Understanding these roles is key to building scalable micro frontends. Next, we'll dive deeper into setting up your first federated application!
よくある質問
「ホストアプリケーションとリモートアプリケーション」レッスンは無料ですか？
はい。「ホストアプリケーションとリモートアプリケーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。
「ホストアプリケーションとリモートアプリケーション」で何を学びますか？
Federation構成におけるホストアプリケーションとリモートアプリケーションの違いと、それぞれの役割を学びます。 ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ホストアプリケーションとリモートアプリケーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？
はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Webpackの基礎を復習
- Module Federation入門
- ホストアプリケーションとリモートアプリケーション
- 共有依存関係の設定