使用docker持续构建vue应用

Docker作为轻量化的虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker、nginx来部署一个Vue.js的前端应用，供参考。

Dockerfile

FROM node:16-alpine as deps
WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .

RUN npm run build

# nginx
FROM nginx:stable-alpine as production-stage

RUN rm -rf /usr/share/nginx/html/*

COPY --from=deps /app/nginx.conf /etc/nginx/nginx.conf
COPY --from=deps /app/dist /usr/share/nginx/html

# 上传静态文件到阿里云OSS，ossutil文档：https://help.aliyun.com/document_detail/50451.html
ENV OSSUTIL_VERSION 1.7.13
RUN wget http://gosspublic.alicdn.com/ossutil/${OSSUTIL_VERSION}/ossutil64 \
    && chmod 755 ossutil64

RUN ./ossutil64 --access-key-id your_asscsskeyID --access-key-secret your_accesskey_secret -e your_oss_endpoint sync /usr/share/nginx/html/static/ oss://your_oss_url -f --delete

RUN rm -rf /usr/share/nginx/html/static

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

容器内nginx.conf

nginx.conf

http {
    server {
        listen 80;
        root /usr/share/nginx/html;

        location / {
            try_files $uri /index.html;
        }
    }
}

运行容器

docker build -t vue_app .
docker run -p 3001:80 --detach --name vue_app --rm vue_app

nginx.conf

        location ^~ /api/{            
            proxy_pass http://127.0.0.1:3000/;
        }

        location ~^/app_.*/ {
            try_files $uri @vue_app; 
        }

        location @vue_app {
            proxy_pass http://127.0.0.1:3001;
        }