前端项目容器化(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