由于本人对前端项目的部署不熟，所以萌生了使用Docker部署Vue项目的想法。经过一番搜索借鉴，终于成功的把vue项目打包成Docker镜像并构建成容器运行起来的。其中几多辛苦特来记录一下。
编写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 "容器启动成功"IMAGE_NAME、PROJECT_NAME、PORT这三个变量根据自己的项目进行修改
结语
不得不说使用Docker部署项目还是挺方便的哈哈。
到此这篇关于Docker部署Vue项目的项目实践的文章就介绍到这了,更多相关Docker部署Vue内容请搜索aitechtogether.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持aitechtogether.com！
