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/