---
title: "Deploy to Production"
description: "Link and deploy both Services from the student project root, then verify public API routing and the storefront’s internal backend request."
canonical_url: "https://vercel.com/academy/python-on-vercel/deploy-to-prod"
md_url: "https://vercel.com/academy/python-on-vercel/deploy-to-prod.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-09-29T18:31:24.703Z"
content_type: "lesson"
course: "python-on-vercel"
course_title: "Python on Vercel"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Deploy to Production

# Deploy to production

Hazel Home can now change its inventory in Python and display the result in Next.js. The service configuration describes both applications, so Vercel can deploy them together.

## Outcome

Deploy the frontend and backend as one Vercel project and verify the storefront and public inventory endpoint.

## Hands-on exercise 3.1

### Link the student project

From `academy-python-course/starter/`, link the directory containing `vercel.json`:

```bash
vercel link
vercel project inspect --non-interactive
```

Select the intended account or team and create a course project such as `hazel-home`. Keep the project root at `starter/` by selecting `./` in this directory. The `frontend/` and `backend/` roots are already defined in `vercel.json`; they do not need separate Vercel projects.

Before deploying, check the inspection output for the project and scope you intended. If you select an existing project, use one reserved for this exercise.

### Deploy both services

Run the deployment from the same directory:

```bash
vercel deploy --prod
```

Vercel builds the Next.js service from `frontend/` and the FastAPI service from `backend/`. The CLI prints the deployment URL when it finishes. Use that returned URL for the checks below.

### Check routing and the binding

Open `/api/items` on the deployment to inspect the inventory, then open `/` to load the storefront. The API rewrite sends the public request to FastAPI. Next.js reads `BACKEND_URL` and fetches inventory through the internal binding.

Vercel generates the binding for each deployment. There is no hostname to copy into environment settings and no need to expose `VERCEL_URL` for this course.

A preview uses the same configuration. Run `vercel deploy` without `--prod` when you want a preview instead of updating production.

### Keep the project boundary clear

Both services share the deployment and public routing configuration. Their dependencies remain separate, and the Services dashboard and logs let you inspect each application.

The backend runs through Vercel's Python support for FastAPI. For other applications, consult the current [Python framework and runtime guidance](https://vercel.com/docs/functions/runtimes/python) rather than moving files into a special `/api` directory.

## Try It

Set a terminal variable to the HTTPS URL printed by your deployment. This command prompts for it:

```bash
printf 'Paste your deployment URL: '
read -r DEPLOYMENT_URL
curl --fail "${DEPLOYMENT_URL%/}/api/items"
curl --fail "${DEPLOYMENT_URL%/}/"
```

The first response should contain the eight furniture items. The second should contain the storefront HTML with `Fernwood Sectional`. If you get a login response, Deployment Protection may require authentication. Use a signed-in browser for these checks; the login response doesn't indicate an application error.

For a final integration check, change one item in `backend/main.py`, deploy again, and confirm the storefront shows the change. Restore the item afterward if you want to keep the original inventory.

## Commit

Deployment creates local metadata under `.vercel/`, which Git ignores. From `starter/`, check for any source changes you still need to save:

```bash
git status --short
```

Commit any intentional inventory edits separately. The Services configuration and connected page should already be committed from Section 2.

## Troubleshooting

**Only one application is deployed:** Check that the linked project root contains `vercel.json` and both service directories. Deploy from `starter/`, not `starter/frontend/` or the repository root.

**The API responds but the storefront fails:** Inspect the frontend logs. Confirm its binding targets `backend`, uses `BACKEND_URL`, and the page awaits `connection()` before reading the binding, then fetches with `no-store`.

**`/api/items` returns 404:** Check that the API rewrites precede the frontend catch-all and that FastAPI still defines `/api/items`. The rewrite preserves that path.

**The CLI rejects the configuration:** Update to the current Vercel CLI and compare with the current [Services documentation](https://vercel.com/docs/services). The course uses `services`, not `experimentalServices`.

## Done-When

- [ ] The linked project and scope are correct
- [ ] The deployment includes both services from the student project root
- [ ] The production `/api/items` response contains eight furniture items
- [ ] The production storefront renders inventory fetched from FastAPI
- [ ] A backend change appears in the storefront after redeploying

## Solution

From `academy-python-course/starter/`:

```bash
vercel link
vercel project inspect --non-interactive
vercel deploy --prod
```

Use the configuration from Lesson 2.1 and the page from Lesson 2.2 to deploy both applications from one project. The frontend calls its matching backend through the service binding.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)