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

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

• 新建一个vue项目
• 增加容器配置
• docker命令打包镜像，部署本机

• BiliBili视频同步发布

  新建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)

• 运行容器

  • 如下运行命令映射为1234端口，访问 http://localhost:1234

  # 打包镜像
  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