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

title3

站点列表

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技术

image

/buddience路由 是nuxt ssr

image

思考一下 这个就是路由转发嘛,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端口上

image

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

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

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

404走的 nuxt 的error 完美

image

image

image

完整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


原文地址:https://github.com/jackieli123723/jackieli123723.github.io/issues/71