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

starkwang

使用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

WechatIMG17.png

阅读 14.9k

西树教育
关注西树教育「[链接]」,每天进步一点。

从事开发多年,前端、后端(go、Python、php)、服务架构都有涉猎,经历过大公司、创业公司,擅长前端及...

7k 声望
907 粉丝
0 条评论
你知道吗?

从事开发多年,前端、后端(go、Python、php)、服务架构都有涉猎,经历过大公司、创业公司,擅长前端及...

7k 声望
907 粉丝
宣传栏