通过制作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查看一下镜像

相关推荐
万少4 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站6 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名8 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫9 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊9 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter9 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折9 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_9 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial9 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu10 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端