91f6cfad5d
* docs: wording and structural changes to cloud * Fix vale error * Fix faq title * Fix heading levels * Small change to previews
70 lines
3.9 KiB
Plaintext
70 lines
3.9 KiB
Plaintext
export const metadata = {
|
|
title: `Cloud Best Practices: Connect Production Storefront`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
In this guide, you'll learn how to allow your production storefront to send requests to your Medusa application deployed on Cloud.
|
|
|
|
## Cloud and Storefront Hosting Overview
|
|
|
|
Cloud only hosts Medusa applications. It doesn't support hosting your storefronts. Instead, you can use hosting providers like [Vercel](https://vercel.com/) to host your storefronts.
|
|
|
|
If you're using the [Next.js Starter Storefront](!resources!/nextjs-starter), you can follow the [Deploy to Vercel](!resources!/deployment/storefront/vercel) guide to deploy your storefront.
|
|
|
|
To send requests from your production storefront, you need to add some configurations both to it and the Medusa application deployed on Cloud. Otherwise, you'll receive an error when trying to send requests from the storefront.
|
|
|
|
This guide lists the changes to make in your Medusa application and storefront to allow sending requests from the storefront. While the guide uses the Next.js Starter Storefront as an example, the steps are generally similar for any storefront.
|
|
|
|
---
|
|
|
|
## Changes in Your Medusa Application
|
|
|
|
To allow your production storefront to access your Medusa application on Cloud, you need to set two Cross-Origin Resource Sharing (CORS) environment variables in your Medusa application:
|
|
|
|
- `STORE_CORS`: The URLs of storefronts that can access your Medusa server's `/store` API routes. This is a comma-separated list of URLs that is typically used as the value of the [http.storeCors](!docs!/learn/configurations/medusa-config#httpstorecors) configuration.
|
|
- `AUTH_CORS`: The URLs of the clients (storefront and admin) that can access the Medusa server's `/auth` API routes. This is a comma-separated list of URLs that is typically used as the value of the [http.authCors](!docs!/learn/configurations/medusa-config#httpauthcors) configuration.
|
|
|
|
For example, if your storefront is hosted at `https://my-storefront.com`, you can [set the following environment variables in your production environment](../environments/environment-variables/page.mdx#add-environment-variables):
|
|
|
|
```shell
|
|
STORE_CORS=https://my-storefront.com
|
|
AUTH_CORS=https://my-storefront.com
|
|
```
|
|
|
|
If you have multiple storefronts, you can add them to the list separated by commas:
|
|
|
|
```shell
|
|
STORE_CORS=https://my-storefront.com,https://another-storefront.com
|
|
AUTH_CORS=https://my-storefront.com,https://another-storefront.com
|
|
```
|
|
|
|
After adding these environment variables, [redeploy the environment](../environments/long-lived/page.mdx#redeploy-environment) to apply the changes.
|
|
|
|
---
|
|
|
|
## Changes in Your Storefront
|
|
|
|
To send requests from your storefront to your Medusa application on Cloud, you need to set two environment variables in the storefront:
|
|
|
|
- `MEDUSA_BACKEND_URL`: The URL of your production Medusa application deployed on Cloud. For example, `https://my-project.medusajs.app`.
|
|
|
|
<Note title="Tip">
|
|
|
|
If you copy the URL from a Cloud environment's dashboard, it may contain a `/app` suffix. Make sure to remove it from this variable.
|
|
|
|
</Note>
|
|
|
|
- `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY`: A publishable API key from your production Medusa application. You can [create or find an existing one using the Medusa Admin](!user-guide!/settings/developer/publishable-api-keys).
|
|
|
|
<Note>
|
|
|
|
These environment variable names are used by the Next.js Starter Storefront to connect to your Medusa application. If you're using a different storefront, you may need to set different environment variables.
|
|
|
|
</Note>
|
|
|
|
You can set these environment variables in your storefront's hosting provider. For example, if you're using Vercel, you can set them in the [Vercel dashboard](https://vercel.com/dashboard).
|
|
|
|
Then, redeploy your storefront to apply the changes.
|
|
|
|
With the [changes made in the Medusa application](#changes-in-your-medusa-application) and storefront, your storefront can now send requests to your Medusa application on Cloud. |