快捷導(dǎo)航

Docker部署Nuxt.js項(xiàng)目的實(shí)現(xiàn)

更新時(shí)間：2021年02月01日 11:20:50 作者：ZeFeng Blog

這篇文章主要介紹了Docker部署Nuxt.js項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Docker官方文檔： https://docs.docker.com/

Docker 是一個(gè)開源的應(yīng)用容器引擎，讓開發(fā)者可以打包他們的應(yīng)用以及依賴包到一個(gè)可移植的鏡像中，然后發(fā)布到任何流行的 Linux或Windows 機(jī)器上，也可以實(shí)現(xiàn)虛擬化。容器是完全使用沙箱機(jī)制，相互之間不會(huì)有任何接口。

使用 docker 部署 nuxt.js 項(xiàng)目

1、構(gòu)建 node 鏡像

FROM node:alpine

為啥使用 alpine 版本？

相比于其他 Docker 鏡像，它的容量非常小，僅僅只有 5 MB 左右（對(duì)比 Ubuntu 系列鏡像接近 200 MB），且擁有非常友好的包管理機(jī)制。官方鏡像來自 docker-alpine 項(xiàng)目。目前 Docker 官方已開始推薦使用 Alpine 替代之前的 Ubuntu 做為基礎(chǔ)鏡像環(huán)境。這樣會(huì)帶來多個(gè)好處。包括鏡像下載速度加快，鏡像安全性提高，主機(jī)之間的切換更方便，占用更少磁盤空間等。

2、設(shè)置項(xiàng)目保存目錄

RUN mkdir -p /app/src

3、復(fù)制項(xiàng)目代碼到鏡像

COPY ./src /app/src

4、指定命令執(zhí)行的目錄

WORKDIR /app/src

5、設(shè)置 host

ENV HOST 0.0.0.0

6、執(zhí)行項(xiàng)目安裝及編譯

RUN npm install RUN npm run build RUN npm cache clean --force

7、設(shè)置外部訪問端口

EXPOSE 3000

8、執(zhí)行 nuxt 項(xiàng)目運(yùn)行命令

CMD ["npm", "start"]

完整的 Dockerfile 文件

FROM node:alpine

RUN mkdir -p /app/src
COPY ./src /app/src
WORKDIR /app/src

ENV HOST "0.0.0.0"

RUN sed -i "s/dl-cdn.alpinelinux.org/${ALPINE_REPOSITORIES}/g" /etc/apk/repositories

RUN apk add --no-cache make gcc g++ python

RUN npm install
RUN npm run build
RUN npm cache clean --force

RUN apk del make gcc g++ python

EXPOSE 3000
CMD ["npm", "start"]

當(dāng)在項(xiàng)目中使用 sass 或者 scss 時(shí)，需依賴 python 環(huán)境，所以需要安裝 python，當(dāng)然在編譯相關(guān)資源后，可以刪除相應(yīng)的依賴以減小鏡像體積。