docker

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > Docker打包部署前端项目

前端项目容器化Docker打包部署方式详解

作者:言午日尧耳总

这篇文章主要为大家介绍了前端项目容器化Docker打包部署方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前端项目容器化(Docker)打包部署

BiliBili视频同步发布

新建vue项目

安装依赖并运行

# 使用vue脚手架创建项目
npm create vue@latest
# 进入项目(假设项目名为"xxc-web")
cd xxc-web
# 安装依赖
npm install
# 测试
npm run dev

手动打包部署(旧方式)

之后即可使用http://ip:port访问

容器化(Docker)打包部署

打包配置

文件内容如下:

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;
  }
}

文件内容如下:

# 第一阶段: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 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

以上就是前端项目容器化Docker打包部署方式详解的详细内容,更多关于前端项目容器化Docker打包部署的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文