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/