• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

SSR관련 질문드립니다.

21.07.07 10:37 작성 조회수 189

0

안녕하세요. 이 강좌를 보고 처음으로 Vue 와 Nuxt로 작업해서 몇 달 전에 서비스를 돌리고 있었습니다.

감사합니다. 꾸벅(_._)

그런데, 며칠 전에야 현재까지 SSR이 안되고 있다는걸 알았습니다.;;;

현재 fetch 훅으로 백엔드 데이터를 가져와서 보여주는데 SSR이 안돼서 화면에는 보이지만

브라우저 우클릭 소스보기로 보면 데이터로 뿌려지는 부분이 보이지 않습니다.

postman으로 확인해도 마찬가지 입니다.(CSR 이라는 얘기겠죠)

이 때문에 페이지를 새로고침하면 데이터 부분이 사라져서 안보입니다.

fetch훅 자체를 실행하지 않습니다.(처음엔 이게 SSR문제라고는 생각치도 못했습니다.;;;)

그래서 fetchOnServer: false 로 설정해 보면 새로고침 해도 데이터는 잘 나오지만 SSR은 당연히 안됩니다.

(무조건 SSR이 돼야 해서 이 옵션은 사용 불가입니다.)

혹시나 해서 asyncData훅으로 데이터를 가져와 봐도 문제는 동일합니다.

이상한건 동일한 소스로 개발서버에서는 SSR이 잘 되니 새로고침 문제도 없이 잘 되는데 실서버에서만 안되고 있는겁니다.

일단 제가 작업한 과정은 아래와 같습니다.

-------------------------------------------------------------------

사용자 화면을 Nuxt(Universal) 로 작업해서 실서버에 올렸습니다.

빌드: npm run build

pm2 이용해서 배포: pm2 start ecosystem.config.js 

pm2 ls 로 확인하면 정상적으로 실행 리스트 보여짐(pm2가 3000번 포트에서 돌아가는것도 확인)

실서버는 아래처럼 아파치 가상호스트 환경설정(백엔드 개발자가 처리)에서 프론트로 들어오는걸 localhost:3000 을 바라보도록 세팅돼어 있습니다.

현재 실서버에는 어드민 페이지 및 백엔드서버(api)가 같이 있습니다.

<VirtualHost *:80>
    ServerName www.mydomain.com
    ServerAlias mydomain.com localhost
    DocumentRoot "/usr/local/tomcat/webapps/ROOT"
    ServerAdmin webmaster@mydomain.com

    #80 to 433
    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond   %{HTTPS} off
        RewriteRule   .*  https://% {HTTP_HOST}%{REQUEST_URI} [R,L]
    </IfModule>
</VirtualHost>

<VirtualHost *:443>
    ServerName www.mydomain.com
    ServerAlias mydomain.com localhost
    DocumentRoot "/usr/local/tomcat/webapps/ROOT"
    ServerAdmin webmaster@mydomain.com

    <Directory "/usr/local/tomcat/webapps/ROOT">
        AllowOverride none
        Require all granted
    </Directory>

    # SSL
    SSLEngine On
    #SSLProxyEngine On
    SSLCertificateFile       /etc/httpd/ssl/mydomain.com/mydomain.com_20210616XXXX.crt.pem
    SSLCertificateKeyFile    /etc/httpd/ssl/mydomain.com/mydomain.com_20210616XXXX.key.pem
    SSLCertificateChainFile  /etc/httpd/ssl/mydomain.com/chain-bundle.pem
    SSLCACertificateFile     /etc/httpd/ssl/mydomain.com/AAACertificateServicesRoot.crt.pem

    # Tomcat
    <LocationMatch "/(?:adm|api|attachments|css|files|fonts|images|js|tinymce)">
        ProxyPass ajp://localhost:8009
        ProxyPassReverse ajp://localhost:8009
    </LocationMatch>

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

</VirtualHost>

문제가 발생하지 않는 개발서버 아파치 가상호스트 설정은 아래와 같습니다.

api는 실서버를 바라보고 있고, 어드민페이지는 개발쪽에 없어서 관련 설정은 없습니다.

<VirtualHost *:81>

        ServerName test.mydomain.com

        ProxyRequests Off

        ProxyPreserveHost On

        ProxyPass / http://localhost:3000/

        ProxyPassReverse / http://localhost:3000/

</VirtualHost>

실서버와 개발서버의 눈에 띄는 차이점은 실서버는 SSL이 적용되어 있다는 점 밖에 없는것 같습니다.

이 문제로 며칠째 헤매고 있는데 도저히 원인을 모르겠습니다.

Vue 코드나 Nuxt 설정에 문제가 있는걸까요? 

동일한 소스가 개발서버에서는 문제가 없는걸 보면 그건 아니것 같은데

백엔드나 서버쪽은 제가 거의 문외한이라 뭘 확인해 봐야 할지도 모르겠네요.

백엔드에 얘기하면 외주 개발자라이고 계약기간이 끝나서 그런지 프론트 문제라고만 하고 검토해 볼 생각도 안하고...

혹시나 짐작가는 문제가 있으시면 조언 좀 부탁드리겠습니다.

감사합니다.

답변 1

답변을 작성해보세요.

0

build를 해서 서버에 올리지 말고 개발환경에서 빌드된 파일을 실행해보세요. 그때도 안 되나 확인해보세요.

히나타님의 프로필

히나타

질문자

2021.07.07

로컬에서 npm run build 후 npm run start 를 말씀하시는거면 이때도 아무 문제 없습니다.

음.. 그러면 서버에서 fetch 요청이 블록당했거나 서버쪽으로 주소가 제대로 전달이 안 된게 아닌가 싶습니다.

히나타님의 프로필

히나타

질문자

2021.07.07

내비게이션 클릭 이동(라우터 탐색)을 하면 fetch로 데이터는 잘 가져와서 뿌립니다만 SSR이 안됩니다.

이렇게 SSR이 안되고 데이터가 보여지는 상태에서 새로고침 하면 데이터부분이 사라져요.(fetch 실행 안됨)

개발서버나 로컬에서 SSR이 잘되고  이 때는 새로고침시에도 아무 문제가 없는거 보면 fetch 문제가 아니라 SSR안되서 발생하는 문제 아닌가요?

ssr이 안 되는것은 서버쪽에서 fetch가 안 돼서 그런 거라서 그것도 fetch 문제입니다.

히나타님의 프로필

히나타

질문자

2021.07.07

로컬이나 개발서버도 api는 실서버를 바라고보 있습니다.

히나타님의 프로필

히나타

질문자

2021.07.07

fetch 가 안되서 생기는 문제면 내비게이션을 클릭해서 이동해도 똑같이 fetch가 실행이 안되어야 맞는거 아닌가요?

로컬(브라우저)에서는 되고 프론트 서버에서는 안 되는 것일 수 있죠. fetch 내부에 console.log 찍어서 프론트 서버쪽에서 확인해보세요.

히나타님의 프로필

히나타

질문자

2021.07.07

서버에서 로그찍으면 처음에 내비클릭 이동시에만 출력됩니다.(이때도 ssr은 안됨) 새로고침시에는 로그출력 안되구요.

히나타님의 프로필

히나타

질문자

2021.07.07

서버쪽에 프론트서버에서 호출하는 api의 dns설정이 안되어 있었네요.

덕분에 해결했습니다. 감사합니다!