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