Medusa は、Shopify に代わるもうひとつのオープンソースの代替品です。

[[442888]]

この記事は、イーソン氏が執筆したWeChat公式アカウント「Programmer Bus」からの転載です。転載の許可については、Programmer Bus公式アカウントまでお問い合わせください。

Medusaは、そのスピードとカスタマイズ性で知られるオープンソースのヘッドレスコマースエンジンです。Medusaは、パブリックREST APIヘッドレスコマースコンポーネント、ストアフロントエンド、管理パネルという3つのコアコンポーネントで構成されているため、ユーザーはプラットフォーム全体を自由に利用することも、自社のeコマースストアの設定に合わせてカスタマイズすることも可能です。

このチュートリアルシリーズでは、Medusaを使ってeコマースストアを作成する方法を学びます。開発環境の設定、バックエンド、フロントエンド、管理パネルへの機能とプラグインの追加など、Medusaを使ってeコマースストアを構築するために必要なすべての手順が含まれます。

Medusa を選ぶ理由は何ですか?

カスタマイズ機能

カスタマイズを必要としないオンラインストアを構築したい場合（ほとんどの人は技術に詳しくないため）、Shopifyは良い選択肢です。しかし、独自の技術スタックを持ち、ビジネスニーズに合わせて調整したい場合は、Medusaが最適です。

Medusaの主な特徴は、その柔軟性と拡張性です。ユーザーは3つのコアコンポーネントをすべて併用することも、一部を他のテクノロジーやシステムと連携・統合することも可能です。

ユーザーは全体または一部を利用でき、どちらの場合でも優れた開発環境とユーザーエクスペリエンスを提供します。バックエンドはNode.js、Express、そしてデフォルトのSQLiteで構築されています。サーバーの初回インストール時には、PostgreSQLとRedisのいずれかを選択できます。

フロントエンドについては、Next.js または Gatsby で構築された初期ストアフロントを使用できます。これら 2 つのオプションと同様に、最終的にはヘッドレスサーバーに接続された静的ウェブサイトが作成され、ウェブサイトの速度が確保されます。

バックエンドも Gatsby で構築されており、フロントエンドと同様にサーバーに接続します。

これにより、Medusaは、他の密結合で複雑かつ低速なeコマースプラットフォームから分離されます。Medusaは、個々のビジネスニーズや要件に合わせて高度なカスタマイズができるよう設計された、すぐに使用できる機能を多数提供しています。技術的な要件が低い、あるいは全く要件がないShopifyと比較して、Medusaは完全にカスタマイズ可能なテクノロジースタックを実現します。

価格

Shopifyの価格モデルは大きなデメリットとなり得ます。プラットフォームの利用と導入に料金がかかるだけでなく、無料のプラグインやテーマを見つけるのも困難です。さらに、プラットフォームの柔軟性が低いため、プラグインのインストールも容易ではありません。市場には、eコマースプラットフォームを無料で提供するMedusaなど、他にも多くの代替手段があります。

オープンソースの真価が発揮されるのはまさにこの点です。Medusaは無料で使用・展開できます。また、ユーザーをサポートし、無料のプラグインを開発するためのオープンソースコミュニティも存在します。

ビジネス適応性

Shopifyは柔軟性が低く、カスタマイズが難しいです。つまり、B2B、マーケットプレイス、カスタムショッピング体験など、多くのビジネスユースケースはShopifyでは利用できない、あるいは利用不可能です。

従来型のeコマース体験で商品を販売するだけであれば、これは問題にならないかもしれません。しかし、事業の成長を計画しており、ビジネスのユースケースに合わせて成長・拡張できるeコマースプラットフォームが必要な場合は、Medusaが間違いなく最適な選択肢です。

Medusa のヘッドレス API と柔軟性により、ショッピングエクスペリエンスをカスタマイズするプラグインを簡単に作成したり、必要に応じてカスタムサービスを提供するために Medusa を他のプラグインと統合したりできます。

インストール前の準備

始める前に、Node.jsとNPMがインストールされていることを確認する必要があります。インストールされているかどうかを確認するには、次のコマンドを実行します。

ノード -v
 npm -v

各コマンドの出力に数値バージョンが表示された場合は、インストールが完了したことを意味します。それ以外の場合は、再インストールする必要があります。

Medusa を構成する

Medusa は、バックエンドの REST API を公開することで、フロントエンドや管理パネルからデータの取得や変更を可能にします。ユーザーは、ストアフロントや管理パネルを、API に接続する独自のプラットフォームに置き換えることができますが、少なくともこの Medusa コンポーネントはシステムに必須です。

