docker部署vue項目

編寫Dockerfile

在項目根目錄新建名爲Dockerfile的文件, 並添加如下代碼:

# build stage
# 拉取最小體積的node環境容器, 並安裝cnpm (加快容器構建速度,npm比較慢)
FROM node:lts-alpine as build-stage
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org

# 進入容器的app目錄, 而後拷貝當前目錄(根目錄)的全部文件到容器的當前目錄中(/app)
WORKDIR /app
COPY . .

# 刪除vue環境配置文件(主要想經過容器的環境變量來達到不一樣的環境切換,以及爲了部署到阿里雲的容器服務或華爲雲的容器服務時, 經過配置項來配置相關的環境變量, 若是不須要可自行刪除如下這句代碼)
RUN rm -f .env.*

ENV VUE_APP_TEST_VALUE="My test Value"

#在容器內build
RUN cnpm run build


# production stage
# 最後經過nginx部署build出來的文件(/dist)
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

建立鏡像

編寫好Dockerfile後, 則可經過docker命令建立一個docker鏡像, 如下爲參考指令:

docker build --no-cache -t vue-docker:1.0 .

啓動容器

docker run -p 80:80 --name vue-docker1.0 vue-docker:1.0

附上demo地址:
https://gitee.com/mao-share/vue-docker.git