Serving a Vite.js React project with a FastAPI backend via Docker - reactjs

Question

I have a project that uses a fastapi backend and a vite.js React front end. I currently have each dockerized as image.
Is there a way I can get fastapi to serve the vite projects static files so I don't have to have two images.
I have seen this https://fastapi.tiangolo.com/tutorial/static-files/ but not sure if that's what I need or would it be like
from fastapi.staticfiles import StaticFiles
load_dotenv() # take environment variables from .env.
app = FastAPI()
# serves static files from the /frontend/dist directory
app.mount("/frontend", StaticFiles(directory="frontend/dist"), name="frontend")
I have ran the above and got error RuntimeError: Directory 'frontend/dist' does not exist
I have my vite project in frontend I ran the vite build command which produced a dist folder with my static files inside. This is my current structure
.
├── README.md
├── backend
│ ├── Dockerfile
│ ├── Pipfile
│ ├── Pipfile.lock
│ └── main.py
└── frontend
├── Dockerfile
├── dist
│ ├── assets
│ │ ├── favicon.17e50649.svg
│ │ ├── index.1cd49a68.js
│ │ └── index.30ea237b.css
│ └── index.html
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│ ├── App.jsx
│ ├── favicon.svg
│ ├── index.css
│ ├── logo.svg
│ └── main.jsx
├── tailwind.config.js
└── vite.config.js
After MadsLindh suggested the change, I was able to start the fastapi server from within the backend directory but now I get
> uvicorn main:app --reload
INFO: Will watch for changes in these directories: ['/Users/paul/Desktop/deal_query_ui/backend']
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Started reloader process [79530] using WatchFiles
INFO: Started server process [79532]
INFO: Waiting for application startup.
INFO: Application startup complete.
INFO: 127.0.0.1:63011 - "GET / HTTP/1.1" 404 Not Found
INFO: 127.0.0.1:63012 - "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 Not Found
INFO: 127.0.0.1:63012 - "GET /apple-touch-icon.png HTTP/1.1" 404 Not Found
INFO: 127.0.0.1:63013 - "GET /favicon.ico HTTP/1.1" 404 Not Found
I even tried to go to http://127.0.0.1:8000/frontend/ but nothing I get the same {"detail":"Not Found"}
Docker
I went on to then create a Dockerfile within the root
# For more information, please refer to https://aka.ms/vscode-docker-python
FROM python:3.8-slim
EXPOSE 80
# Keeps Python from generating .pyc files in the container
ENV PYTHONDONTWRITEBYTECODE=1
# Turns off buffering for easier container logging
ENV PYTHONUNBUFFERED=1
# Install pip requirements
COPY ./backend/Pipfile ./backend/Pipfile.lock ./
RUN python -m pip install --upgrade pip
RUN pip install pipenv && pipenv install --dev --system --deploy
WORKDIR /app
COPY . /app
# Creates a non-root user with an explicit UID and adds permission to access the /app folder
# For more info, please refer to https://aka.ms/vscode-docker-python-configure-containers
RUN adduser -u 5678 --disabled-password --gecos "" appuser && chown -R appuser /app
USER appuser
# During debugging, this entry point will be overridden. For more information, please refer to https://aka.ms/vscode-docker-python-debug
CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "80"]
When running this locally I get the error
Traceback (most recent call last):
File "/usr/local/bin/uvicorn", line 8, in <module>
sys.exit(main())
File "/usr/local/lib/python3.8/site-packages/click/core.py", line 1130, in __call__
return self.main(*args, **kwargs)
File "/usr/local/lib/python3.8/site-packages/click/core.py", line 1055, in main
rv = self.invoke(ctx)
File "/usr/local/lib/python3.8/site-packages/click/core.py", line 1404, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "/usr/local/lib/python3.8/site-packages/click/core.py", line 760, in invoke
return __callback(*args, **kwargs)
File "/usr/local/lib/python3.8/site-packages/uvicorn/main.py", line 407, in main
run(
File "/usr/local/lib/python3.8/site-packages/uvicorn/main.py", line 575, in run
server.run()
File "/usr/local/lib/python3.8/site-packages/uvicorn/server.py", line 60, in run
return asyncio.run(self.serve(sockets=sockets))
File "/usr/local/lib/python3.8/asyncio/runners.py", line 44, in run
return loop.run_until_complete(main)
File "uvloop/loop.pyx", line 1501, in uvloop.loop.Loop.run_until_complete
File "/usr/local/lib/python3.8/site-packages/uvicorn/server.py", line 67, in serve
config.load()
File "/usr/local/lib/python3.8/site-packages/uvicorn/config.py", line 479, in load
self.loaded_app = import_from_string(self.app)
File "/usr/local/lib/python3.8/site-packages/uvicorn/importer.py", line 21, in import_from_string
module = importlib.import_module(module_str)
File "/usr/local/lib/python3.8/importlib/__init__.py", line 127, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "<frozen importlib._bootstrap>", line 1014, in _gcd_import
File "<frozen importlib._bootstrap>", line 991, in _find_and_load
File "<frozen importlib._bootstrap>", line 975, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 671, in _load_unlocked
File "<frozen importlib._bootstrap_external>", line 843, in exec_module
File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
File "/app/./backend/main.py", line 14, in <module>
app.mount("/frontend", StaticFiles(directory="../frontend/dist"), name="frontend")
File "/usr/local/lib/python3.8/site-packages/starlette/staticfiles.py", line 55, in __init__
raise RuntimeError(f"Directory '{directory}' does not exist")
RuntimeError: Directory '../frontend/dist' does not exist
Which from my experience doesn't make sense to me as I could get the server up and running from within the BE directory.