vue打Docker镜像动态获取IP-nginx做的web服务

简介: vue打Docker镜像动态获取IP-nginx做的web服务

.首先编写启动脚本 start.sh

#!/bin/sh
sed -i  's@<html@<html  VUE_APP_URL=' "$VUE_APP_URL"'@' /usr/share/nginx/html/index.html
 
nginx -g "daemon off ;"

2.打docker镜像的Dockerfile

Dockerfile
FROM nginx:1.17.6
COPY .dist /usr/share/nginx/html
COPY ./start.sh /app/
EXPOSE 8080
WORKDIR /app
ENTRYPOINT ["/app/start.sh"]

3.vue的main.js配置中设置

const  VUE_APP_URL = document.querySelector("html").getAttribute("VUE_APP_URL");
console.log(`${VUE_APP_URL }`);
console.log(VUE_APP_URL );
 
console.log(process.env.VUE_APP_URL )


相关文章
|
9月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
4086 4
|
12月前
|
关系型数据库 应用服务中间件 nginx
Docker一键安装中间件(RocketMq、Nginx、MySql、Minio、Jenkins、Redis)
本系列脚本提供RocketMQ、Nginx、MySQL、MinIO、Jenkins和Redis的Docker一键安装与配置方案,适用于快速部署微服务基础环境。
|
9月前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
431 5
|
自然语言处理 大数据 应用服务中间件
大数据-172 Elasticsearch 索引操作 与 IK 分词器 自定义停用词 Nginx 服务
大数据-172 Elasticsearch 索引操作 与 IK 分词器 自定义停用词 Nginx 服务
418 5
|
存储 应用服务中间件 nginx
在使用Nginx之后,如何在web应用中获取用户IP以及相关原理
但总的来说,通过理解网络通信的基础知识,了解http协议以及nginx的工作方式,我们已经能在大多数情况下准确地获取用户的真实IP地址了,在调试问题或者记录日志时会起到很大的帮助。
896 37
|
缓存 负载均衡 应用服务中间件
Nginx 实现一个端口代理多个前后端服务
【10月更文挑战第19天】Nginx 的强大功能不仅限于此,它还可以与其他技术和工具相结合,为我们的应用提供更强大的支持和保障。在不断发展的互联网时代,掌握 Nginx 的使用技巧将为我们的工作和生活带来更多的便利和效益。
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
1633 25
|
负载均衡 前端开发 JavaScript
Nginx 代理多服务
以上是 Nginx 代理多服务的几种常见方式,在实际应用中,可以根据具体的业务需求和系统架构选择合适的代理方式,并结合其他 Nginx 的功能和配置来优化和完善系统的性能和功能。
|
Docker 容器
docker nginx-proxy 添加自定义https网站
docker nginx-proxy 添加自定义https网站
264 4
|
应用服务中间件 网络安全 nginx
nginx作为web服务以及nginx.conf详解
nginx作为web服务以及nginx.conf详解

热门文章

最新文章