Docker部署Vue项目的项目实践

编写nginx配置

由于在项目打包之后需要使用nginx进行部署，所以需要编写一个nginx配置文件。

在项目跟目录下创建nginx文件夹，并在该文件夹下创建default.conf文件，default.conf中的内容如下：

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;
}
}

编写Dockerfile

编写Dockerfile以便构建该项目的镜像。在Dockerfile中使用分层构建的方式，第一层用来打包构建项目，第二层基于第一层打包的项目文件构建最终镜像。

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

基于分层构建的功能有一个保护敏感配置文件的思路, 即构建一个基础镜像，将一些重要的配置文件放到基础镜像中，在构建容器的时候再将这些配置文件复制到容器,这样可以一定程度的保护配置文件中敏感信息的安全

使用shell脚本完成镜像的构建和部署

使用shell脚本完成镜像的构建和部署。步骤分为以下四步：

找到该项目对应的正在运行的容器，将之停止并删除
删除该项目之前版本的Docker镜像
根据当前代码构建镜像
根据刚才构建的新镜像构建并启动容器

#!/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 \”容器启动成功\”