服务器部署—虚拟机安装nginx并部署web网页

news2024/11/23 10:09:25

该篇博客用于讲解Linux的Centos7发行版中如何通过Linux安装Nginx,然后将静态页面部署到Nginx中,通过浏览器访问。
非常适用于新手小白学习项目部署相关的知识。建议收藏!!!
需要大家提前准备好虚拟机和CentOS7操作系统。

目录

1、先上成品图

2、安装Nginx运行所需插件:

 gcc:gcc编译器用于编译编程语言。

安装截图:

zlib解压软件:

安装截图:​编辑

pcre、pcre-devel插件:

安装截图:​编辑

openssl插件:

安装截图:​编辑

3、安装Nginx

下载Nginx安装包:

通过命令ll查看本地会多一个文件:​编辑

解压压缩包:

解压后,通过命令ll查看,得到一个文件夹:​编辑

编译安装:

4、启动Nginx:

关闭防火墙,不然启动之后访问不了,关闭防火墙命令:

启动nginx(不要离开/usr/local/nginx/sbin/):

通过宿主机浏览器访问:

5、更改主页信息

找到nginx的index.html

将我前面准备好的一段代码,替换掉原本的代码:

再次在宿主机浏览器中搜索

到这里,我们自己的html页面就放进来了。

6、目录结构


1、先上成品图

2、安装Nginx运行所需插件:

  1.  gcc:gcc编译器用于编译编程语言。

    //通过gcc -v查看版本,如果有就不管【CentOS7是有的】
    gcc -v
    
    //如果没有gcc就通过下面的命令安装
    yum -y install gcc
    安装截图:

  2. zlib解压软件:

    zlib库是用于解压和压缩的。nginx下载下来是压缩包,需要解压。

    安装命令:
    yum install -y zlib zlib-devel
    安装截图:
  3. pcre、pcre-devel插件:

    pcre是正则表达式的库,nginx中http模块需要用到pcre解析正则表达式。
    安装命令:
    yum install -y pcre pcre-devel
    安装截图:
  4. openssl插件:

    网络通信加密插件。
    安装命令:
    yum install -y openssl openssl-devel
    安装截图:

3、安装Nginx

从官网下载压缩包,需要用到wget软件,CentOS7都自带有,如果没有的话,通过下面命令安装。

yum install wget
  1. 下载Nginx安装包:

    wget http://nginx.org/download/nginx-1.21.6.tar.gz 
    通过命令ll查看本地会多一个文件:
  2. 解压压缩包:

    tar -zxvf nginx-1.21.6.tar.gz
    解压后,通过命令ll查看,得到一个文件夹:
  3. 编译安装:

    ​​​​​​①、先进入到解压得到的nginx-1.21.6文件夹里面:
    cd nginx-1.21.6


    ②、编译nginx环境,使其之后的nginx就安装到/usr/local/nginx目录下:

    ③、继续执行命令:

    # 在当前目录下执行
    make & make install


    到这里,关于nginx已经安装好了,我们可以查看一下,多了些什么东西:




     

4、启动Nginx:

  1. 如果要启动Nginx,需要找到其启动命令,先进入到命令所在的文件夹:
    命令:
    cd /usr/local/nginx/sbin/

    nginx这个就是启动命令。
  2. 关闭防火墙,不然启动之后访问不了,关闭防火墙命令:
    systemctl stop firewalld.service
  3. 启动nginx(不要离开/usr/local/nginx/sbin/):
    ./nginx
  4. 通过宿主机浏览器访问:

5、更改主页信息

到这里,nginx已经安装并且启动好了,那么接下来我们可以将这个页面更改一番,在这里我提供了一段html代码。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片位置拖拽</title>
  <style>
    #main {
      display: flex;
      justify-content: center;
    }
 
    .img {
      width: 100px;
      user-select: none;
      height: 100px;
      background: no-repeat center center;
      background-size: cover;
    }
 
    .bg1 {
      background-image: url('https://cdn.pixabay.com/photo/2020/02/05/22/01/bush-4822500__480.jpg')
    }
 
    .bg2 {
      background-image: url('https://cdn.pixabay.com/photo/2022/01/24/13/51/temple-6963458__480.jpg')
    }
 
    .bg3 {
      background-image: url('https://cdn.pixabay.com/photo/2020/12/02/01/06/chipmunk-5795916__480.jpg')
    }
 
    .zw {
      background-color: #999;
      width: 100px;
      height: 100px;
      display: none;
    }
  </style>
</head>
 
<body>
  <div id="main">
    <span class="img bg1" data-index="0"></span>
    <span class="img bg2" data-index="1"></span>
    <span class="img bg3" data-index="2"></span>
    <span class="zw"></span>
  </div>
