前端自动化部署【四】：docker构建发布

基本的Linux、docker操作不再详细介绍
水平有限，如有不足见谅

1. vscode打开前端项目，在根目录创建Dockerfile

js 复制代码

# build stage
# 开启一个node:18容器命名production-stage
FROM node:18 as build-stage
# 创建一个工作目录
WORKDIR /app
# 拷贝项目内容到app目录
COPY . .
# 安装依赖
RUN npm install --registry=https://registry.npm.taobao.org
# 构建dist
RUN npm run build

# production stage
# 开启一个nginx容器命名production-stage
FROM nginx as production-stage
# 将打包的文件拷贝到nginx对应静态文件目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 暴露端口80
EXPOSE 80
# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

2.添加.dockerignore文件，这样执行COPY命令会忽略没用的问价比如node_modules等

shell 复制代码

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

# Logs
logs
*.log

# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn

3.接着配置shell命令所需要的参数，一共四个：容器名称、容器端口、镜像名字、镜像版本

4.

bash 复制代码

#!/bin/bash
CONTAINER=${container_name}
PORT=${port}
# CONTAINER是否存在，若存在，若不存在，说明首次发版
if [[ -n $(docker ps -q -f "name=^${CONTAINER}$") ]];then
    #说明是更新发版，需要停止容器，删除容器
    echo "container exist"
    docker stop $CONTAINER
    docker rm $CONTAINER
else
	echo "container not exist"
fi
#构建镜像
 docker build --no-cache -t ${image_name}:${tag} .
#启动镜像生成容器
 docker run -d --name $CONTAINER -p $PORT:80 ${image_name}:${tag}