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