</body>
<script>
  const imgs = document.querySelectorAll('.img')
  const main = document.querySelector('#main')
  const zw = document.querySelector('.zw')
  const isMobile = navigator.userAgent.match(/Mobile/)
  let isDrag = false
  let index
  let py = {
    left: 0,
    top: 0
  }
  const move = (el, x, y) => {
    el.setAttribute('style', `pointer-events:none;position:absolute;left:${x}px;top:${y}px`)
  }
  document.addEventListener(isMobile ? 'touchstart' : 'mousedown', e => {
    isMobile && (e = e.touches[0])
    index = e.target.dataset.index
    if (index && !isDrag) {
      py.left = e.pageX - imgs[index].offsetLeft
      py.top = e.pageY - imgs[index].offsetTop
      zw.style.display = 'block'
      main.insertBefore(zw, imgs[index])
      move(imgs[index], e.pageX - py.left, e.pageY - py.top)
    }
    isDrag = true
  })
  document.addEventListener(isMobile ? 'touchmove' : 'mousemove', e => {
    isMobile && (e = e.touches[0])
    if (isDrag && index) {
      move(imgs[index], e.pageX - py.left, e.pageY - py.top)
    }
  })
  document.addEventListener(isMobile ? 'touchend' : 'mouseup', e => {
    isDrag = false
    zw.style.display = ''
    if (imgs[index]) {
      imgs[index].setAttribute('style', '')
      main.insertBefore(imgs[index], zw)
    }
  })
  imgs.forEach(v => {
    v.addEventListener(isMobile ? 'touchmove' : 'mouseenter', e => {
      isMobile && (e = e.touches[0])
      if (isDrag) {
        const list = [...main.children]
        const imgIndex = list.findIndex(el => v == el)
        const zwIndex = list.findIndex(el => zw == el)
        if (zwIndex < imgIndex) {
          main.insertBefore(v, zw)
        } else {
          main.insertBefore(zw, v)
        }
      }
    })
  })
</script>
 
</html>
  1. 找到nginx的index.html

    页面在:/usr/local/nginx/html/这个文件夹里面
    cd /usr/local/nginx/html/

  2. 将我前面准备好的一段代码,替换掉原本的代码:

    自己操作,删除,再粘贴
  3. 再次在宿主机浏览器中搜索

到这里,我们自己的html页面就放进来了。

6、目录结构

nginx安装完成后,nginx里面的目录结构如下:

重点目录和文件如下:

目录/文件说明
conf配置文件存放目录
conf/nginx.confnginx核心配置文件
html存放静态资源(html,css,js)
logs存放nginx日志
sbin/nginx二进制文件,用于启动/停止Nginx

nginx更多知识还需要更系统的学习,目前这个小demo就到这里了,bye~~~

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

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

相关文章

智慧公厕系统在办公楼卫生管理中的作用,高效、便捷、智能

在现代化的办公楼中&#xff0c;卫生管理是营造舒适、高效工作环境的重要环节。而智慧公厕系统的引入&#xff0c;正以其高效、便捷、智能的特点&#xff0c;为办公楼的卫生管理带来了革命性的变革。 一、智慧公厕系统首先展现出了令人瞩目的高效性。 传统的公厕管理往往依赖人…

2024年6月17日~2024年6月26日周报

一、前言 在上周主要完成了可变形卷积的学习的部署。 本周&#xff0c;结合前段时间的工作与闵老师的讨论&#xff0c;思考了接下来的一些尝试方向。本周重新在之前的网络上尝试添加可变形卷积v4&#xff0c;或者将可变形卷积v2修改为可变形卷积v4。另外&#xff0c;继续学习了…

LCR 068. 搜索插入位置

给定一个排序的整数数组 nums 和一个整数目标值 target &#xff0c;请在数组中找到 target &#xff0c;并返回其下标。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 思路&#xff1a; 常规的二分查找&am…

充电桩小程序:引领未来,携手共创绿色充电新纪元

着新能源汽车市场的迅猛增长&#xff0c;充电桩行业正迎来前所未有的发展机遇。然而&#xff0c;在这个充满竞争和机遇并存的时代&#xff0c;如何快速、高效地满足用户需求&#xff0c;成为充电桩行业老板们关注的焦点。为此&#xff0c;我们推出了全新的充电桩小程序&#xf…

记录跨度3年的SqlServer数据同步项目分析

目录 技术选型决策阶段 发布订阅 自定义开发 Datax Datax废除主外键关系和自增ID ER模型分组 废掉库表主外键 维度划分Datax任务 基于ID同步 基于TIME时间同步 基于全表ALL同步 废掉自增ID DataX废除主外键关系手动拷贝 手动拷贝 Datax任务分组触发器 Datax全表…

实践案例:使用Jetpack Navigation创建一个新闻应用

在这个实践案例中&#xff0c;我们将使用Jetpack Navigation创建一个简单的新闻应用。这个应用将包含以下功能&#xff1a; 新闻列表页面&#xff1a;显示一组新闻文章。新闻详情页面&#xff1a;显示选定新闻文章的详细信息。用户资料页面&#xff1a;显示用户的资料信息。 …

前端 Array.sort() 源码学习

源码地址 V8源码Array 710行开始为sort()相关 Array.sort()方法是那种排序呢&#xff1f; 去看源码主要是源于这个问题 // In-place QuickSort algorithm. // For short (length < 22) arrays, insertion sort is used for efficiency.源码中的第一句话就回答了我的问题…

