利用nginx如何实现https站点nuxt服务端渲染 和spa单页面路由共存

[jackieli123723]

利用nginx如何实现https站点nuxt服务端渲染 和spa单页面路由共存

站点列表 https://wordpress.lilidong.cn https://wordpress.lilidong.cn/nuxt/ https://textnuxt.lilidong.cn nuxt构建

写这篇文章的灵感来自于一个日本网站，站点是jquery和nuxt ssr 服务端渲染的共同技术架构，在通过路由访问的时候 就发现了猫腻，有点意思

http://www.nara-u.ac.jp/ 主域名 jq技术 https://www.nara-u.ac.jp/buddience/ /buddience路由 是nuxt

通过curl 验证

/ 路由 jq技术

/buddience路由 是nuxt ssr

思考一下 这个就是路由转发嘛，nginx就可以办到

    # 前端静态页面 ssr nuxt  --- provided by lilidong
    location /nuxt {
        proxy_pass http://textnuxt; #node 绑定到nuxt ssr 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect              off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
    }

这样就可以转发nginx 到node端口上

通过看到上图 nuxt ssr 样式不出现，别慌 稳住

通过路径分析 就是nuxt 的静态资源没有找到，增加一个nginx的静态资源转发，规则自行百度

    #静态资源转发 本地路径 .nuxt下面的dist   
    location /_nuxt {
        alias /home/nuxt-text-blog/.nuxt/dist/;
    }   

404走的 nuxt 的error 完美

完整nginx 配置

server {
        #http1.1 ok
        listen 443;
        #way1 ok
        #listen 443 ssl http2;
        #way2
        #listen 443 ssl http2;
        #listen [::]:443 ssl http2;
       server_name www.wordpress.lilidong.cn wordpress.lilidong.cn; #填写绑定证书的域名

       ssl on;
       ssl_certificate /home/certs/wordpress/Nginx/1_wordpress.lilidong.cn_bundle.crt;
       ssl_certificate_key /home/certs/wordpress/Nginx/2_wordpress.lilidong.cn.key;
       ssl_session_timeout 5m;
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
       ssl_prefer_server_ciphers on;

     # spa vue 
      location / {
        root /data/wwwroot/wordpress;
        index index.html;
        error_page 404 /index.html;
        try_files $uri $uri/ /index.html; 
     }

     # 前端静态页面 ssr nuxt  --- provided by lilidong nuxt
    location /nuxt {
        proxy_pass http://textnuxt; #node 绑定到nuxt ssr 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect              off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
    }

    #静态资源转发 本地路径 nuxt   
    location /_nuxt {
        alias /home/nuxt-text-blog/.nuxt/dist/;
    }   

 }

遗留问题

curl 测试

lenovo@lenovo-PC MINGW64 /e/jackieli/vue/vue-cli-3-ssr/ssr-example/src (master) $ curl https://wordpress.lilidong.cn/nuxt/article/5c2dd022bb15c20af40153f8 这样是返回的nuxt源码

但是还是 curl 强制获取的spa的源码 不利于seo F5 回到spa curl 路由也是spa 的代码不利于 seo

[jackieli123723]

@weilaihui 谢谢