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.hqwc.cn/news/144508.html

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

相关文章

Android学习之路(21) 进程间通信-AIDL与Servce基本使用

Service 与 Thread 和 进程 之间的关系 进程:应用程序在内存中分配的空间。(正在运行中的程序)线程:负责程序执行的单元,也称为执行路径。(需要线程来执行代码)。一个进程至少包含一条线程&…

看我为了水作业速通C++!

和java不太一样的一样的标题打个*&#xff0c;方便对比 基本架构* #include<iostream> using namespace std; int main() { system("pause"); return 0; } 打印* cout << "需要打印的内容" <<endl endl 是一个特殊的输出流控…

python 之 矩阵相关操作

文章目录 1. **创建矩阵**&#xff1a;2. **矩阵加法**&#xff1a;3. **矩阵乘法**&#xff1a;4. **矩阵转置**&#xff1a;5. **元素级操作**&#xff1a;6. **汇总统计**&#xff1a;7. **逻辑操作**&#xff1a; 理解你的需求&#xff0c;我将为每个功能写一个单独的代码块…

非关系型数据库-Redis

一、缓存概念 缓存是为了调节速度不一致的两个或多个不同的物质的速度&#xff0c;在中间对速度较慢的一方起到加速作用&#xff0c;比如CPU的一级、二级缓存是保存了CPU最近经常访问的数据&#xff0c;内存是保存CPU经常访问硬盘的数据&#xff0c;而且硬盘也有大小不一的缓存…

您账号或密码有误,请重新输入?

1、网站不让我进? 2、警告&#xff1a;声明未成年人不可轻易模仿&#xff01;可刑 3、MYSQL函数特性是如何被黑客利用的&#xff1f; --- SQL 注入原理&#xff1a; 账号登录场景&#xff1a; --- 数据库概述&#xff1a; --- MYSQL系统库(默认)&#xff1a; MYSQL数据…

5G学习笔记之5G频谱

参考&#xff1a;《5G NR通信标准》1. 5G频谱 1G和2G移动业务的频段主要在800MHz~900MHz&#xff0c;存在少数在更高或者更低频段&#xff1b;3G和4G的频段主要在450MHz ~ 6GHz&#xff1b;5G主要是410MHz ~ 6GHz&#xff0c;以及24GHz ~ 52GHz。 5G频谱跨度较大&#xff0c;可…

react antd实现upload上传文件前form校验,同时请求带data

最近的需求&#xff0c;两个下拉框是必填项&#xff0c;点击上传按钮&#xff0c;如果有下拉框没选要有提示&#xff0c;如图 如果直接使用antd的Upload组件&#xff0c;一点击文件选择的窗口就打开了&#xff0c;哪怕在Button里再加点击事件&#xff0c;也只是&#xff08;几乎…

PKU 概率论+数理统计 期中考复习总结

这里写目录标题 计算条件概率计算概率&#xff08;放回与不放回&#xff09;生成随机数算法Uniformity (test of frequency)1.Chi-Square test2.Kolmogorov-Sminov test Independence (test of autocorrelation)Runs test Acceptance-rejection methodmethod方法1&#xff1a;建…

「我的AIGC咒语库:分享和AI对话交流的秘诀——如何利用Prompt和AI进行高效交流?」

文章目录 每日一句正能量前言基础介绍什么是Prompt?什么是 Prompt Engineering&#xff1f;为什么需要 Prompt Engineering&#xff1f;如何进行 Prompt Engineering&#xff1f;Prompt的基本原则Prompt的编写模式AI 可以帮助程序员做什么&#xff1f;技术知识总结拆解任务阅读…

哈夫曼树、哈夫曼编码/解码

哈夫曼树 哈夫曼树的基本介绍 哈夫曼树构建步骤图解 创建哈夫曼树代码实现 """ 创建哈夫曼树 """ class EleNode:""" 节点类 """def __init__(self, value: int):self.value valueself.left None # 指向左子…

【C++】哈希应用——海量数据面试题

哈希应用——海量数据面试题 一、位图应用1、给定100亿个整数&#xff0c;设计算法找到只出现一次的整数&#xff1f;2、给两个文件&#xff0c;分别有100亿个整数&#xff0c;我们只有1G内存&#xff0c;如何找到两个文件交集&#xff1f;&#xff08;1&#xff09;用一个位图…

Write-Ahead Log(PostgreSQL 14 Internals翻译版)

日志 如果发生停电、操作系统错误或数据库服务器崩溃等故障&#xff0c;RAM中的所有内容都将丢失&#xff1b;只有写入磁盘的数据才会被保留。要在故障后启动服务器&#xff0c;必须恢复数据一致性。如果磁盘本身已损坏&#xff0c;则必须通过备份恢复来解决相同的问题。 理论…