SSR관련 질문드립니다.

안녕하세요. 이 강좌를 보고 처음으로 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는 실서버를 바라보고 있고, 어드민페이지는 개발쪽에 없어서 관련 설정은 없습니다.

ServerName test.mydomain.com

ProxyRequests Off

ProxyPreserveHost On

ProxyPass / http://localhost:3000/

ProxyPassReverse / http://localhost:3000/

</VirtualHost>

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

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

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

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

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

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

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

감사합니다.

인프런 커뮤니티 질문&답변