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/

posted on 2019-01-17 15:04  荣锋亮  阅读(2757)  评论(0)  编辑  收藏  举报

导航