Docker打包前端vue代码推送镜像到远程仓库

简介: Docker打包前端vue代码推送镜像到远程仓库 Docker打包前端vue代码推送镜像到远程仓库 业务场景:📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile📜 2.登陆自己远程仓库📒3.构建镜像🔖4.给镜像打tag📖5.推送镜像到远程仓库🖊️最后总结业务场景:需要将本地前端代码推送到远程镜像仓库📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile

Docker打包前端vue代码推送镜像到远程仓库  

Docker打包前端vue代码推送镜像到远程仓库  业务场景:📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile📜 2.登陆自己远程仓库📒3.构建镜像🔖4.给镜像打tag📖5.推送镜像到远程仓库🖊️最后总结

业务场景:

需要将本地前端代码推送到远程镜像仓库

📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile

FROM treehouses/pm2WORKDIR /wwwCOPY www/ /wwwRUN npm installEXPOSE 30000ENTRYPOINT ["pm2","start"]

FROM treehouses/pm2 根据treehouses/pm2构建镜像 如果是后端项目这里可以换成java:8

WORKDIR /www 表明工作目录

COPY www/ /www  将本地目录中www/ 复制到镜像的/www

RUN npm install 执行打包命令

EXPOSE 30000 暴露端口30000

ENTRYPOINT ["pm2","start"]  启动命令

ps: 这里是启动后端springboot项目的一个简单dockerfile

###指定java8环境镜像FROM java:8###复制文件到容器eureka.jarADD -eurekaserver.jar /eureka.jar###声明启动端口号EXPOSE 8100###配置容器启动后执行的命令ENTRYPOINT ["java","-jar","/eureka.jar"]

📜 2.登陆自己远程仓库

docker login --username=zhangsan       xxx.aliyuncs.com

username表示登陆用户名

xxx.aliyuncs.com表示远程仓库地址

登陆后输入密码 回车没有任何输出则表示成功

📒3.构建镜像

cd 到dockerfile目录

执行docker build -t qianduan .

则会生成镜像名称为xxx 版本号为latest的一个镜像

-t表示生成的镜像名称和版本号

🔖4.给镜像打tag

Docker images

命令格式:docker tag [镜像id]  registry.cn-hangzhou.aliyuncs.com/[镜像名称]:[镜像版本号]

docker tag 12123211 xxx.aliyuncs.com/test/qianduan

不加版本号则为最新版本

📖5.推送镜像到远程仓库

命令格式:docker push registry.cn-hangzhou.aliyuncs.com/[镜像名称]:[镜像版本号]

docker push xxx.aliyuncs.com/test/qianduan

觉得有用点个关注支持下吧,gzh->JavaNice

java Nice哥,只做原创

🖊️最后总结

🖲要熟练掌握技巧,一定多多坚持练习:骐骥一跃,不能十步;驽马十驾,功在不舍


目录
相关文章
|
1月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
25天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
32 1
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
36 1
|
1月前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
28 2
|
1月前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
37 2
|
1月前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
39 3
|
1月前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
88 1
|
1月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
1月前
|
缓存 监控 前端开发
前端性能优化:从代码到部署的全面策略
前端性能优化:从代码到部署的全面策略

热门文章

最新文章