nuxt3框架SEO的坑

1.seo的坑

       在使用nuxt3开发个人博客的时候，本地开发情况下，通过option+command+i  查看页面时，seo信息是按照预期的。但是当部署上线后在浏览器打开相关信息便丢失了。一直没有找到问题(现在找到了)。

2. 部署的坑

       当通过nuxt build打包后将代码通过node部署，默认端口为3000当我想修改该端口为其他端口时，试了网上各种方法都没有成功，最后只有在nginx文件中修改相应端口，但是一样没能解决seo的问题（docker容器完美解决该问题，不得不说docker很好用）。

3. 缓存的坑

       当部署到线上时，后端数据有更新，但是前端无论如何也没法刷新，但是在后续部署的版本该问题又莫名其妙的消失了（打包方式不对，应该使用nuxt build 然后使用服务端渲染SSR，而不是SSG）

总结：

       终于找到出问题的原因了，由于我之前使用的是宝塔面板的node部署的，由于系统版本比较低，导致node版本只能下载16的，所以当部署上线时，nuxt3使用了$fetch导致数据请求失败，所以页面seo也就出了问题。

解决方案：

       我使用了docker部署，将node版本和本地版本保持一致，也就解决了这个问题。Dockerfile文件内容如下：

#1、基于镜像node版本
FROM node:20.11.1
#2、作者
MAINTAINER boyyang
#3、参数，node的环境为生产环境
ENV NODE_ENV=production
#4、任意ip
ENV HOST 0.0.0.0
#5、容器内创建目录/nuxt3
RUN mkdir -p /nuxt3
#6、复制当前的内容到容器内容部目录/nuxt3
COPY .output/ . /nuxt3/
#7、切换工作目录到/nuxt3
WORKDIR /nuxt3
#8、暴露端口3000，默认端口
EXPOSE 3000
#12、start
CMD ["node","./.output/server/index.mjs"]

       创建容器命令如下：

docker build -t nuxt3 .

       启动容器命令如下：

docker run --name nuxt3Container -d -p 80:3000 nuxt3

        80端口为服务器端口，3000端口为项目在容器中运行的端口

golang docker容器部署：

FROM golang:1.22.1 as builder

RUN mkdir /app

ADD . /app/

WORKDIR /app

#RUN GOPROXY=https://goproxy.cn,direct CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .
RUN GO111MODULE=on GOPROXY=https://goproxy.cn,direct CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -a -installsuffix cgo -o main .

FROM alpine:latest

WORKDIR /app

COPY --from=builder /app/main .
COPY --from=builder /app/etc  etc

EXPOSE 9527

CMD ["/app/main"]

       创建容器命令如下：

docker build -t goapi .

       启动容器命令如下：

docker run --name goapiContainer -d -p 9527:9527 goapi