vue.js를 PHP 서버에서 함께 사용하기

일반적으로 vue.js (react, angular, svelte도 비슷합니다)를 이용하시면,
백엔드로 보통은 node.js 환경을 이용하시겠죠. express 혹은 apollo일테구요.

물론, 최근의 트렌드를 십분 활용해서 스타트업에 걸맞게 BaaS를 이용할 수도 있습니다.

하지만 이미 오래 전 구축된 테스트 환경이 갖춰져 있거나, 발주처의 요구 등 여러가지 요인에 의해서 백엔드 환경이 PHP로 고정된 상황도 있습니다.

그래서 PHP를 위해서 PHP Best Practices를 살펴보면……

하지만 현실은…. PHP말고 다른 것을 쓰세요. 끝

하지만 어떡합니까? 여기저기서 PHP를 많이 쓰고 있는데

2022년 기준으로도 PHP는 77.5%의 사이트에서 쓰일거라고 예상

어쨌든 상황에 따라서 PHP에 vue.js를 올려서 써야하는 상황은 종종 생길 수 있습니다.

그냥 올려놓고 써야만 하는 상황이면 다행인데, 백엔드로 돌리는 PHP에서 REST API 혹은 기타 백엔드 처리용 페이지를 돌림과 동시에 이용자는 자바스크립트로 제작된 PWA 앱을 온전히 경험해야하는 상황이죠.

해결 솔루션의 개념은 아주 간단합니다.

HMR 같은 node.js의 장점은 포기하시구요, 개발한 PWA앱을 빌드해서 서버에 그냥 업로드해서 쓰면 됩니다.

그!런!!데!!!

이렇게 그냥 업로드하면 >npm serve 혹은 >npm run dev에서 아주 잘 돌던 우리의 routing 하위 페이지들이 하나도 열리지 않습니다. 오류가 나거나 프레임워크(라라벨, 코드이그나이터 등)를 사용하는 경우에 404 페이지가 뜨겠죠.

(혹은 반대의 상황이 생길 수도 있습니다. vue.js의 라우팅 페이지는 잘 열리는데, PHP 백엔드의 API 페이지가 열리지 않는다든지 하는 등의 상황이죠.)

왜냐면,

Apache 서버에서는 routing URL을 정적 페이지(static page)로 인식해서, 실제 페이지를 구성하는 페이지의 php 파일을 찾기 때문입니다. (혹은 반대의 상황에선, 모든 하위페이지를 PWA 가상 라우팅 페이지로 인식하고, php의 정적 페이지로 연결되어야하는 페이지를 인식하지 못하는 것입니다.)

그래서, 우리는 서버에 우리가 원하는 URL을 PWA(vue)에서 처리를 할 지, Apache (혹은 nginx)에서 처리할지를 알려줘야합니다.

그 역할을 하는 것이 바로 rewrite 모듈입니다. Apache에서는 메인 폴더의 .htaccess 파일에서 처리할 수 있고, nginx 또한 설정 파일의 location /에 rewrite 내용을 입력해 줌으로써 처리할 페이지를 알려줄 수 있습니다.

실제로 운용하는 정확한 방법은 상황에 따라서 다를 수 있습니다.

그래서 여기에 htaccess 혹은 nginx 설정 내용을 올려도 그대로 적용이 안됩니다.

서버 설정에 익숙하지 않으시다면 따로 Apache와 nginx의 rewrite module의 사용법을 공부하신 다음에
하나씩 적용하시면서 내 서버의 환경에 맞는 설정을 해주셔야 합니다.

아파치에 익숙하시면, rewrite module의 내용을 nginx 문법으로 바꿔주는 사이트도 있으니까 유용하게 이용하셔도 됩니다.

직접 서버를 소유하지 못한 경우, 혹은 클라이언트의 요구가 있을 경우에 항상 적절하게 대응할 수 있는 개발팀이 되도록 합시다!

(실제로는 1,000원 미만의 국내 호스팅 사이트에서 PWA앱을 테스트하기 위한 용도로 제일 많이 쓰는 것 같아요.)