1.Server Deployment(部署ssr)

1.1 配置 nuxt.config.js

• 指定target为server
• env

export default {
  target: 'server',
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },
}

1.2 创建 .dockerignore 指定docker 忽略的文件

.nuxt
.vscode
.gitignore
.git
node_modules
dist

1.3 创建 Dockerfile-ssr

FROM node:lts

# 创建容器内的项目存放目录
WORKDIR /nodeapp

# node-alpine 需要依赖python
# RUN apk update && apk upgrade
# RUN apk add python2

# node 需要依赖python
# RUN apt-get update || : && apt-get install python -y

COPY . .

RUN yarn install
RUN yarn run build

# 容器对外暴露的端口号，要和node项目配置的端口号一致
EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
# set app port
ENV NUXT_PORT=3000

# 容器启动时执行的命令
CMD ["sh", "-c", "npm run start"]
# npm run start

1.4 打包成docker 镜像

docker build -t fssq/nuxt-ssr -f Dockerfile-ssr .

1.5 运行 docker run -dp 3000:3000 fssq/nuxt-ssr

image.png
image.png

---

2.部署SPA(单页面)

2.1 配置 nuxt.config.js

• 将ssr 置为false

export default {
  ssr: false, // Disable Server Side rendering
}

2.2 执行 yarn run build 会得到dist 文件夹，将文件夹放在nginx /usr/share/nginx/html即可

image.png
image.png

• 生命周期也变少了，只有plugins ,middleware, asyncData也会在客户端执行

3.generate （静态部署 ）

3.1 配置 nuxt.config.js

export default {
  target: 'static',
}

`

3.2 因为静态部署不在执行server-middleware,所以要将请求到server-middleware的接口改掉

// store\index.ts

  async nuxtServerInit (store:any, context:any) {
    console.log('nuxtServerInit', Date.now())

    // 每次初始化都调用接口
    // const res = await context.$api.get('/visits')
    // const { visitsNumber } = res.data
    store.commit('increment', 1)
  }

3.3 执行 yarn generate 会生成一个dist 目录,同样放入nginx 中

image.png

• 第一次刷新只会执行plugins
  image.png
• 点击其他路由，在跳回首页，只会执行 middlewaer
• 刷新跳转，时间都不会变，值一直是编译时候的时间；当然点击可以改变时间