参考地址 NuxtJS使用Docker容器部署
1.普通Nuxt编译/发布流程
编译命令
NuxtJS 框架提供了如下命令用作开发或部署
| 命令 | 描述 |
|---|---|
| nuxt | 启动一个热加载的Web服务器（开发模式） localhost:3000。 |
| nuxt build | 利用webpack编译应用，压缩JS和CSS资源（发布用） |
| nuxt start | 以生产模式启动一个Web服务器 (nuxt build 会先被执行) |
| nuxt generate | 编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。 |
你可以将这些命令添加至 package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}然后通过 NPM进行编译
npm run dev //启动热加载开发模式 npm run build //编译
发布目录所需文件
将一下文件拷贝至服务器目录/app |名称|描述| |-|-| |.nuxt|编译后生成的目录,开发模式和发布模式通用,注意发布前使用npm run build 防止将dev目录发布| |static| 静态资源文件,通过/可直接访问| |package.json|npm 包管理配置文件| |nuxt.config.js|Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。| |node_modules|依赖模块|
安装NPM包
服务器需要node环境
cd /app npm install
内网环境你也可以把node_modules直接复制到/app目录
最后启动Nuxt
npm run start Listening on: http://your-ip:80/
nuxt.config.js server配置介绍 端口 HTTPS socket等
2.Docker 部署Nuxt
使用Dockerfile构建具备Node环境的容器镜像
1.容器基于 Dockerhub Node alpine官方镜像进行构建
2.并且安装busybox和bash工具
Busybox 官网 BusyBox 是一个集成了三百多个最常用Linux命令和工具的软件
创建文件 Dockerfile
#使用node:8.16-alpine 作为基础进行构建 FROM node:8.16-alpine #创建/app 目录作为部署目录,创建容器实例时,挂载此目录 RUN mkdir -p /app #更改alpine的安装源指向阿里源 RUN echo "http://mirrors.aliyun.com/alpine/v3.9/main/" > /etc/apk/repositories #安装 bash 和 busybox RUN apk update \ && apk upgrade \ && apk add --no-cache bash \ bash-doc \ bash-completion \ && /bin/bash \ && apk add --no-cache busybox \ && rm -rf /var/cache/apk/* #移动工作目录到 /app WORKDIR /app #设置node环境变量为production ENV NODE_ENV=production #设置容器启动时执行的命令 ENTRYPOINT [ "npm","start" ]
生成镜像
执行命令时,需要cd到Dockerfile所在目录,特别注意命令最后有一个. 我之前被坑过 docker build -t yourImageName:yourVersionTag .
启动docker容器,挂载宿主目录
1.复制.nuxt, static, package.json, nuxt.config.js 到 /root/nuxt-ssr目录(宿主机目录)
2.执行命令
docker run --name nuxt -p 8080:80 -d --restart=unless-stopped -v /root/docker-mount/dev-ssr:/app yourImageName:yourVersionTag
命令参数
--name ssr给容器起个别名 ssr-p 8080:80映射容器的80端口到主机8080端口,也可以不给,但是windows下不能直接ping通容器-d创建容器后,在后台运行,如果不加退出会话后,容器会终止运行--restart=unless-stopped指定容器在异常终止后重启,防止挂掉没人管-v /root/nuxt-ssr:/app挂载宿主目录/root/nuxt-ssr到容器的/app目录
完成
现在访问localhost:8080即你的nuxt容器了