Docker部署Vue项目的项目实践

server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    location / {
        root /web;
        index index.html;
        try_files $uri $uri/ /index.html;
        add_header Cache-Control no-store;
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

FROM node:18.16.1 as builder
WORKDIR /web
COPY . .
RUN npm install --registry=https://registry.npm.taobao.org --no-package-lock --no-save
RUN npm run build
FROM nginx:alpine
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone
WORKDIR /web
# 替换nginx配置文件
COPY  --from=builder /web/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY  --from=builder /web/dist /web
EXPOSE 80

#!/bin/sh  
# 镜像名称
IMAGE_NAME=image-name
# 项目名称也是容器名称
PROJECT_NAME=ProjectName
# 宿主机端口号
PORT=8080
# 找到正在运行的容器停止删除
CONTAINER_NAME=$(docker ps -aq --filter name=^/$PROJECT_NAME$)  
if [[ -n "$CONTAINER_NAME" ]]; then  
docker rm -f $CONTAINER_NAME;  
echo "$PROJECT_NAME 停止并删除成功....."  
fi  
sleep 3s
# 找到并删除之前的镜像
ARG2=$(docker images -q --filter reference=$IMAGE_NAME)   
if [ -n "$ARG2" ]; then  
docker rmi -f $ARG2  
echo "$IMAGE_NAME镜像删除成功......"  
fi  
echo "构建新镜像"   
docker build -t $IMAGE_NAME .  
echo "镜像构建成功, 开始构建容器并启动"   
docker run -d --name $PROJECT_NAME -p $PORT:80 $IMAGE_NAME
echo "容器启动成功"