使用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:http://blog.shudong.wang/
github: wsdo