Docker容器化部署前端vue静态服务

vue前端页面容器化

vue create fe-demo
> version 2
> Dependence Manager npm
  • Dockerfile
# build stage
FROM node:10 as build-stage

LABEL owner=marionxue@qq.com

# 创建一个工作目录
WORKDIR /app

# 拷贝所有的文件到工作目录下(非源码需要忽略的文件 .dockerignore 中配置)
COPY . .

RUN yarn install --registry=https://registry.npm.taobao.org

RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

运行容器

docker build -t fe-demo:v1 -f ./dockerfile .
docker run -d --name fe-demo-v1 -p 10000:80 fe-demo:v1

vue webpack

sudo npm i -g @vue/cli-init
vue init webpack fe-demo1
  • dockerfile
FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install --registry=https://registry.npm.taobao.org

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

构建容器以及测试

docker build -t fe-demo1:v1 -f Dockerfile .
docker run -d -p 8080:8080 fe-demo1:v1
云原生生态圈版权声明:
作者:云原生生态圈
文章标题: Docker容器化部署前端vue静态服务
链接:https://devopsman.cn/archives/47
来源:云原生生态圈
投稿联系: cloud.native@qq.com 文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录