Docker 部署 Vue项目

准备条件

1. 首先需要一个Vue 的项目没有bug的
2. 需要一个Docker 环境

打包步骤

1. 前端项目的根目录下创建一个Dockerfile文件 里面写上Docker打包步骤

FROM node:16-alpine3.11 as build
WORKDIR /build
ADD package.json ./package.json
RUN npm config set registry https://registry.npm.taobao.org
RUN npm i -g yarn tyarn --force
RUN tyarn
COPY . .
RUN tyarn build
  
FROM nginx
WORKDIR /usr/share/nginx/html/
ADD default.conf /etc/nginx/conf.d/
COPY --from=build /build/dist .
EXPOSE 80

注意1

RUN npm config set registry https://registry.npm.taobao.org
RUN npm i -g yarn tyarn --force
RUN tyarn

这三段分别是: 设置 npm的 淘宝源 安装yarn tyarn ,如果不需要可以删掉,如果需要其他的比如pnpm 可以换成pnpm 执行安装依赖命令,如果是没有第二条.可以换成 npm i 注意2

RUN tyarn build

如果注意1没有安装yarn,只使用 npm 可以只从npm run build pnpm run build 要看packages.json 的打包命令是不是build ,如果不是需要更换命令

注意3

FROM nginx
WORKDIR /usr/share/nginx/html/
ADD default.conf /etc/nginx/conf.d/
COPY --from=build /build/dist .
EXPOSE 80

这一段代码意思是使用nginx来运行打包后的代码

expose 80 是nginx 默认的,一般不要修改,修改很麻烦.也是下面运行所使用的docker内部暴露端口

2. 创建一个default.conf 的Nginx配置文件 里面写上,记得改{后端api地址}

server {
    listen 80 default_server;
    server_name  localhost;
    root         /usr/share/nginx/html/;
    client_max_body_size 100m;
    # WebApi 转发
    location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://{后端api地址}/;
    }
  
  location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

注意这一段 这是反向代理api的接口避免CORS问题的 如果vue/vite config 里没有开启proxy选项一般就代表这一段是不需要.

  location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://{后端api地址};
    }

需要根据你调用的后端api不同情况填写不同内容 正常情况下调用api都有关键字api https://xx.a.com/api/..... {后端api地址} =>xxx.a.com/api/ 注意结尾/是必须的

3. 执行打包命令 在项目的跟目录下面执行

docker build -t webui:latest .

启动docker 构建一个名字是webui标签是latest 的镜像 最后的 . 不能少.代表从当前目录作为docker context 的根目录

webui 可以是任意的名字也可以使用/ 做多级的名字.比如adens/vue/web1 :latest 可以省略.默认就是:latest .可以用来做版本控制比如 :v1.1

如果dockerfile 文件不在当前的根目录也可以 -f 指定

docker build -f ./docker/Dockerfile -t adens/vue/web1:v1.1 .

启动docker镜像

打包成功后就可以启动查看了

docker run -it -p 8080:80 --rm --name 111 webui 

-p 8080:80 代表把本地的8080端口映射到docker 的80端口 --rm 代表关闭后删除容器 --name web1 指定webui的名称,不指定会自动创建名称 webui 就是你刚才打包的镜像

这时候打开浏览器访问 localhost:8080 就可以看到内容了