Docker部署Vue项目的项目实践

由于本人对前端项目的部署不熟，所以萌生了使用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脚本完成镜像的构建和部署。步骤分为以下四步：

#!/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内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

标签 , ,

发表回复