windows-docker-本地部署-前端

前置条件

  • docker已有
  • 需要打包的文件也已经写好了

打包镜像

ip地址修改

需要根据自身修改的文件

.env.local文件存放你前端访问的端口

172.24.240.1:这部分是自己电脑的ip
如何查看本机ip,使用IPV4的地址。

java 复制代码
#本地
#API_HOST_URL=http://172.24.240.1:8091

打包文件运行

  • 在打开终端上述文件目录下运行
java 复制代码
build.bat

build.bat文件内容

在这里插入图片描述

  • 或者直接在终端中运行docker build author/xxx-xxx-front-app:1.1 .
    author:对应你docker账户的名字
    xxx-xxx-front-app:打包是前端文件名字
    :1.1 .:版本号
java 复制代码
docker build --no-cache -t author/xxx-xxx-front-app:1.1 .

等待一会应该就可以上传好了

docker界面就会有

右边的三个点点击就有推送到dockerhub中

(主要你需要先申请docker账号,以及新建和你推送镜像相同的dockerhub)

本地部署

直接拉取镜像

镜像右边点击-pull就可以下拉镜像

yml文件执行拉取镜像

后端和前端执行需要一些docker镜像,需要他们在同一个文件夹下才可以运行

dev-ops文件夹下有:redis,rabbitmq等镜像

把所需要的镜像文件拉取到此文件夹下

docker-compose-app.yml 文件

java 复制代码
# 命令行 docker-compose -f docker-compose-app.yml up -d
service:
	big-market-front-app:
	    container_name: xxx-xxx-front-app
	    image: author/xxx-xxx-front-app:1.1
	    restart: always
	    networks:
	      - my-network
	    ports:
	      - 3000:3000
	    environment:
	      - API_HOST_URL=http://116.198.235.222:8091
	      - PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
	    healthcheck:
	      test: [ "CMD", "wget", "--spider", "-q", "http://0.0.0.0:3000/" ]
	      interval: 1m
	      timeout: 10s
	      retries: 3

networks:
  my-network:
    driver: bridge

dev-ops文件夹出现自己打包的镜像

运行镜像

上图右边的小三角

点击Ports就会跳转网页

查看docer日志:直接点击点击big-market-front-app

相关推荐
木木黄木木13 分钟前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
sukalot25 分钟前
Windows 图形显示驱动开发-WDDM 2.4功能-基于 IOMMU 的 GPU 隔离(二)
windows·驱动开发
郁大锤36 分钟前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi
TC139841 分钟前
docker 终端打不开rviz2界面,报错qt.qpa.xcb: could not connect to display
docker·容器
Tee xm1 小时前
清晰易懂的 Flutter 卸载和清理教程
linux·windows·flutter·macos
牛马小陈同学1 小时前
Kafka+Zookeeper从docker部署到spring boot使用完整教程
linux·spring boot·docker·zookeeper·kafka·prettyzoo·kafka-ui
HelloRevit1 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
蒋星熠2 小时前
在VMware下Hadoop分布式集群环境的配置--基于Yarn模式的一个Master节点、两个Slaver(Worker)节点的配置
大数据·linux·hadoop·分布式·ubuntu·docker
ohMyGod_1232 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day2 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc