Sodobne spletne aplikacije so pogosto razdeljene na dva dela: frontend (uporabniški vmesnik v Vue, React ali Svelte, zgrajen z orodjem Vite) in zaledje oz. backend (API v Pythonu, npr. FastAPI ali Flask). Tako zgradbo pogosto predlagajo tudi AI asistenti.

Oba dela lahko gostujete na istem paketu (od paketa Zeleni naprej). V tem prispevku boste izvedeli, kako. Postopek smo preizkusili na primeru aplikacije Vue 3 + TypeScript + Vite s FastAPI in SQLAlchemy zaledjem.

Kazalo

• Kako je aplikacija sestavljena na strežniku?
• 1. korak: Frontend zgradite na svojem računalniku
• 2. korak: Nastavite preusmeritve za usmerjevalnik
• 3. korak: Postavite API
  • Podatkovna baza
• Frontend in API na različnih domenah
• Kontrolni seznam pred objavo
• Next.js, Nuxt in druga ogrodja s strežniškim izrisovanjem

Kako je aplikacija sestavljena na strežniku?

Ker sta frontend in API na isti domeni, brskalnik ne potrebuje nastavitev CORS, kar je ena najpogostejših težav pri objavi.

1. korak: Frontend zgradite na svojem računalniku

Pred gradnjo v vite.config.ts (ali vite.config.js) nastavite pot, na kateri bo aplikacija dostopna:

export default defineConfig({
  plugins: [vue()],      // ali react()
  base: '/app/',         // ime mape v public_html; za koren domene uporabite '/'
})

Če uporabljate usmerjevalnik (Vue Router, React Router), naj uporablja isto osnovno pot:

// Vue Router
createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes })

// React Router
<BrowserRouter basename={import.meta.env.BASE_URL}>

API naj frontend kliče z relativno potjo, ne z http://localhost:8000:

const res = await fetch('/app-api/players')

Nato zgradite aplikacijo:

npm run build

Vsebino mape dist/ (ne same mape) naložite v public_html/app/.

2. korak: Nastavite preusmeritve za usmerjevalnik

Ko uporabnik osveži stran na naslovu, kot je vasadomena.si/app/igralci, mora strežnik vrniti index.html, sicer dobi napako 404. V mapo public_html/app/ dodajte datoteko .htaccess:

RewriteEngine On
RewriteBase /app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /app/index.html [L]

Če je aplikacija v korenu domene, zamenjajte /app/ z /.

3. korak: Postavite API

API postavite kot Python aplikacijo v Setup Python App, kot je opisano v prispevku Python aplikacija na spletnem gostovanju:

• Application root: npr. app-api
• Application URL: vasadomena.si/app-api

Pri FastAPI uporabite datoteko passenger_wsgi.py z vmesnikom a2wsgi iz omenjenega prispevka.

FastAPI poti morajo ustrezati klicem iz frontenda. Če frontend kliče /app-api/players, v FastAPI definirate pot /players, ker je predpona /app-api že del naslova aplikacije.

Podatkovna baza

SQLite je primerna za manjše aplikacije. Datoteko hranite v mapi API-ja (ne v public_html) in uporabite absolutno pot:

import os
DB_PATH = os.path.join(os.path.dirname(__file__), "app.sqlite3")
engine = create_engine(f"sqlite:///{DB_PATH}", connect_args={"timeout": 15})

MySQL/MariaDB priporočamo za aplikacije z več uporabniki. Navodila najdete v prispevku Python aplikacija in MySQL.

Frontend in API na različnih domenah

Če je frontend na vasadomena.si, API pa na api.vasadomena.si, morate v FastAPI omogočiti CORS:

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://vasadomena.si"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Kontrolni seznam pred objavo

Pred objavo aplikacije preverite, ali ste pravilno uredili vse potrebne nastavitve.

• Nastavitev base v vite.config ustreza mapi v public_html.
• Frontend kliče API z relativno potjo, ne z localhost.
• V public_html/app/ je .htaccess za usmerjevalnik.
• Na strežnik ste naložili samo vsebino dist/, brez node_modules in izvorne kode.
• Gesla in ključi so v datoteki .env v mapi API-ja, ne v kodi frontenda (vse, kar je v frontendu, lahko vidi vsak obiskovalec).
• Za domeno je vklopljen SSL certifikat (https).

Next.js, Nuxt in druga ogrodja s strežniškim izrisovanjem

Zgornji postopek velja za aplikacije, ki se zgradijo v statične datoteke (Vite, Create React App, Vue CLI, statični izvoz Next.js). Ogrodja, ki potrebujejo lasten Node.js strežnik (Next.js s SSR, Nuxt), postavite kot Node.js aplikacijo.

Če potrebujete pomoč pri postavitvi, smo vam na voljo. Če pa vaša aplikacija potrebuje več sredstev, kot jih ponuja spletno gostovanje, si oglejte naše VPS strežnike. Za zahtevnejše projekte preverite tudi Turbo gostovanje ali Reseller gostovanje.