Medusaをインストールする

まず、サーバーを構成できる CLI ツールをインストールする必要があります。

npm install -g @medusajs/medusa-cli

この部分を完了したら、CLI を使用してマシンに新しい Medusa ストアを設定できます。

メデューサの新しいマイストア--シード

これにより、my-storeディレクトリに新しいMedusaインストールが作成されます。ストアまたはディレクトリの名前は、my-storeを編集することで変更できます。--seedオプションを適用すると、デモ製品を含む基本データがデータベースにシードされます。

走るメデューサ

このコマンドを完了したら、サーバーを実行できます。まず、Medusaストアディレクトリに切り替えます。

CDマイストア

次に、CLI ツールを使用して開発コマンドを実行し、サーバーを実行します。

クラゲの発達

デフォルトでは、サーバーはlocalhost:9000で実行されます。ブラウザでlocalhost:9000/store/productsにアクセスすると、商品のJSON配列が表示されます。プランターは一度に1つの商品しか追加しないため、配列には1つの商品しか含まれません。

APIエンドポイントの完全なリストはドキュメントに記載されています。ストアフロントの場合、すべてのエンドポイントのプレフィックスは「/store」です。管理パネルの場合、すべてのエンドポイントのプレフィックスは「/admin」です。

サーバー構造の概要

サーバーのディレクトリ構造を見てみましょう。

data: このディレクトリには、データベースのシード値を設定するために使用されるデータが保存されます。このディレクトリには、基本的なストレージ設定を含む seed.json というファイルが含まれています。このデータは、設定した --seed オプションを追加するとストアに追加されます。
`dist`: このディレクトリには、`npm run build` を実行した際にサーバーのビルド結果が保存されます。サーバーをデプロイする際にこのコマンドを実行すると、`dist` ディレクトリ内のコンパイル済みファイルが使用されます。
src: src ディレクトリでは、必要なプラグインや変更を追加できます。api サブディレクトリでは、ストアに新しいエンドポイントを追加できます。services サブディレクトリでは、複数のエンドポイントでグローバルに使用できる新しいサービスを追加できます。subscribers サブディレクトリでは、さまざまなイベントのイベントリスナーを追加できます。
アップロード: これには、製品画像など、アップロードするファイルが含まれます。

ストアを設立する

次に、ストアフロントをインストールして設定します。前述の通り、GatsbyスターターまたはNext.jsスターターのいずれかを使用できます。このチュートリアルでは、Next.jsスターターを使用します。

設置店舗

Next.js ストアフロントをインストールするには、次のコマンドを実行するだけです。

 npx create -next -app -e https://github.com/medusajs/nextjs-starter-medusa my-storefront

これにより、my-storefrontディレクトリにNext.jsストアフロントが作成されます。別の名前にしたい場合は、コマンド内で名前を変更できます。

店舗経営

実行前にサーバーが起動していることを確認してください。ストアはサーバーに接続してストアデータを取得します。サーバーを起動するには、前のセクションの手順に従ってください。

ストアを実行するには、まずストアのディレクトリに切り替えます。

 cd マイストアフロント

次に、次のコマンドを実行してストアを実行します。

 npm 実行 dev

デフォルトでは、localhost:8000 でストアが実行されます。開くと、様々なドキュメントへのリンクを含む基本的なストアフロントが表示されます。また、商品を閲覧したり、チェックアウトのプロセス全体を体験したりすることもできます。

Stripe統合を追加する

Stripe 統合を追加するには、まず .env.template を .env.local にコピーします。

 mv .env.template .env.local

次に、Stripe 公開キーの環境変数を変更します。

 NEXT_PUBLIC_STRIPE_KEY=pk_test_something

構造の概要

ディレクトリ構造は次のようになります。

コンポーネント: このディレクトリには、ショッピングカート、チェックアウト、ナビゲーションバーなど、ストアフロントのさまざまなコンポーネントが含まれています。必要に応じて、これらのコンポーネントをここで変更できます。
context: コンテキストを通じて簡単に切り替えたり変更したりできるものが含まれます。例えば、context/display-context.js 内のショッピングカート全体の表示を切り替えるには、defaultDisplayContext オブジェクトの cartView の値を変更します。
ページ：ストアフロント内の様々なページが含まれます。デフォルトでは、ストアフロントにはチェックアウト、商品ページ、ログインページの3つのページがあります。ここでストアにページを追加できます。
public: 画像などの公開アセットをここに追加できます。
スタイル: このカタログにはストアのすべてのスタイルが含まれており、ここで変更してストアの外観を変更できます。
utils: これには、Stripe の公開キーを取得するためのヘルパー関数、ヘルパー関数、構成などが含まれます。

