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/