通过制作docker镜像的方式在阿里云部署前端后台服务

前端Dockerfile文件的内容:

FROM nginx:版本,如果不指定,默认是latest

COPY dist/ /usr/share/nginx/html/dist

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 端口


前端sh脚本文件内容:

appName=项目名

tar -xvf dist.tar

tag=$(date "+%Y%m%d%H%M%S")

echo echo "version : $appName-v$tag"

docker build -t $appName:$tag .

docker tag $appName:$tag 仓库地址:$appName-v$tag

docker push 仓库地址:$appName-v$tag


后端Dockerfile文件内容:

# 构建镜像,执行命令
FROM jdk镜像:版本,如果不指定,默认是latest
ENV LANG=C.UTF-8 LC_ALL=C.UTF-8
`

时区问题`

RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone

# 字体
`

COPY fonts/simsun.ttc /usr/share/fonts/simsun.ttc`

VOLUME /tmp

COPY 文件名.jar /opt/

ENTRYPOINT ["java", "-jar", "/opt/文件名.jar"]


后端sh脚本文件内容:

#!/usr/bin/env bash

#启动脚本的时候,传递版号 sh *.sh V1
app_name='文件名'
app_dir=.
tag_name=$(date "+%Y%m%d%H%M%S")

# 删除镜像
echo "......删除镜像......"
images=(`docker images | grep ${app_name} | awk '{print $1,$2}'`)
idx=1
for((i=0;i<${#images[@]};i++))
do
if [ $(($idx % 2)) = 0 ];then
docker rmi "${images[i-1]}:${images[i]}"
echo "${images[i-1]}:${images[i]} 删除"
fi
((idx++))
done

# 创建镜像
echo "..... 创建镜像......."
echo "${app_name}:${tag_name}"
docker build -f ${app_dir}/Dockerfile -t "${app_name}:${tag_name}" .

# 获取创建完镜像的tag id
tag_id=`docker images | grep ${app_name} | awk '{print $3}'```
echo "tag=${tag_id}"``

# 推送到k8s云上
docker tag ${tag_id} 仓库地址:${app_name}${tag_name}
docker push 仓库地址:${app_name}${tag_name}

echo "创建镜像完成"


具体操作步骤:

将前后端各自的脚本文件放到对应的目录下去执行,这里有一个前提,需要有相应的docker镜像。

docker镜像的来源可以从公共仓库里面下载,不过涉及到访问外网。国内也有镜像,不同的公司也搭建了私服。可以通过命令将镜像打成tar包拷出来,再用命令导入到服务器上

打成tar包的命令如下:

docker save -o 文件名.tar nginx:版本号

导入tar包的命令如下:

docker load < 文件名.tar

导入完成后用docker images查看一下镜像

相关推荐
UIUV几秒前
微信小程序开发学习笔记:从架构到实战
前端·javascript·前端框架
程序猿_极客2 分钟前
JavaScript的Web APIs 入门到实战(day2):事件监听与交互实现,轻松实现网页交互效果(附练习巩固)
开发语言·前端·javascript·学习笔记·web apis 入门到实战
Mintopia20 分钟前
🚀 一文看懂 “Next.js 全栈 + 微服务 + GraphQL” 的整体样貌
前端·javascript·全栈
Mintopia23 分钟前
🧬 医疗Web场景下,AIGC的辅助诊断技术边界与伦理
前端·javascript·aigc
半桶水专家27 分钟前
父子组件通信详解
开发语言·前端·javascript
Watermelo61730 分钟前
从vw/h到clamp(),前端响应式设计的痛点与进化
前端·javascript·css·算法·css3·用户界面·用户体验
寻星探路34 分钟前
测试开发话题10---自动化测试常用函数(2)
java·前端·python
Moment35 分钟前
快到  2026  年了:为什么我们还在争论  CSS 和 Tailwind?
前端·javascript·css
Ryan ZX1 小时前
openEuler 22.03-Docker离线安装教程
运维·docker·容器
梵得儿SHI1 小时前
Vue 核心语法详解:模板语法中的绑定表达式与过滤器(附 Vue3 替代方案)
前端·javascript·vue.js·插值语法·vue模板语法·绑定表达式·过滤器机制