docker

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > Docker部署Vue

Docker部署Vue项目的项目实践

作者:不可食用盐

本文主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文