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,一经查实,立即删除!

相关文章

Hive知识梳理(好文)

Hive是建立在 Hadoop 上的数据仓库基础构架。可以将SQL查询转换为MapReduce的job在Hadoop集群上执行。 元数据 Hive元数据信息存储在Hive MetaStore中,或者mysql中。 分隔符 Hive默认的分格符有三种,分别是(Ctrl/A)、&#xff0…

Spring 域对象共享数据

1、使用ServletAPI向request域对象共享数据 首页 <a th:href"{/testServletAPI}">测testServletAPI</a><br>success.html <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head>&…

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

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

2.IDEA的安装使用指南

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

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)

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

【vue3】keep-alive缓存组件

include定义要缓存的组件名。注意&#xff0c;不是引入的别称&#xff0c;就是组件的文件名exclude定义不缓存的组件名。一样的&#xff0c;这里是组件的文件名max最多缓存多少个组件。如果组件个数大于max&#xff0c;会自动剔除掉不常用的使用keep-alive后会增加两个生命周期…

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

目录 一、创建项目 1、先创建一个空项目 2、设置项目SDK等 二、创建父模块 选择springboot 1、创建父模块parent 2、删除多余文件&#xff0c;只保留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…

算法通关村第十关青铜挑战——什么是快速排序

大家好&#xff0c;我是怒码少年小码。 快速排序 选取pivot中心轴将大于pivot中心轴的元素放在中心轴的右边将小于pivot中心轴的元素放在中心轴的左边重复上述过程 实现方式一&#xff1a; void quickSort(int arr[], int left, int right) {if (left < right) {int pi…

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

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

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

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

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

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

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

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

【面试HOT100】链表树

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

【Golang | reflect】利用反射实现方法的调用

引言 go语言中&#xff0c;如果某个数据类型实现了一系列的方法&#xff0c;如何批量去执行呢&#xff0c;这时候就可以利用反射里的func (v Value) Call(in []Value) []Value 方法。 // Call calls the function v with the input arguments in. // For example, if len(in)…

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

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

【Spring Cloud】openfeign负载均衡方案(和lb发展历史)

文章目录 版本1&#xff1a;原始loadBalancerClient方案版本2&#xff1a;ribbon-loadbalancer方案版本3&#xff1a;openfeign方案&#xff08;即**方案2openfeign版本**&#xff09; 本文描述了Spring Cloud微服务中&#xff0c;各个服务间调用的负载均衡方案的升级历史&…

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

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