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容器了