Python第三方库GDAL 安装

安装GDAL的方式多种&#xff0c;包括pip、Anaconda、OSGeo4W等。笔者在安装过程中&#xff0c;唯独使用pip安装遇到问题。最终通过轮子文件&#xff08;.whl&#xff09;成功安装。 本文主要介绍如何下载和安装较新版本的GDAL轮子文件。 一、GDAL轮子文件下载 打开Github网站…

【Java Web】Element-plus组件库

目录 一、Element-plus组件库概述 二、Element-plus组件库基本用法 一、Element-plus组件库概述 Element-plus组件库是由饿了么团队基于Vue3框架编写的前端UI设计组件库。通俗点讲就是将用户页面设计所需的按钮、表格、导航栏等前端代码编写生成的组件元素都封装好了、用户在进…

40.设计HOOK引擎的好处

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 上一个内容&#xff1a;39.右键弹出菜单管理游戏列表 以 39.右键弹出菜单管理游戏列表 它的代码为基础进行修改 效果图&#xff1a; 实现步骤&#xff1a; 首…

elk对于集群实例的日志的整合-基于logstash采集日志

说明&#xff1a;基于logstash采集日志 环境&#xff1a; 物理机192.168.31.151 一.启动2个测试实例&#xff0c;每5-10s随机生成一条订单日志 实例一 包位置&#xff1a;/home/logtest/one/log-test-0.0.1-SNAPSHOT.jar 日志位置:/docker/elastic/logstash_ingest_data/l…

《2024年新生代妈妈真实孕育状态洞察报告》

专注于行业分析与市场研究的专业机构易观分析,正式发布了其最新研究成果——《2024年新生代妈妈真实孕育状态洞察报告》。该报告深入探讨了新生代妈妈在孕育过程中的实际需求与挑战,通过对母婴行业的市场规模、消费行为、用户触媒习惯、用户关怀以及特定品类场景的细致分析,揭示…

easyui的topjui前端框架使用指南

博主今天也是第一次点开easyui的商业搜权页面&#xff0c;之前虽然一直在使用easyui前端框架&#xff08;easyui是我最喜欢的前端ui框架&#xff09;&#xff0c;但是都是使用的免费版。 然后就发现了easyui的开发公司居然基于easyui开发出了一个新的前端框架&#xff0c;于是我…

PLM系统选购指南:哪款品牌最适合你?

在选购PLM&#xff08;Product Lifecycle Management&#xff09;系统时&#xff0c;选择最适合自己企业的品牌至关重要。以下是一份清晰的PLM系统选购指南&#xff0c;帮助您根据企业的具体需求选择最合适的品牌&#xff1a; 1、明确企业需求&#xff1a; 首先&#xff0c;明…

数学建模--lingo解决线性规划问题~~灵敏度分析的认识

目录 1.线性规划问题举隅 &#xff08;1&#xff09;问题介绍 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;灵敏度分析 &#xff08;4&#xff09;方法缺陷 &#xff08;5&#xff09;可行域&凸集 2.lingo的简单认识 &#xff08;1&#xff09;默认…

VSCode常用的一些插件

Chinese (Simplified) 汉语&#xff08;简体&#xff09;拓展包。 Auto Close Tag 可以自动增加xml/html的闭合标签。 CodeSnap 截图神器。截图效果在下面。 Dracula Official vscode一个很好看的主题。 Git Graph git管理工具。 GitHub Repositories 有了它&#xff0c;不…

C++02 变量和基本类型

基本类型 字、字节、bit、Byte之间的关系 字 word 字节 Byte 位 bit 1字 2字节 <---> 1word 2Byte 1字节 8位 <---> 1Byte 8bit 1Byte 8bits 1KB 1024Bytes 1MB 1024KB 1GB 1024MB #include <iostream> using namespace std; int main() {/*字符…

手把手教你打造高精度STM32数字时钟,超详细步骤解析

STM32数字时钟项目详解 1. 项目概述 STM32数字时钟是一个集成了时间显示、闹钟功能、温湿度检测等多功能于一体的小型电子设备。它利用STM32的实时时钟(RTC)功能作为核心,配合LCD显示屏、按键输入、温湿度传感器等外设,实现了一个功能丰富的数字时钟系统。 2. 硬件组成 STM…

腾讯云对象存储cors错误处理

最近将公司的域名进行了修改&#xff0c;同时将腾讯云的对象存储改成了https&#xff0c;为了安全嘛。然后上传软件包的时候发现上传软件就失败了。 在浏览器中打开该 HTML 文件&#xff0c;单击 Test CORS 发送请求后&#xff0c;出现以下错误&#xff0c;错误提示&#xff1…

【Java Web】PostMan业务接口测试工具

目录 一、PostMan概述 二、如何安装Postman 三、Postman的基本使用 一、PostMan概述 在生产环境中&#xff0c;一个项目在开发之前、前后端开发工程师通常需要商讨在前后端数据交互时需要采用什么样的规范格式&#xff0c;如&#xff1a;前端向后端发送请求的uri、请求和响…