前端项目容器化Docker打包部署方式详解
作者:言午日尧耳总
这篇文章主要为大家介绍了前端项目容器化Docker打包部署方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前端项目容器化(Docker)打包部署
- 新建一个vue项目
- 增加容器配置
- docker命令打包镜像,部署本机
新建vue项目
使用vue官方脚手架创建一个项目
- 下面的demo使用默认配置
安装依赖并运行
# 使用vue脚手架创建项目 npm create vue@latest # 进入项目(假设项目名为"xxc-web") cd xxc-web # 安装依赖 npm install # 测试 npm run dev
手动打包部署(旧方式)
单机部署方式通常使用"npm run build"打包成静态文件
- 通常打包后文件在项目根目录的"dist"目录下
- 将dist目录的文件上传服务器
- 配置nginx,将某域名/端口号指向该目录
之后即可使用http://ip:port访问
容器化(Docker)打包部署
打包配置
根目录新增"nginx.conf"文件
- 为了解决部分框架部署后的路由问题
- 如:该开始访问一切正常,但是使用浏览器刷新后,报错404
文件内容如下:
server { listen 80; listen [::]:80; server_name localhost; access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; # 新增下面这句,其他是默认nginx配置 # 解决部分前端框架的路由问题,在浏览器刷新报错404 try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
根目录新增"Dockerfile"文件
- 打包过程分为两个阶段
- 第一阶段:使用node镜像安装依赖并打包成静态文件
- 第二阶段:将静态文件放入nginx镜像,并修改配置
文件内容如下:
# 第一阶段:node镜像打包 FROM node:latest AS frontend-builder WORKDIR /build-app COPY . . RUN npm install RUN npm run build # 第二阶段:nginx打包 FROM nginx:latest EXPOSE 80 WORKDIR /app # 替换nginx配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 将第一阶段的静态文件复制到nginx中 RUN rm -rf /usr/share/nginx/html RUN mkdir /usr/share/nginx/html COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html # 运行 CMD ["nginx", "-g", "daemon off;"]
打包部署
使用docker命令打包
- 镜像名称为"xxc-web:v1"
- 将镜像上传到docker仓库或私有仓库(Harbor)
运行容器
# 打包镜像 docker build -t xxc-web:v1 . # 上传仓库 # docker login -u <用户名> -p <密码> <仓库地址> # docker push xxc-web:v1 # 运行 docker run --name xxc-web -dp 1234:80 xxc-web:v1
- 如下运行命令映射为1234端口,访问 http://localhost:1234
以上就是前端项目容器化Docker打包部署方式详解的详细内容,更多关于前端项目容器化Docker打包部署的资料请关注脚本之家其它相关文章!