前端自动化部署【四】: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}

5.

6. 回到浏览器访问阿里云公网IP:1234,已经可以看到页面了

注意nginx内部默认端口是80,我们在DOCKERFILE里面的配置1234,然后在shell里面启动命令式docker run -d --name $CONTAINER -p $PORT:80 ${image_name}:${tag},也就是服务器端口1234指向了nginx内部的80,

7. 初次发版(访问失败就去Jenkins所在的服务器安全组添加1234,前面有讲)

8.最后一步,回到vscode,随便修改内容,然后push代码,等待Jenkins构建完成 ,刷新页面

9.累死累活,终于看见页面,完结撒花🌺

相关推荐
老大白菜19 分钟前
Windows 11 安装 Dify 完整指南 非docker环境
windows·docker·容器
gqkmiss27 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
VinciYan4 小时前
基于Jenkins+Docker的自动化部署实践——整合Git与Python脚本实现远程部署
python·ubuntu·docker·自动化·jenkins·.net·运维开发
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
tntlbb4 小时前
Ubuntu20.4 VPN+Docker代理配置
运维·ubuntu·docker·容器
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python