magdo
39 lines
2.5 KiB
TeX
39 lines
2.5 KiB
TeX
\section{Build \& Deploy}
|
|
|
|
\begin{frame}{Mi történik a build folyamatban?}
|
|
\begin{block}{Build = el�'készítés az éles kiadásra}
|
|
Fejlesztés közben a kód sokszor nem optimális formában van --- sok fájl, olvasható változónevek, fejlesztői segédletek. A build folyamat ezeket átalakítja böngészőbarát, gyors formára.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item \textbf{Minifikálás:} felesleges szóközök, kommentek eltávolítása, változónevek rövidítése --- kisebb fájlméret.
|
|
\item \textbf{Tree-shaking:} a nem használt kód kiszűrése a végleges csomagból.
|
|
\item \textbf{Kódfelosztás:} az alkalmazás több kisebb fájlra bontva töltődik --- csak ami kell, töltődik le.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Környezeti változók}
|
|
\begin{itemize}
|
|
\item Az alkalmazásnak fejlesztési és éles környezetben más beállításokra van szüksége (API URL, kulcsok stb.).
|
|
\item Ezeket \textbf{.env fájlokban} tároljuk --- a \texttt{.env.local} soha nem kerül Git-be (érzékeny adatok).
|
|
\item Vite-ban a \texttt{VITE\_} előtagú változók kerülnek a kliensoldali kódba --- a többi csak szerveroldalon érhető el.
|
|
\item \textbf{Figyelem:} titkos kulcsokat soha ne tegyük a kliensoldali kódba --- bárki láthatja!
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Deploy lehet�'ségek}
|
|
\begin{itemize}
|
|
\item \textbf{Vercel, Netlify:} egy Git push-ra automatikusan deployol, ingyen elérhető próbaprojektekhez --- a legegyszerűbb indulás.
|
|
\item \textbf{GitHub Pages:} statikus oldalakhoz, nyílt forráskódú projektekhez kényelmes.
|
|
\item \textbf{Saját szerver / CDN:} Nginx-szel statikus fájlokat tálalunk; fontos az SPA fallback beállítása (minden URL-t az \texttt{index.html}-re irányítunk, a React Router veszi át).
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Biztonsági alapok}
|
|
\begin{itemize}
|
|
\item \textbf{XSS (Cross-Site Scripting) elleni védelem:} a React alapból escape-eli a JSX-ben megjelenített szövegeket --- a \texttt{dangerouslySetInnerHTML} viszont kikerüli ezt, csak tisztított adattal szabad használni.
|
|
\item \textbf{Auth token kezelés:} a JWT-t ne \texttt{localStorage}-ban tároljuk --- JavaScript elérheti. HTTP-only cookie biztonságosabb, mert JavaScriptből nem olvasható.
|
|
\item \textbf{Hibamonitorozás:} éles alkalmazásban szükséges eszköz (pl. Sentry), hogy a felhasználóknál fellépő hibákról értesüljünk.
|
|
\end{itemize}
|
|
\end{frame}
|