75fd6b0c83
- Add a new deployment overview page giving a general overview of how a Medusa project is deployed - Add a new section in all backend deployment guides related to the Medusa admin. - Add a general deployment guide for the medusa admin. - Add a general deployment guide for the Next.js starter
96 lines
3.4 KiB
Plaintext
96 lines
3.4 KiB
Plaintext
---
|
||
description: "General steps for deploying the Next.js starter."
|
||
addHowToData: true
|
||
---
|
||
|
||
import DetailsList from '@site/src/components/DetailsList'
|
||
import CorsErrorSection from '../../troubleshooting/cors-issues.md'
|
||
|
||
# General Deployment Guide for Next.js Starter
|
||
|
||
In this guide, you’ll learn the general steps to follow when deploying the Next.js starter storefront. This guide isn’t tailored towards any hosting provider.
|
||
|
||
## Prerequisites
|
||
|
||
### Deployed Medusa Backend
|
||
|
||
The deployed storefront must connect to a publicly deployed backend. So, deploy the backend first to obtain its URL.
|
||
|
||
You can follow one of [these backend deployment guides](../server/index.mdx).
|
||
|
||
### Installed Storefront
|
||
|
||
You must have an installed Next.js storefront before proceeding with the deployment. You can refer to [this installation guide](../../starters/nextjs-medusa-starter.mdx).
|
||
|
||
---
|
||
|
||
## Step 1: Storefront Preparations
|
||
|
||
If you're not using the [Serverless Modules](../../starters/nextjs-medusa-starter.mdx#using-serverless-modules) in your storefront, either delete the `src/app/api` directory or exclude it in `.gitignore`.
|
||
|
||
Otherwise, the deployment may fail.
|
||
|
||
---
|
||
|
||
## (Optional) Step 2: Create GitHub Repository
|
||
|
||
Many hosting providers allow you to deploy your project directly from GitHub. This makes it easier for you to push changes and updates without having to manually trigger the update in the hosting provider.
|
||
|
||
If your hosting provider supports that, create a GitHub repository and push the Next.js starter’s code:
|
||
|
||
```bash
|
||
git init
|
||
git remote add origin <GITHUB_URL>
|
||
git add .
|
||
git commit -m "initial commit"
|
||
git push
|
||
```
|
||
|
||
---
|
||
|
||
## Step 3: Deploy to Hosting Provider
|
||
|
||
The steps to deploy the Next.js starter can be different based on the hosting provider you use. The following points cover common configurations across hosting providers:
|
||
|
||
- If your hosting provider supports choosing a framework preset, set it to Next.js. You can then skip setting the build command and output directory as they are default Next.js configurations.
|
||
- Set the build command of your deployed project to the `build` command:
|
||
|
||
```bash npm2yarn
|
||
npm run build
|
||
```
|
||
|
||
- Set the output directory of your deployed project to `.next`.
|
||
- Add the following environment variables:
|
||
- `NEXT_PUBLIC_MEDUSA_BACKEND_URL`: The URL of your deployed Medusa backend.
|
||
- `NEXT_PUBLIC_BASE_URL`: The URL of the storefront. If you still don’t have the URL you can wait until later to add it. However, you may face errors when using the storefront.
|
||
- `REVALIDATE_SECRET`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
|
||
- If you’re using serverless modules:
|
||
- Set `MEDUSA_FF_MEDUSA_V2` to `true`.
|
||
- Set `POSTGRES_URL` to the connection URL of the PostgreSQL database.
|
||
|
||
---
|
||
|
||
## Step 4: Configure CORS on the Deployed Backend
|
||
|
||
To send requests from the Next.js starter storefront to the Medusa backend, you must set the `STORE_CORS` environment variable on your backend to the storefront’s URL:
|
||
|
||
```bash
|
||
STORE_CORS=<STORE_URL>
|
||
```
|
||
|
||
Where `<STORE_URL>` is the URL of your Next.js starter storefront that you just deployed.
|
||
|
||
Then, restart your Medusa backend. Once the backend is running again, you can use your storefront.
|
||
|
||
---
|
||
|
||
## Troubleshooting
|
||
|
||
<DetailsList
|
||
sections={[
|
||
{
|
||
title: 'CORS Error',
|
||
content: <CorsErrorSection />
|
||
},
|
||
]}
|
||
/> |