前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用docker和nginx部署前端项目,并且访问本地java网关gateway服务

用docker和nginx部署前端项目,并且访问本地java网关gateway服务

作者头像
人人都是码农
发布于 2023-11-17 03:16:39
发布于 2023-11-17 03:16:39
1.5K00
代码可运行
举报
运行总次数:0
代码可运行

需求背景:本地开发 java 微服务项目,但是拿到的对应的web前端项目只有打包编译过后的 dist 目录里的静态资源(里面只有一个index.html和一些编译过后的 js、css文件),前端接口需要先访问到 java 的网关服务商,然后网关里再做转发。

因为没有前端源码,也不能像正常开发中的前端项目一样,我们可以随便修改代理访问任意服务地址,而且只能通过 nginx 之类的服务器实现部署访问和代理接口地址。

解决步骤

通过在本地安装docker来运行nginx服务器

一、安装 docker

直接去docker官网下载安装好docker,windows、mac都有对应的版本

二、拉取 nginx 镜像

直接拉取最新版本的nginx

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
docker pull nginx

三、添加 docker-compose 配置文件

直接利用docker-compose来启动容器,就不需要自己手动一行一行来敲命令了。在前端静态资源目录里新建 docker-compose.yml 文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
version: "3"
services:
  nginx:
    image: nginx
    ports:
        - "8801:8801" # 前端项目访问端口(宿主机:容器内)
    volumes: # 数据卷目录映射(宿主机:容器内)
        - ./nginx.conf:/etc/nginx/nginx.conf # 配置文件
        - ./:/usr/share/nginx/html  # 项目html文件
        - ./log:/var/log/nginx  # 日志文件(方便排查问题,不要也可以)

四、添加 nginx 配置文件

在前端静态资源目录里新建 nginx.conf 文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    upstream app-gateway { # 负载均衡
        server host.docker.internal:51601; # 网关服务的地址和端口
    }
    server {
        listen 8801;
        location / {
            root /usr/share/nginx/html;
            index index.html;
        }

        location ~/app/(.*) {
            proxy_pass http://app-gateway/$1;
            proxy_set_header HOST $host; # 不改变源请求头的值
            proxy_pass_request_body on; # 开启获取请求体
            proxy_pass_request_headers on; # 开启获取请求头
            proxy_set_header X-Real-IP $remote_addr; # 记录真实发出请求的客户端IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 记录代理信息
        }
    }
}

注意 nginx 里的前端目录/usr/share/nginx/html和配置文件/etc/nginx/nginx.conf,在上面第三步里已经通过 docker 的数据卷 volumns 挂载到宿主机目录里了。

还有就是因为前端项目是运行在 docker 容器里的,但是前端接口是要访问宿主机上的网关服务,这就涉及到 docker 容器和外部宿主机通信的问题,所以上面的网关地址不能写 localhost 或 127.0.0.1(这实际是在访问docker内的本地服务),而是要写成真实的 ip,可以通过 ipconfig 或 ifconfig(mac、linux系统)命令查看。

不过上面用命令获取到的这个本机ip地址是可能会变的,所以最好的方式是直接写成 host.docker.internal,这个就指代宿主机的真实ip,注意低版本的docker不支持这个。

五、运行前端服务

