Zenn
Open9

Medusa+Next.js+SupabaseでECサイト作る。今すぐにだ

Next.js
Supabase
medusa
ekohekoh

まずは以下のコマンドでcreate appする

npx
npx create-medusa-app@latest --with-nextjs-starter --skip-db

コマンドオプションは以下。今回はdb周りを後でやるので--skip-dbをつける

  • --repo-url <url> : プロジェクトを作成するリポジトリのURL。デフォルトだとhttps://github.com/medusajs/medusa-starter-default
  • --seed : データベースにデモ・データをシードすべきかどうかを示すフラグ。デフォルトでは、シードは無効
  • --no-boilerplate : src/admin、src/api以下のファイルなどを削除するフラグ。これはクリーンなプロジェクトを作成したい場合に便利で、Medusaに慣れている場合にのみ推奨されるみたい。
  • --no-browser : プロジェクト作成終了時にブラウザを開かず、成功メッセージのみを表示する。
  • --skip-db : データベースの作成、マイグレーションの実行、シーディングをスキップし、その後ブラウザを開くのをスキップする。
  • --db-url <url> : データベースの作成をスキップし、データベースの URL を指定された URL に設定する。データベースへの接続に失敗した場合はエラーをスロー。プロジェクト作成後もマイグレーションを実行し、管理画面を開く。ローカルまたはリモートですでにデータベースを作成している場合に使える
  • --no-migrations : マイグレーションの実行、管理ユーザーの作成、シーディングをスキップする。使用する場合は、--db-urlオプションに、必要なマイグレーションをすべて持っているデータベースのURLを渡さないとエラーが出る
  • --directory-path <path> : 新規プロジェクトのディレクトリを作成する親ディレクトリのパスを指定可能
  • --with-nextjs-starter : <PROJECT_NAME>-storefrontディレクトリにNext.jsスターターのスターターストアをインストールする。
ekohekoh

やっぱり最初にDBあったほうが楽そうだから作り直す

まずsupabaseで新しいプロジェクトを作成してpostgresqlのURIを取得する

ekohekoh
npx create-medusa-app@latest  --db-url <取得したurl> --with-nextjs-starter

で再度ディレクトリ作成を試みる

? What's the name of your project? my-medusa-store
? Enter an email for your admin dashboard user admin@medusa-test.com

この質問たちはデフォルト値でいいのでEnter^2

ekohekoh

メモ：２回バグが出たのとその解決法

一個め

Couldn't connect to PostgreSQL using the database URL you passed. Make sure it's correct and try again.

パスワードは合っているはずなのに…と思いながら以下のstackoverflowを見ると、supabaseのプロジェクト作成時に使用したパスワードに#などの特殊文字を含んでいたのが原因のよう。プロジェクトを作り直し、パスワードを数字とアルファベットのみのものに変更して解決
https://stackoverflow.com/questions/76502516/medusajs-error-initializing-the-database-err-invalid-url

2個め
コマンドを以下のように--repo-urlオプションをつけて実行したところ。。。

npx create-medusa-app@latest  --db-url <取得したurl> --with-nextjs-starter --repo-url <githubのurl>

以下のエラーが出た

? What's the name of your project? my-medusa-store
? Enter an email for your admin dashboard user admin@medusa-test.com
🚀 Starting project setup, this may take a few minutes.
✔ Created project directory
✔ Installed Next.js Starter successfully in the my-medusa-store-storefront directory.
An error occurred while preparing project: Error: Command failed: npm install --legacy-peer-deps
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /<projectディレクトリ>/my-medusa-store/package.json
npm ERR! errno -2
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/<projectディレクトリ>/my-medusa-store/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

調べてもこのissueは開かれておらず解決策もなさそうだったので、--repo-urlオプション以下を消して再度試したところ、うまく作成できた

ekohekoh

成功すると自動でウィンドウが開き、以下画面が表示される

ekohekoh

あとはアカウント作ってログインすると。


一旦ここで終わりー

ekohekoh

backend, adminのデプロイを行ったので備忘録めも

デプロイ先：DigitalOcean

デプロイ自体はgithubのリポジトリを選ぶだけで簡単
注意１：medusaは2GB以上のRAMがないとデプロイのプロセスで処理が終了する
注意２：resourceのsettingからHealth Careの開始時間を300s遅らせないと初期ロードが終了するのを待たずHealth Careが始まりエラーが出る

デプロイ後は
{自分のバックエンドのurl}/app
のurlでadminページに飛ぶ

ekohekoh

これから作ったECなんだけどクソほど保守運用しづらいのでMedusaは使うな

誰も使ってないけど、Medusaは使うな