使用docker优雅的部署你的nuxtjs项目

使用docker部署项目的好处

把所有的环境打包在一块，不再需要考虑开发环境问题。
如果上线发生了错误，可以很快回滚到上一个可用的镜像，减少损失

那么我们怎么来部署呢？

可能当你尝试的时候会遇到一些问题

• nuxt 是 ssr方式，不能指定静态文件根目录，我怎么配置访问的目录呢？
• 官网提供的启动方式，默认是127.0.0.1:3000 我怎么在外部容易访问呢？
• 启动容器的时候执行什么shell呢？

当你自己尝试的时候构建的思路可能是

构建一个镜像需要一个node环境，于是会想到以下命令

FROM node:8.2.1

需要一个文件夹来存放项目目录，于是

RUN mkdir -p /app

需要把项目复制到镜像里面，于是

COPY . /app

需要指定一个命令执行的目录

WORKDIR /app

对外暴漏的端口

EXPOSE 3000

一切就绪，此时把代码复制过来了，指定了命令执行的目录，那么迫不及待的是不是想，跑项目了跑项目之前按照惯例 npm install

RUN npm install

然后构建

RUN npm run build

此时项目已经在你的镜像里面构建好了

并且生成一个.nuxt 文件夹,顺理成章的想 执行 npm start
这个命令在docker 怎么弄呢？想到 CMD 容器启动的时候需要执行的命令，务必记住，只能写一个

CMD ["npm","start"]

此时完整的dockerfile 文件

RUN mkdir -p /app
COPY . /app
WORKDIR /app
EXPOSE 3000
RUN npm install
RUN npm run build

CMD [ "npm", "start" ]

ok!!!,一切就绪，此时耐不住性子肯定想构建这个镜像了
于是

docker build -t nuxt-demo .

经过漫长的构建，主要是npm install 花的时间最长，于是你会思考，能否设置成国内环境，让它下载更快一些 于是 把下面的命令写在了 npm install 之前

RUN npm config set registry https://registry.npm.taobao.org

重新构建的时候的确比上次快了

此时肯定想体验一下自己的劳动成果了
docker run -it --rm -p 8080:3000 nuxt-demo

创建了一个一个基于 nuxt-demo镜像的容器并且对外暴漏的是8080端口

于是愉快的使用浏览器访问
127.0.0.1:8080

突然发现根本打不开，产生了一丝的挫败感，为什么，到底为什么！

经过思考后发现，容器内部映射的是127.0.0.1:3000 而不是对外暴漏的ip

怎么办？ 去百度？ 谷歌？ Stack Overflow 无济于事，发现这个东西太新，还没有类似的问题， 于是想主动去提问
算了，还是先找找别人的项目吧， 打开github 搜索 docker-nuxt 找到了自己想要的项目

https://github.com/wsdo/docke...

太棒了，他就是我想要的，如获珍宝，白自己搞了那么久，

于是把这个项目拉下来，按照readme 跑了一遍

git clone https://github.com/wsdo/docker-nuxt 

先构建镜像

docker build -t nuxt-demo .

然后启动容器

docker run -dt -p 8080:3000 nuxt-demo

打开浏览器访问

127.0.0.1:8080

打开了nuxt express项目

瞬间感觉终于拨开迷雾见到了明月

于是研究了项目发现找到了解药

ENV NODE_ENV=production
ENV HOST 0.0.0.0 

比自己的dockerfile多了两行，这不就是自己想要的嘛！

于是完整的dockerfle 并且亲测可以使用的Dockerfile

FROM node:8.2.1
MAINTAINER stark.wang
ENV NODE_ENV=production
ENV HOST 0.0.0.0
RUN mkdir -p /app
COPY . /app
WORKDIR /app
EXPOSE 3000
#If the environment in China build please open the following comments
#如果在中国环境下构建请把下面注释打开
#RUN npm config set registry https://registry.npm.taobao.org
RUN npm install
RUN npm run build
CMD ["npm", "start"]

言归正传 How to use？

在你的项目中新建一个Dockerfile文件写入最后Dockerfile上面文件

# build image
$ docker build -t nuxt-demo .

# serve at localhost:8080
$ docker run -dt -p 8080:3000 nuxt-p

note:

对于此教程，模拟构建思路，如果在操作过程中有什么问题的可以通过以下方式联系。

about me

author:
blog:https://shudong.wang/
github: wsdo