直接在前端静态资源目录里输入命令:docker-compose up,运行成功了,就可以在本地浏览器里访问前端和后端网关服务了:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-08-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 秘密菜单 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
docker-compose部署django+nginx+mysql项目
一、项目结构 [root@mail docker-feiyu]# tree `-- dokcer-feiyu |-- docker-compose.yml |-- nginx | |-- Dockerfile | `-- nginx.conf |-- User |-- Dockerfile |-- manage.py |-- requirements.txt |-- static |-- users |-- db.sqlite3 |-- gunicorn.conf |-- media |-- start.sh |-- templates `-- User 二、nginx部分 1、先编写Dockerfile [root@mail nginx]# vi Dockerfile
菲宇
2019/06/12
2.4K0
docker-compose是个好东西,越用越香
前文演示了在单一容器中部署 Nginx和ASP.NET Core WebApp, 正在前文评论区某大牛指出的,容器化部署 nginx+ASP.NET Core 有更符合实战的部署选择:多容器独立部署。
有态度的马甲
2020/05/26
2.4K0
docker-compose是个好东西,越用越香
【Linux系列】Docker启动Nginx配置动静分离
最近接了个小需求,将服务和前端资源实现分离,很早之前就使用过 nginx 做动静分离,不同的是,这一次使用的是在 docker 环境下,配置方面没有多大区别,主要是启动 nginx 和 nginx 的挂载目录需要注意下,下面就开始吧!
框架师
2022/03/08
2.1K0
【Linux系列】Docker启动Nginx配置动静分离
从零开始 - Docker部署前后端分离项目(三)
整个项目文件,里面有两个文件夹,nginx_docker用于存放前后端静态文件,XZAndroidPlatform是整个django项目文件。
梦无矶小仔
2022/08/22
2.1K0
从零开始 - Docker部署前后端分离项目(三)
使用docker搭建Django框架与Nginx多域名配置
在命令行进入/code/docker/django目录,执行 docker-compose build构建django镜像到本地,完成会返回success
用户2475223
2019/12/17
2K0
使用docker搭建Django框架与Nginx多域名配置
通过 docker 高效学习 nginx 配置,并附全部配置文件
本篇文章以前端的视角,介绍下 nginx 的常见配置,并通过 docker 的方式学习 nginx,这保证所有示例配置都能正常运行。
山月
2022/11/02
1.8K0
通过 docker 高效学习 nginx 配置,并附全部配置文件
【前端部署附录一】写给前端的 nginx 配置指南
大家好,我是山月,这是我最近新开的专栏:「前端部署系列」。包括 Docker、CICD 等内容,大纲图示如下:
山月
2022/11/02
2.1K0
【前端部署附录一】写给前端的 nginx 配置指南
腾讯云轻量应用服务器使用docker搭建轻量devops
手上闲置了一台腾讯云轻量应用服务器,最近打算用docker部署一套轻量化的devops流程,用于测试自己的个人项目。
4O4
2023/11/08
1.1K0
「实战篇」开源项目docker化运维部署-前端java部署(八)
PS:前后端部署基本是一样的都是按照思路,先启动多个容器,然后建立2个负载,负载内安装keepalived做热备。重点是想好端口。但是说实话,这是平常练习和个人项目,如果是多台机器,就不能这么搞了,下次一起通过docker swarm的网络方式让多台机器。
IT架构圈
2019/07/08
4910
「实战篇」开源项目docker化运维部署-前端java部署(八)
教你使用docker部署淘宝rap2服务
什么是rap2 先来说说起因,在上一个星期的分享会上,谈到前后端联调上,有同事提到了rap2,特意去了解了一下,觉得使用这个东西来进行前后端的接口联调来真是太方便了,对比我们之前公司内部开发的API
糊糊糊糊糊了
2018/06/07
3.9K2
【前端部署附录二】写给前端的 nginx 配置指南
大家好,我是山月,这是我最近新开的专栏:「前端部署系列」。包括 Docker、CICD 等内容,大纲图示如下:
山月
2022/11/02
1.3K0
【前端部署附录二】写给前端的 nginx 配置指南
Docker快速入门到项目部署
run 就是子命令。docker下面有很多子命令,run是其中一个。创建并运行一个容器。
用户11288958
2025/01/17
2800
Docker快速入门到项目部署
【前端部署第三篇】通过 docker 学习 nginx 配置,及基于 nginx 部署最简前端项目
大家好,我是山月,这是我最近新开的专栏:「前端部署系列」。包括 Docker、CICD 等内容,大纲图示如下:
山月
2022/05/23
1.3K0
【前端部署第三篇】通过 docker 学习 nginx 配置,及基于 nginx 部署最简前端项目
Doker部署前后端分离项目
**docker-ce 为社区免费版本。稍等片刻,docker 即可安装成功。 **
程序员Leo
2023/08/07
7480
Doker部署前后端分离项目
前端er须知的Nginx技巧
Nginx 对于大多数开发者来说不算陌生,企业团队用它来搭建请求网关,我们私下用它 “科学上网”(价值观警告)。但对于前端 er 来说,平日里开发大多时候都只是专注于业务,根本不需要也没机会涉及到 Nginx 这一块的内容,也就导致我们也对它的了解少之甚少。随着 serverless 孕育普及,越来越多的人相信,不需要掌握任何运维知识,也能简单快速地实现自己的技术 idea。
桃翁
2019/12/06
5580
前端er须知的Nginx技巧
如何使用Docker来实现Nginx的负载均衡和反向代理
随着互联网应用规模不断扩大,原有的单一服务器已经无法满足高并发和高可用性的要求。在这样的背景下,负载均衡和反向代理成为了互联网应用部署的必选方案。而Docker作为一个轻量级的容器技术,也为负载均衡和反向代理的部署提供了便捷的解决方案。
网络技术联盟站
2023/06/05
2K0
轻量应用服务器实践:Nginx 安装指南
通过轻量应用服务器,我们可以实现多种用途,比如搭建个人网站或博客、创建云盘服务、构建私有聊天系统,或用于学习 Linux 系统操作等,其中,静态服务器的安装与管理也是常见需求之一。本文将具体介绍如何在轻量应用服务器上安装 Nginx 服务。
陈明勇
2024/11/11
3270
05、docker安装nginx
天蝎座的程序媛
2023/10/17
1.8K0
Docker+Nginx打包部署前后端分离项目
最近做了一个前后端分离的通用权限管理系统,今天想用自己的服务器部署下,本地部署测试是没问题的,但是部署在服务器上还是出现了许多小插曲,这里大概记录一下吧。
别团等shy哥发育
2023/02/25
2.6K0
Docker+Nginx打包部署前后端分离项目
结合 Docker,快速掌握 Nginx 2 大核心用法
搜索 nginx(这一步需要科学上网,因为要访问 hub.docker.com 这个网站),点击 run:
神说要有光zxg
2023/08/29
4060
结合 Docker,快速掌握 Nginx  2 大核心用法
推荐阅读
相关推荐
docker-compose部署django+nginx+mysql项目
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档