이번에 웹서버 괴목에서 기말과제를 프로젝트 형식으로 하는데 우리 웹서버에는 PHP를 이용서 공부를 한다.
하지만 나는 PHP를 쓰기 싫어서 php위에 프론트단에서는 React를 쓰기로 했다.
백엔드는 그래도 PHP는 써야되기 때문에 php + mysql을 쓰기로 했다 아마도?
제가 운영하고 클라우드 동아리에서 쉽게 운영하기 위한 시스템솔류션을 개발하고 있습니다.
해당 솔류션은 Proxmox API를 바탕으로 제작하고 주요 기능은 공지사항,서버신청이 있습니다.
이호준
[백엔드,프론트 개발 및 팀장]
강신혁
[간단한 백엔드 작성]
정재록
[문서작성]
근본 있는 웹 프레임워크
근본 있는 DB
자바스크립트, 타입스크립트를 지원하고 요즘 프론트엔드에서 많이 이는 프레임워크중 하나이다.
tailwind기반으로 만들어진 UI 템블릿
자세한 기술스택이나 과정을 볼려면
Frontend,api파일에 가서 봐주세요!
Project
└─ api -> php단에서 작동하는 파일 모음
└─ frontend -> REACT 개발 파일
└─ public -> 약간 IC역할 하는곳
└─ site -> REACT 빌드 파일 저장폴더
└─ vender -> 직접 건드는건 없습
└─.htaccess -> 아파이 설정
... 등등
우리 시스템에서는 JWT를 사용하기 때문에 아래에 패키지를 설치해야합니다.
composer require firebase/php-jwt
composer require vlucas/phpdotenv
composer require saleh7/proxmox-ve_php_api
아파치 같은 경우 내부에 htdocs라는 아파치 설정파일이 있어서 그냥 사용하시면 됨니다
nginx는 아래에 예시 문을참고해서 리버스 프록시 해주시기 바람니다.
...생락
root /var/www/ASW-PSMT;
index index.html index.php;
error_page 403 = <Domain>/site; //임시로 설정해두고 다음 릴리즈때는 제거 됨니다.
# React 정적 파일 경로 처리
location /assets/ {
alias /var/www/ASW-PSMT/site/assets/;
}
location /images/ {
alias /var/www/ASW-PSMT/site/images/;
}
# PHP 파일 요청 처리
location / {
try_files $uri $uri/ /public/index.php$is_args$args;
# CORS 설정
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
# PHP 요청에도 CORS 적용
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}
location /.well-known/acme-challenge {
proxy_set_header Host $host;
proxy_set_header X-Real_IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
proxy_pass http://127.0.0.1:9180;
}
...생락