Markdown
WPIP - IAS
Kompletny przewodnik uruchomienia projektu typu backend (Symfony 6.4, API) + frontend (Vue 2).
Spis treści
Źródło projektu (Bitbucket)
Wymagania serwerowe
Wymagania dla Symfony 6.4
Wymagania dla Vue 2
Instalacja i konfiguracja Symfony 6.4
1. Pobranie projektu z repozytorium
2. Konfiguracja środowisk (.env)
3. Baza danych i migracje
4. Uruchomienie serwera deweloperskiego
5. Bundles i przydatne pakiety
6. Konfiguracja CORS (API → SPA)
Instalacja i konfiguracja Vue 2
1. Utworzenie projektu (Vue CLI)
2. Struktura i skrypty npm
3. Integracja z API Symfony
4. Uruchomienie i build produkcyjny
Uruchomienie całego środowiska (dev)
Deployment (produkcyjny)
Rozwiązywanie problemów
Źródło projektu (Bitbucket)
Repozytorium: https://Poligrand@bitbucket.org/Poligrand/ias.git
Klonowanie (HTTPS; jeśli wymagane, użyj hasła/aplikacyjnego tokenu Bitbucket):
git clone https://Poligrand@bitbucket.org/Poligrand/ias.git
cd ias
Struktura katalogów
Backend – Symfony
Najważniejsze elementy:
config/packages/* – m.in. api_platform.yaml, lexik_jwt_authentication.yaml, nelmio_cors.yaml, oneup_flysystem.yaml.
config/routes/* – m.in. api_platform.yaml, auth.yaml (ścieżki autoryzacji/JWT), framework.yaml.
migrations/ – komplet migracji dok. (MySQL) – uruchamiane przez Doctrine Migrations.
public/ – dokument root (m.in. index.php, katalogi uploads/, files/).
src/ – logika aplikacji: Controller/, Entity/, Repository/, Services/, Command/ (komendy: np. CreateUserCommand, GenerateFunctionTree, Calculate*Values, importy i raporty).
templates/ – szablony Twig dla raportów (FMEA, SWOT, QFD, ZPC itd.).
Frontend – Vue 2
src/ – aplikacja SPA (widoki i komponenty domenowe).
Kluczowe pliki:
src/apiConfig.js – konfiguracja adresu API (backend Symfony).
src/axiosInstance.js – instancja Axios z interceptorami.
src/router.js – router aplikacji.
vue.config.js – ustawienia dev serwera/proxy/build.
Widok drzewa (tylko katalogi)
Symfony
backend/
├── bin/
├── config/
│ ├── packages/
│ └── routes/
├── migrations/
├── public/
│ ├── bundles/
│ ├── files/
│ ├── js/
│ └── uploads/
│ └── images/
├── src/
│ ├── ApiResource/
│ ├── Command/
│ ├── Controller/
│ ├── DTO/
│ ├── Entity/
│ ├── EventSubscriber/
│ ├── Exception/
│ ├── Filter/
│ ├── Interfaces/
│ ├── Repository/
│ ├── Services/
│ ├── Util/
│ └── Validator/
│ └── Constraints/
├── templates/
│ ├── fmea/
│ ├── keizen/
│ ├── qfd/
│ ├── swot/
│ └── zpc/
├── tests/
└── translations/
Vue 2
frontend/
├── config/
├── public/
└── src/
├── assets/
│ ├── css/
│ ├── fonts/
│ ├── images/
│ └── scss/
├── components/
│ ├── budget/
│ ├── budgetTemplate/
│ ├── budgetTemplateCategories/
│ ├── building/
│ ├── calendar/
│ ├── contractor/
│ ├── contractorContact/
│ ├── dashboard/
│ ├── dashboardElements/
│ ├── device/
│ ├── eventTypes/
│ ├── fmea/
│ ├── functionTree/
│ ├── iasFile/
│ ├── iasPhases/
│ ├── industries/
│ ├── keizen/
│ ├── middleware/
│ ├── person/
│ ├── qfd/
│ ├── register/
│ ├── rentalDashboard/
│ ├── rentalObject/
│ ├── renter/
│ ├── swot/
│ ├── ui/
│ ├── unit/
│ ├── user/
│ └── zpc/
├── constants/
├── pages/
│ ├── budgets/
│ ├── budgetTemplateCategories/
│ ├── budgetTemplates/
│ ├── buildings/
│ ├── calendar/
│ ├── contractorContacts/
│ ├── contractors/
│ ├── dashboard/
│ ├── dashboards/
│ ├── devices/
│ ├── eventTypes/
│ ├── fmea/
│ ├── functionTree/
│ ├── iasFiles/
│ ├── iasPhases/
│ ├── industries/
│ ├── methods/
│ ├── middlewares/
│ ├── people/
│ ├── processTree/
│ ├── qfd/
│ ├── registers/
│ ├── rentalDashboard/
│ ├── rentalObjects/
│ ├── renters/
│ ├── schema/
│ ├── swot/
│ ├── units/
│ ├── users/
│ └── zpc/
└── validators/
Wymagania serwerowe
Wymagania dla Symfony 6.4
PHP: 8.2 lub nowszy (zalecane 8.3/8.4)
Composer: 2.5+
Rozszerzenia PHP: ctype, iconv, json, mbstring, openssl, pcre, pdo (z pdo_mysql), session, simplexml, tokenizer, xml
Serwer HTTP: Nginx lub Apache 2.4+
Baza danych: MySQL 8.0.32 (projekt korzysta z MySQL; inny silnik nie jest wspierany w tej konfiguracji)
Opcjonalnie: Symfony CLI; Node.js, jeśli korzystasz z Encore/assetów (nieobowiązkowe dla samego API)
Notatka: w konfiguracji środowiska host bazy to zwykle mysql-service (np. w środowiskach kontenerowych/kubernetes).
Wymagania dla Vue 2
Node.js: LTS (zalecane 18.x lub 20.x)
NPM: 9+ (lub Yarn 1.22+)
Vue CLI: @vue/cli 5.x (dla Vue 2)
Przeglądarka: nowoczesna (polyfille przez Babel w razie potrzeby)
Node.js: LTS (zalecane 18.x lub 20.x)
NPM: 9+ (lub Yarn 1.22+)
Vue CLI: @vue/cli 5.x (wspiera Vue 2; narzędzie do scaffoldu i bundlingu Webpack)
Przeglądarka: nowoczesna, w razie potrzeby z polyfillami (Babel)
Instalacja i konfiguracja Symfony 6.4
1. Pobranie projektu z repozytorium
git clone https://Poligrand@bitbucket.org/Poligrand/ias.git
cd backend
# instalacja zależności backendu
composer install
# (jeśli projekt posiada folder frontend z Vue 2)
# cd frontend && npm install
Konfiguracja pliku .env.local (aktualny stan)
Poniżej bieżąca zawartość przekazana do projektu. Uwaga: nie commituj sekretów/APP_SECRET do repo.
# In all environments, the following files are loaded if they exist,
# the later taking precedence over the former:
#
# * .env contains default values for the environment variables needed by the app
# * .env.local uncommitted file with local overrides
# * .env.$APP_ENV committed environment-specific defaults
# * .env.$APP_ENV.local uncommitted environment-specific overrides
#
# Real environment variables win over .env files.
#
# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
#
# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
# https://symfony.com/doc/current/best_practices/configuration.html#infrastructure-related-configuration
###> symfony/framework-bundle ###
APP_ENV=dev
APP_SECRET=bac81b8ff8c45e47f0900e1d0aff90bd
#TRUSTED_PROXIES=127.0.0.1,127.0.0.2
#TRUSTED_HOSTS='^localhost|example\.com$'
###< symfony/framework-bundle ###
###> doctrine/doctrine-bundle ###
# Format described at http://docs.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
# For an SQLite database, use: "sqlite:///%kernel.project_dir%/var/data.db"
# Configure your db driver and server_version in config/packages/doctrine.yaml
# DATABASE_URL=mysql://cbms:cbms@db:3306/cbms
###< doctrine/doctrine-bundle ###
#DATABASE_URL=pgsql://postgres:changeme@db:5432/cbms?serverVersion=12.6&charset=utf8
###> symfony/swiftmailer-bundle ###
DATABASE_URL="mysql://cbms:secret@mysql-service:3306/cbms?serverVersion=8.0.32&charset=utf8mb4"
# For Gmail as a transport, use: "gmail://username:password@localhost"
# For a generic SMTP server, use: "smtp://localhost:25?encryption=&auth_mode="
# Delivery is disabled by default via "null://localhost"
MAILER_URL=null://localhost
###< symfony/swiftmailer-bundle ###
###> nelmio/cors-bundle ###
#CORS_ALLOW_ORIGIN=^http?://localhost(:[0-9]+)?$
###< nelmio/cors-bundle ###
PRIVATE_UPLOADS_DIR_NAME=/files
UPLOADS_DIR_NAME=/files
PRIVATE_GENERATED_DIR_NAME=/files
Ważne: W produkcji ustaw APP_ENV=prod, APP_DEBUG=0 i skompiluj zmienne: composer dump-env prod.
2. Konfiguracja środowisk (.env)
Pliki konfiguracyjne ładowane są w kolejności opisanej powyżej. Zmienna środowiskowa zawsze ma pierwszeństwo nad zawartością plików .env*.
Dla MySQL używamy DATABASE_URL w formacie:
DATABASE_URL="mysql://USER:PASS@HOST:3306/DBNAME?serverVersion=8.0.32&charset=utf8mb4"
W aktualnym środowisku: HOST=mysql-service, DBNAME=cbms.
Zmienna MAILER_URL ustawiona jest na null://localhost — wysyłka maili jest wyłączona (dev/test).
Zmienne środowiskowe dot. plików (z .env.local):
PRIVATE_UPLOADS_DIR_NAME=/files
UPLOADS_DIR_NAME=/files
PRIVATE_GENERATED_DIR_NAME=/files Upewnij się, że katalogi istnieją pod public/files (uprawnienia do zapisu przez proces PHP-FPM).
JWT (LexikJWTAuthenticationBundle) – wymagany JWT_PASSPHRASE w środowisku. Patrz rozdział Autoryzacja JWT poniżej.
Jeśli korzystasz z dev frontu na porcie 8080, ustaw/zweryfikuj CORS (patrz config/packages/nelmio_cors.yaml).
3. Baza danych i migracje
# utworzenie bazy (jeśli nie istnieje)
php bin/console doctrine:database:create
# wykonanie migracji (kolejno zgodnie z katalogiem migrations/)
php bin/console doctrine:migrations:migrate -n
# opcjonalnie: załadowanie danych startowych (jeśli projekt je posiada)
# php bin/console doctrine:fixtures:load -n
Przydatne komendy domenowe (src/Command)
# utworzenie użytkownika (parametry zgodnie z definicją CreateUserCommand)
php bin/console app:user:create
# generowanie drzewa funkcji/procesów
php bin/console app:function-tree:generate
# kalkulacje budżetów/wynajmu
php bin/console app:budget:calculate
php bin/console app:rental:calculate
Dokładne nazwy/argumenty sprawdzisz: php bin/console list | grep app:
4. Uruchomienie serwera deweloperskiego
# Symfony CLI (zalecane)
symfony serve -d
# lub wbudowany serwer PHP
php -S 127.0.0.1:8000 -t public
Aplikacja dostępna pod https://127.0.0.1:8000 (CLI) lub http://127.0.0.1:8000.
Autoryzacja JWT (LexikJWTAuthenticationBundle)
Projekt używa JWT (plik config/packages/lexik_jwt_authentication.yaml). Przed logowaniem należy wygenerować klucze:
# ustaw hasło do kluczy (NIE commitować): w .env.local
# JWT_PASSPHRASE="twoje_tajne_haslo"
mkdir -p config/jwt
# generowanie kluczy (wprowadź to samo hasło co w JWT_PASSPHRASE)
openssl genpkey -algorithm RSA -out config/jwt/private.pem -pkeyopt rsa_keygen_bits:4096
openssl pkey -in config/jwt/private.pem -pubout -out config/jwt/public.pem
Upewnij się, że ścieżki plików i hasło są zgodne z konfiguracją bundla. Ścieżkę endpointu logowania znajdziesz w config/routes/auth.yaml.
5. Bundles i przydatne pakiety
Najczęściej używane w API:
composer require api symfony/serializer-pack symfony/property-access
composer require orm doctrine maker --dev
composer require nelmio/cors-bundle
composer require symfony/uid symfony/validator symfony/security-bundle
Dodaj route’y API (jeśli używasz API Platform – dostaniesz gotowy /api).
6. Konfiguracja CORS (API → SPA)
config/packages/nelmio_cors.yaml (przykład dev):
nelmio_cors:
defaults:
allow_credentials: false
allow_origin: ['http://localhost:8080'] # dev URL frontend (Vue CLI)
allow_headers: ['Content-Type', 'Authorization']
expose_headers: ['Link', 'Location']
allow_methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS']
max_age: 3600
paths:
'^/': ~
W prod ustaw właściwą domenę frontendu (np. https://app.example.com).
Instalacja i konfiguracja Vue 2
1. Utworzenie/instalacja zależności
Jeśli frontend jest w podkatalogu frontend/ (lub równoległym do backendu):
cd fronted # przejdź do katalogu wskazanego dla SPA (zgodnie ze strukturą)
npm install
2. Struktura i skrypty npm
Główne skrypty w package.json:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
Istotne pliki konfiguracyjne:
src/apiConfig.js – ustaw adres API (np. http://127.0.0.1:8000).
src/axiosInstance.js – interceptory (np. token JWT w Authorization: Bearer ...).
vue.config.js – ewentualny proxy dev → http://127.0.0.1:8000 lub publiczny VUE_APP_API_URL.
Przykład src/apiConfig.js:
export default {
apiBaseUrl: process.env.VUE_APP_API_URL || 'http://127.0.0.1:8000'
}
A w pliku .env (frontend):
VUE_APP_API_URL=http://127.0.0.1:8000
3. Integracja z API Symfony
Axios korzysta z apiBaseUrl – pamiętaj o CORS na backendzie (nelmio_cors.yaml).
Ścieżka logowania JWT zgodnie z config/routes/auth.yaml. Po zalogowaniu zapisuj token (np. w localStorage) i dodawaj nagłówek Authorization.
4. Uruchomienie i build produkcyjny
# dev
npm run serve
# prod build (tworzy katalog dist/)
npm run build
Serwowanie prod:
jako statyczny serwis (Nginx) – patrz sekcja Deployment (produkcyjny);
lub umieszczenie dist/ za reverse proxy (oddzielna domena/poddomena). Integracja z API Symfony Utwórz plik .env w katalogu frontend i zdefiniuj URL API:
VUE_APP_API_URL=http://127.0.0.1:8000
Użycie w kodzie (np. serwis API):
import axios from 'axios'
const api = axios.create({
baseURL: process.env.VUE_APP_API_URL
})
export const getItems = () => api.get('/api/items')
export const createItem = (data) => api.post('/api/items', data)
Jeśli backend działa pod inną domeną/portem – pamiętaj o poprawnym CORS.
4. Uruchomienie i build produkcyjny
# dev (hot reload na porcie 8080)
npm run serve
# build produkcyjny (dist/)
npm run build
Serwowanie produkcyjne
Variant A (osobna domena/app): serwuj katalog dist/ przez Nginx/Apache jako samodzielną aplikację SPA.
Variant B (z poziomu Symfony): skopiuj dist/ do public/app i ustaw rewrite w webserwerze, aby obsłużyć routing SPA.
Uruchomienie całego środowiska (dev)
Backend
cd ias
composer install
symfony serve -d
# lub: php -S 127.0.0.1:8000 -t public
Baza
php bin/console doctrine:database:create || true
php bin/console doctrine:migrations:migrate -n
JWT
export JWT_PASSPHRASE="<twoje_haslo>"
# generowanie kluczy – patrz sekcja Autoryzacja JWT
Frontend
cd ../frontend
npm install
echo "VUE_APP_API_URL=http://127.0.0.1:8000" > .env
npm run serve
Adresy
API (Symfony): http://127.0.0.1:8000
SPA (Vue CLI): http://localhost:8080
Deployment (produkcyjny)
Symfony (backend)
Ustaw ENV: APP_ENV=prod, APP_DEBUG=0, APP_SECRET przez zmienne środowiskowe/secrets.
Zbuduj środowisko produkcyjne .env:
composer install --no-dev --optimize-autoloader
composer dump-env prod
php bin/console cache:clear --env=prod
Migracje bazy:
php bin/console doctrine:migrations:migrate --no-interaction --env=prod
Nginx (fragment):
server {
server_name api.example.com;
root /var/www/backend/public;
location / {
try_files $uri /index.php$is_args$args;
}
location ~ \.php$ {
include fastcgi_params;
fastcgi_pass unix:/run/php/php8.2-fpm.sock;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
fastcgi_param DOCUMENT_ROOT $realpath_root;
}
}
Vue 2 (frontend)
Build:
cd frontend
npm ci
npm run build
Serwowanie dist/ (Nginx):
server {
server_name app.example.com;
root /var/www/frontend/dist;
location / {
try_files $uri $uri/ /index.html;
}
}
Zmienna VUE_APP_API_URL musi wskazywać publiczny adres API (np. https://api.example.com).
Rozwiązywanie problemów
CORS / 401 / 403: sprawdź nelmio_cors.yaml (origin frontu), nagłówek Authorization, poprawność JWT.
JWT błędy podpisu: niezgodne klucze lub JWT_PASSPHRASE – wygeneruj ponownie i sprawdź uprawnienia do config/jwt/*.
Błąd PDO/połączenie DB: zweryfikuj DATABASE_URL, uprawnienia użytkownika MySQL, serverVersion=8.0.32.
Zapisy do plików: upewnij się, że public/files oraz public/uploads mają prawa zapisu dla użytkownika PHP-FPM.
Vue CLI port 8080 zajęty: npm run serve -- --port 3000.
Routing SPA 404 w prod: try_files $uri $uri/ /index.html; w konfiguracji frontu.
Mapowanie endpointów: zweryfikuj config/routes/*.yaml (szczególnie auth.yaml i api_platform.yaml) dla poprawnych ścieżek.