nuxt docker 运行

nuxt 是vue 版的next ，实现的功能还是很方便的，对于需要开发性能要求比较高的web app
是一个很不错的选择
备注： 项目很简单，使用docker && docker-compose 运行，同时对于静态页面的处理使用了
docker 的多阶段处理，通过nginx 提供服务，服务端的运行模式使用了pm2 工具

nuxt 环境准备

基本项目，很简单，使用的create 脚手架

• 初始化项目
  注意选择参数使用了静态页面的,同时使用yarn 进行管理

 

yarn create nuxt-app demoapp 

• 添加pm2 配置
  可以通过安装pm2 工具生成
  pm2 init

 

module.exports = {

  apps : [{

    name: 'nuxt app deploy',

    script: 'yarn start',

    instances: 1,

    autorestart: true,

    watch: false,

    max_memory_restart: '1G',

    env: {

      NODE_ENV: 'production'

    },

    env_production: {

      NODE_ENV: 'production'

    }

  }]

};

 

 

docker 环境配置

• dockerfile
  支持多种
  服务器端运行模式：

 

FROM node:alpine

WORKDIR /app

COPY . /app

RUN yarn global add pm2

LABEL NORE="just for test"

ENV NODE_ENV=production

ENV HOST 0.0.0.0

LABEL AUTHOR="1141591465@qq.com"

EXPOSE 3000

RUN yarn && yarn build

CMD [ "pm2-runtime", "start", "ecosystem.config.js" ]

 

 

静态网站运行模式：

FROM node:alpine as build

WORKDIR /app

COPY . /app

RUN yarn global add pm2

LABEL NORE="just for test"

ENV NODE_ENV=production

ENV HOST 0.0.0.0

LABEL AUTHOR="1141591465@qq.com"

EXPOSE 3000

RUN yarn && yarn build && yarn generate

​

FROM openresty/openresty:alpine

LABEL AUTHOR="1141591465@qq.com"

COPY --from=build /app/dist/ /usr/local/openresty/nginx/html/

COPY nginx.conf usr/local/openresty/nginx/conf/

EXPOSE 80

 

 

• docker-compose 文件

 version: "3"

 services:

    ssr:

      build:

        context: ./

        dockerfile: ./Dockerfile

      ports:

      - "3000:3000"

    static:

      build:

        context: ./

        dockerfile: ./Dockerfile-static

      ports:

      - "8080:80"

 

 

构建&&启动

• 构建

docker-compose build

 

• 启动

docker-compose up -d

• 访问效果
  

说明

注意pm2 docker 运行应该使用pm2-runtime 命令

参考资料

https://github.com/rongfengliang/nuxt-docker-running
https://nuxtjs.org/guide/installation
https://pm2.io/doc/en/runtime/overview/