Ubuntu系统下使用docker容器配置nginx并部署前端项目

1.下载 Nginx 镜像

命令 描述

docker pull nginx	下载最新版 Nginx 镜像`  :

2. 创建要挂载的宿主机目录

启动前需要先创建 Nginx 外部挂载的配置文件( /home/nginx/conf/nginx.conf)
之所以要先创建 , 是因为 Nginx 本身容器只存在 / etc/nginx 目录 , 本身就不创建 nginx.conf 文件
当服务器和容器都不存在 nginx.conf 文件时, 执行启动命令的时候 docker 会将 nginx.conf 作为目录创建 , 这并不是我们想要的结果 。

> mkdir -p /home/nginx/conf
> 
> mkdir -p /home/nginx/log
> 
> mkdir -p /home/nginx/html

3.容器中的 nginx.conf 文件和 conf.d 文件夹复制到宿主机

# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/nginx/

此时会发现宿主机(也就是本机电脑)上的/home/nginx/conf,/home/nginx/log,/home/nginx/html这三个文件夹下已经有容器内的配置文件了

4、创建 Nginx 容器并运行

#停止容器
docker stop nginx
# 删除该容器
docker rm nginx

5.启动容器,并正式挂载对应文件

docker run \
-p 80:80 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx

然后基础配置已经完成,在地址栏输入localhost:80端口测试一下,表示已经成功安

在这里插入图片描述

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

现在开始配置静态资源路径,保证能够代理到我们想要的静态页面

1.先把我们打包好的前端项目文件(sky)放到指定的文件夹目录下,这里我放到了 本机的/home/nginx/html文件下,对应容器里的/usr/share/nginx/html/sky路径

本机:

  • home
    –nginx
    – html
    —sky

容器内:

  • usr
  • –share
    –nginx
    – html
    —sky

2.然后在/home/nginx/conf/conf.d的

defalult.conf

这个默认配置文件中配置自定义静态资源路径,一定要在默认里配置,我试了一下只在nginx.conf文件里配置是不行的

server {listen       80;server_name  localhost;location / {#这里指的是自己前端项目存放路径(容器里的路径,不是本机)root   /usr/share/nginx/html/sky;index  index.html index.htm;}

每次更改配置文件一定要重启docker里的nginx服务
配置完成之后在地址栏输入localhost:80端口可访问到我们自己项目登录页面

在这里插入图片描述

3.配置反向代理来跟后端tomcat服务器相连接,来保证登录进入系统,同样在default.conf文件里配置,注意下面的地址不能写localhost,如果写localhost指的是容器里的本机地址,下面地址要换成宿主机,也就是现在本机的IP地址(默认后端服务器运行在8080端口下)

# 反向代理,处理管理端发送的请求location /api/ {proxy_pass   http://192.168.1.102:8080/admin/;#proxy_pass   http://webservers/admin/;}

每次更改配置文件一定要重启docker里的nginx服务

5.启动后端服务器

在这里插入图片描述

6.点击前台页面登录按钮

在这里插入图片描述
在这里插入图片描述

成功登录进入系统,表示前后端联调成功,项目部署完毕。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 13以下系统,使用iOS QQ 登录 SDK 崩溃问题

最近用iPhone 6p 系统:12.5.4 调用QQ三方登录,出现崩溃到初始化QQ SDK的位置 在询问了QQ官方客服后,得到了答复,可以放弃治疗了

2.IDEA的安装使用指南

学习Java的第二步应该是从IDEA下手,这篇博文介绍了它的安装及使用,希望大家看完后可以独立安装 ~ 文章目录 一、下载安装包二、安装 IDEA三、IDEA 初步上手 一、下载安装包 安装包可以从官网下载,也可以直接私信我拿取。这里主要介绍如何在官…

Swingbench 压力测试(超详细)

目录 前提需要有配置好的oracle哦 1、环境准备 2、安装Swingbench 3、造数据 4、压测 前提需要有配置好的oracle哦 1、环境准备 启动监听 lsnrctl start 启动数据库 sqlplus / as sysdba startup 创建表 CREATE TABLESPACE soe DATAFILE /u01/app/oracle/oradata/or…

2.卷积神经网络(CNN)

一句话引入: 如果我们要做图像识别,用的是一个200x200的图片,那么BP神经网络的输入层就需要40000个神经元,因为是全连接,所以整个BP神经网络的参数量就是160亿个,显然不能这样来训练网络,所以我…

【java】【重构一】分模块开发设计实战

目录 一、创建项目 1、先创建一个空项目 2、设置项目SDK等 二、创建父模块 选择springboot 1、创建父模块parent 2、删除多余文件,只保留pom.xml 3、修改pom.xml 4、将部分公共依赖加入到pom 三、创建实体类子模块entity 1、创建实体类子模块entity 2、…

Jprofiler V14中文使用文档

JProfiler介绍 什么是JProfiler? JProfiler是一个用于分析运行JVM内部情况的专业工具。 在开发中你可以使用它,用于质量保证,也可以解决你的生产系统遇到的问题。 JProfiler处理四个主要问题: 方法调用 这通常被称为"CPU分析"。方法调用可以通过不同的方式进行测…

C++中的继承(超详细)

C中的继承 1.继承的概念及定义1.1继承的概念1.2 继承定义1.2.1 定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 2.基类和派生类对象赋值转换3.继承中的作用域4.派生类的默认成员函数5.继承与友元6.继承与静态成员7.继承的总结和反思 1.继承的概念及定义 1…

新兴网络安全威胁:数字防御新格局

根据Check Point Research (CPR)的数据,今年上半年犯罪活动大幅增加,第二季度全球每周网络攻击激增 8%,这创下了两年来的最高成交量。 勒索软件和黑客行为等传统威胁已经演变,犯罪团伙不断调整其方法和工具来渗透和影响世界各地的…

c语言练习93:环形链表的约瑟夫问题

环形链表的约瑟夫问题 环形链表的约瑟夫问题_牛客题霸_牛客网 描述 编号为 1 到 n 的 n 个人围成一圈。从编号为 1 的人开始报数,报到 m 的人离开。 下一个人继续从 1 开始报数。 n-1 轮结束以后,只剩下一个人,问最后留下的这个人编号是…

粘包和半包问题及解决办法

粘包问题是指数据在传输时,在一条消息中读取到了另一条消息的部分数据,这种现象就叫做粘包。 半包问题是指数据在传输时,接收端只收到了部分数据,而非完整的数据,就叫做半包。 产生粘包和半包问题原因: …

Error: GlobalConfigUtils setMetaData Fail Cause:java.lang.NullPointerException

文章目录 1、在开发中会出现这样的错误。2、其次,再看其他错误: 1、在开发中会出现这样的错误。 完整错误:Caused by: com.baomidou.mybatisplus.core.exceptions.MybatisPlusException: Error: GlobalConfigUtils setMetaData Fail ! Cause…

【面试HOT100】链表树

系列综述: 💞目的:本系列是个人整理为了秋招面试的,整理期间苛求每个知识点,平衡理解简易度与深入程度。 🥰来源:材料主要源于LeetCodeHot100进行的,每个知识点的修正和深入主要参考…

python自动化测试框架unittest与pytest的区别

有使用过unittest单元测试框架,再使用pytest单元测试框架,就可以明显感觉到pytest比unittest真的简洁、方便很多。 unittest与pytest的区别: 主要从用例编写规则、用例的前置和后置、参数化、断言、用例执行、失败重运行和报告这几个方面比…

vue使用pdf 导出当前页面,(jspdf, html2canvas )

需要安装两个插件 npm install html2canvas jspdfyarn add html2canvas jspdf<div class"app-container" id"pdfPage"><!--这个放你需要导出的内容--> </div><el-button size"mini" click"onExportPdf">导出…

记录一次线下渗透电气照明系统(分析与实战)

项目地址:https://github.com/MartinxMax/S-Clustr 注意 本次行动未造成任何设备损坏,并在道德允许范围内测试 >ethical hacking< 发现过程 在路途中,发现一个未锁的配电柜,身为一个电工自然免不了好奇心(非专业人士请勿模仿,操作不当的话220V人就直了) 根据照片,简…

springBoot--web--http缓存机制测试

springBoot--web--http缓存机制测试 前言1、多端内容适配基于请求头内容协商&#xff08;默认开启&#xff09;基于请求参数内容协商&#xff08;需要开启&#xff09; 2、默认返回json数据3、设置返回xml数据导入jackson-dataformat-xml包在类文件中添加注解 JacksonXmlRootEl…

设计模式截图记录

设计模式截图记录

普通二维码跳转微信小程序实战

简介 服务端springboot项目,前端基于uniapp的微信小程序,要求扫描二维码之后进入到小程序指定页面,下面记录一下实现过程以及过程中遇到的问题. 实现过程 下面是成功跳转的配置截图: 首先说下二维码规则,这个地方需要填写扫描二维码之后打开的地址,这个地址在我的项目里…

idea热加载,JRebel 插件是目前最好用的热加载插件,它支持 IDEA Ultimate 旗舰版、Community 社区版

1.如何安装 ① 点击 https://plugins.jetbrains.com/plugin/4441-jrebel-and-xrebel/versions 地址&#xff0c;下载 2022.4.1 版本。如下图所示&#xff1a; ② 打开 [Preference -> Plugins] 菜单&#xff0c;点击「Install Plugin from Disk…」按钮&#xff0c;选择刚下…

腾讯云创建了jenkins容器,但无法访问

1、首先&#xff0c;查看本机能不能ping通你的腾讯云服务器 如果ping的通那就下一步 2、查看腾讯云服务器的防火墙关了没&#xff0c;没关关掉、 firewall-cmd --state not running 3、那就在云服务器的控制台开放端口