작년에 신규로 만들 서비스에 react를 도입하기로 결정했다. jquery를 그만 사용하고 싶었고 가장 인기있는 프론트 기술을 써 보고 싶었다. 인터넷 강좌도 뒤지고 책도 사서 스터디를 하며 기본을 조금씩 익혔다.
그런데 하면서 가장 궁금했던건 react를 서비스에 어떻게 붙일 것인가? 이다. jquery처럼 core 파일을 삽입하고 페이지에서 바로 react를 사용하면 되나? 그렇게도 할 수는 있지만 보통은 그렇게 하지 않는 것 같다. react 유저라면 당연하다는듯이 CRA를 이용해서 기본 구조를 만드는데 그럼 CRA를 어떻게 붙여야 되나? 빌드를 하라던데 빌드해서 붙이면 되나? 빌드를 하면 이상한 이름의 파일들이 생기고 이걸 어거지로 붙이면 구현은 가능했다. 그런데 이렇게 하는게 맞나? 이것도 뭔가 아닌 것 같다. 그러면 도대체 어떻게 해야 하는 것인가? 아무리 찾아봐도 뚜렷한 답을 찾을 수 없었다.
react로 만들려던 서비스는 일이 많아서 못하고 있다가 근래에 다시 손대기 시작했다. 웹서비스를 php의 laravel로 하기로 했기에 laravel 에 react 를 붙이는 방법을 처음부터 다시 찾아봤다. laravel에 react를 스캐폴딩 할 수 있는 명령어가 있다.
$ php artisan preset react
이러면 laravel에서 react를 사용할 수 있다. 뭔가 맞는듯, 아닌듯 했지만 이 방법을 테스트 해 보고 있는데 스택오버플로우의 어떤 답변에서 그토록 원하던 해답을 찾았다. react를 프론트엔드로 구현하고 laravel을 api 서버로만 활용하면 좋다는 것이다. 눈이 확 띄어졌다. 그래. 고정관념대로 react를 laravel에 붙일게 아니라 프론트는 react가, 서버 데이터가 필요한 경우는 laravel로 구현해 api로 가져오면 되는 것이다. 완벽한 front-end / back-end가 분리되는 것이고 SPA를 제대로 구현하는 것 이다. 이 답을 찾기위해 얼마나 해맸던가. 각각의 웹서버 위에서 돌아가면 되지 굳이 둘이 같이 붙어있어야 할 필요도 이유도 없다.
아래는 CRA를 이용해 만든 리액트를 nginx 에 올리는 방법이다.
- nginx를 웹서버로 쓰는데 도메인명만 바꿔서 react, laravel을 띄워도 되고 트래픽이 많다면 각각 nginx를 띄워도 된다. npm run dev 같은 개발용 서버는 사용하면 안된다.
2. 웹 경로에 CRA로 react 스캐폴딩
$ npx create-react-app cloud_front
3. nginx의 웹 포트를 변경할거면 react에서도 동일하게 변경해줘야 한다.
$ vim package.json
…
“scripts”: {
“start”: “export PORT=88 && react-scripts start”,
…
4. react 코딩 후 build 를 해 준다. 이러면 해당 경로에 build 폴더가 생긴다.
$ npm run build
5. nginx.conf 설정을 바꿔준다.
$ vim nginx.conf
server {
listen 88;
server_name localhost;
charset utf-8;
index index.html index.htm;
root /service/www/myapp/build; # 리액트를 빌드했을때 생긴 경로
location / {
try_files $uri $uri/ /index.html;
}
6. nginx를 실행하니 권한 문제가 발생한다. react 폴더의 권한을 적절한 것으로 바꿔준다.
7. nginx 실행하고 웹페이지 접근하면 리액트로 만든 페이지가 정상적으로 나온다.