管理者管理パネルを構成する

最後に、管理パネルをインストールして設定します。管理パネルはGatsbyを使用して構築されています。管理パネルでは、サーバーに公開されているAPIを使用して、ストアのデータを表示または変更できます。これには、商品、注文、顧客などの表示と追加が含まれます。

インストール管理パネル

管理パネルを設定するには、まず管理パネルのリポジトリを複製する必要があります。

 git クローン https://github.com/medusajs/admin my-admin

次に、管理パネルのディレクトリ（my-admin）に移動します。上記のコマンドを使用して変更することができます。

 cd my-admin

NPM を使用して依存関係をインストールします。

 npmインストール

管理パネルを実行する

すべての依存関係をインストールしたら、管理パネルを実行できます。

 npm スタート

デフォルトでは、localhost:7000 にある管理パネルが開きます。初めて開いた場合はログインを求められます。メールアドレス「[email protected]」、パスワード「supersecret」をご利用ください。

ログインすると、サイドバーのある管理パネルが表示され、注文、顧客、製品などを表示できます。

構造プレビュー

ディレクトリ構造は次のとおりです。

src: 管理パネルのメインコードがここにあります。コンポーネント、ページ、コンテキストなどを編集できます。管理パネルへの編集や追加はすべてここで行えます。
public: これには、Gatsby が管理パネル用に生成するビルドが含まれます。
static: 画像など、管理パネルに必要な公開静的アセット。

前述の通り、この管理パネルはGatsbyを使用して構築されています。設定や実行に必ずしもGatsbyを習得する必要はありませんが、変更を加えるには、変更内容に応じてGatsbyの仕組みをある程度理解しておく必要があります。

代替ソリューション: Medusa アプリケーションを作成する

前述のように、Medusa はプラットフォームの 3 つのコアコンポーネントを分離し、さまざまなユーザーに合わせて柔軟にカスタマイズし、すべてを一度にインストールできるようにします。

Medusa は create-medusa-app を導入しました。React を使ったことがある方は、create-react-app に似ていることに気付くでしょう。このツールを使うと、プラットフォームの 3 つのコンポーネントを同時に設定できます。

Medusaアプリケーションの設定

ターミナルで、次のコマンドを実行します。

 npx作成-medusa-app

次に、ネーミングストアに関連する質問と、さまざまな部分でどのテクノロジが使用されているかに関する回答を書く必要があります。

インストール後、3つのディレクトリが作成されます。1つはサーバー用（backend）、1つはストアフロント用（storefront）、そしてもう1つは管理者用（admin）です。

Medusaアプリケーションの実行

最初の方法での各コンポーネントの説明と同様に、個別にインストールする場合は、各コンポーネントを個別に実行する必要があります。

ストアフロントと管理パネルの両方に Medusa サーバーが必要なので、いずれかを実行する前に実行されていることを確認してください。

Medusa サーバーを実行するには、バックエンドディレクトリに切り替えて実行する必要があります。

 {% c-block language= "js" %} cd バックエンド
npm 開始 {% c-block-終了%}

Medusa ストアフロントを実行するには、ストアフロントディレクトリに切り替えて実行する必要があります。

 {% c-block language= "js" %} cdストアフロント
npm 開始 {% c-block-終了%}

Medusa admin を実行するには、admin ディレクトリに切り替えて実行する必要があります。

 {% c-block language= "js" %} cd 管理者
npm 開始 {% c-block-終了%}

結論は

市場にはShopifyをはじめとする多くのeコマースプラットフォームが存在します。それらは一定の人気と利点を備えていますが、その多くは拡張性に欠けています。将来、あらゆる企業のビジネスが拡大していくと、これらのプラットフォームは制約要因となり、デメリットとなるでしょう。

対照的に、Medusaは優れた代替手段です。オープンソースプラットフォームであるMedusaは、スケーラブルで迅速な開発環境を提供し、事実上無限の可能性を秘めています。このチュートリアルで紹介した分離構成と高度にカスタマイズ可能なコンポーネントと組み合わせることで、Medusaは間違いなく他に類を見ない体験を提供します。ぜひお試しください！

DUICUO