3分钟搞懂阿里云服务器安装Nginx并配置静态访问页面

news2025/1/24 14:53:56

📢📢📢📣📣📣

哈喽!大家好,我是【Bug 终结者,【CSDN新星创作者】🏆,阿里云技术博主🏆,51CTO人气博主🏆,INfoQ写作专家🏆

一位上进心十足,拥有极强学习力的【Java领域博主】😜😜😜

🏅【Bug 终结者】博客的领域是【面向后端技术】的学习,未来会持续更新更多的【后端技术】以及【学习心得】。 偶尔会分享些前端基础知识,会更新实战项目,面向企业级开发应用
🏅 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】,欢迎关注【Bug 终结者】💞💞💞


❤️❤️❤️ 感谢各位大可爱小可爱! ❤️❤️❤️

在这里插入图片描述

文章目录

  • 一、什么是Nginx?
  • 二、Nginx有什么好处?
    • ⌚服务器
    • ⌚代码
    • ⏰代理服务器
    • ⏰负载均衡与反向代理
  • 三、申请阿里云服务器
  • 四、使用Putty连接阿里云服务器并安装Nginx
    • ♻️连接服务器
  • 五、FileZilla连接服务器
    • ⏳安装Filezilla
    • ♻️连接服务器
  • 六、Linux下安装Nginx
    • ❇️配置80端口并关闭Linux防火墙
    • ✳️测试
  • 七、配置静态html至阿里云服务器并访问
    • ⚠️在阿里云服务器新建路径
    • ⏰使用Filezilla上传文件至阿里云服务器
    • ⚡配置Nginx访问路径
    • ✅测试
  • ⛽Nginx相关命令
  • ♨️往期精彩热文回顾
  • ⛵小结

一、什么是Nginx?

百度百科

Nginx (engine x) 是一个高性能HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的

其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

二、Nginx有什么好处?

Nginx 可以在大多数 Unix Linux OS 上编译运行,并有 Windows 移植版。 Nginx 的1.20.0稳定版已经于2021年4月20日发布,一般情况下,对于新建站点,建议使用最新稳定版作为生产版本,已有站点的升级急迫性不高。Nginx 的源代码使用 2-clause BSD-like license。

Nginx 是一个很强大的高性能Web和反向代理服务,它具有很多非常优越的特性:

在连接高并发的情况下,Nginx是Apache服务不错的替代品:Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达 50,000 个并发连接数的响应,感谢Nginx为我们选择了 epoll and kqueue作为开发模型。

⌚服务器

Nginx作为负载均衡服务:Nginx 既可以在内部直接支持 Rails 和 PHP 程序对外进行服务,也可以支持作为 HTTP代理服务对外进行服务。Nginx采用C进行编写,不论是系统资源开销还是CPU使用效率都比 Perlbal 要好很多。

处理静态文件,索引文件以及自动索引缓冲。

无缓存的反向代理加速,简单的负载均衡和容错。

⌚代码

Nginx代码完全用C语言从头写成,已经移植到许多体系结构和操作系统,包括:Linux、FreeBSD、Solaris、[Mac OS X](https://baike.baidu.com/item/Mac OS X)、AIX以及[Microsoft Windows](https://baike.baidu.com/item/Microsoft Windows)。Nginx有自己的函数库,并且除了zlib、PCRE和OpenSSL之外,标准模块只使用系统C库函数。而且,如果不需要或者考虑到潜在的授权冲突,可以不使用这些第三方库。

⏰代理服务器

作为邮件代理服务:Nginx 同时也是一个非常优秀的邮件代理服务(最早开发这个产品的目的之一也是作为邮件代理服务器),Last.fm 描述了成功并且美妙的使用经验。

Nginx 是一个安装非常的简单、配置文件非常简洁(还能够支持perl语法)、Bug非常少的服务。Nginx 启动特别容易,并且几乎可以做到7*24不间断运行,即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级。

⏰负载均衡与反向代理

实际生产环境中,反向代理服务器代理的目标服务器可能不止一个。比如开发好的某个应用部署在一台 Tomcat 服务器上,而 Tomcat 的并发上限不优化情况下,默认只有两百左右,这时候为了解决高并发的问题,就只能选择更替服务器或者搭建多台服务器通过反向代理与负载均衡的技术解决并发问题。

负载均衡(Load Balance)是由多台服务器以对称的方式组成一个服务器集群,每台服务器都具有等价的地位,都可以单独对外提供服务而无须其他服务器的辅助。经过某种负载分管技术,将外部发送来的中央请求均匀分配到对称结构中的某一台服务器上。

反向代理(Reverse Proxy):与正向代理正好相反,反向代理中的代理服务器,代理的是服务器那端。代理服务器接收客户端请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给客户端,此时代理服务器对外表现为一个反向代理服务器的角色。

​ 正向代理,就是代理服务器代理了客户端,去和目标服务器进行交互。现实生活中的场景:黄牛买票。

反向代理,就是代理服务器代理了目标服务器,去和客户端进行交互。现实生活中的场景:房屋中介。

总结:Nginx 是一个高性能的 HTTP 和反向代理服务器,可以扛得住 5W 左右的并发。Ngnix 可以做反向代理服务器,还可以做静态资源服务器。

三、申请阿里云服务器

如何免费使用阿里云服务器?【一篇文章教会你,真香】

四、使用Putty连接阿里云服务器并安装Nginx

上面文章已经安装了putty,具体可见:如何免费使用阿里云服务器?【一篇文章教会你,真香】

♻️连接服务器

打开putty输入ip地址进入linux系统

在这里插入图片描述

连接成功~

五、FileZilla连接服务器

⏳安装Filezilla

Filezilla官网

在这里插入图片描述

直接无脑式下一步安装即可

♻️连接服务器

打开filezilla进行连接

在这里插入图片描述

输入站点信息

在这里插入图片描述

连接成功~

在这里插入图片描述

六、Linux下安装Nginx

安装之前先检测下linux系统有没有nginx,如果有则删除

whereis nginx

在/usr/local下新建nginx目录

进入目录
cd /usr/local
新建nginx文件夹
mkdir nginx

进入nginx

cd /usr/local/nginx

输入ll 命令查看该目录下的所有文件

ll

肯定是空文件夹,下面我们就安装nginx

打开nginx官网下载nginx

nginx官方下载

在这里插入图片描述

我们选择稳定版本1.20.2

下载完毕使用Filezilla将文件上传至nginx

左侧为本地文件,右侧为Linux文件,双击上传至Linux文件夹下

上传成功后我们去Linux下找到该文件并解压

cd /usr/local/nginx

解压文件

tar -xvf nginx-1.10.2.tar.gz

解压成功后查看解压后的文件

在这里插入图片描述

进入文件

cd /nginx-1.10.2

在这里插入图片描述
一键安装4个依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

执行命令 考虑到后续安装ssl证书 添加两个模块

./configure --with-http_stub_status_module --with-http_ssl_module

执行make命令

//执行make命令
make
//执行make install命令
make install

进入sbin目录

cd /usr/local/nginx/sbin

在这里插入图片描述

重新加载配置文件并优雅的启动

 加载文件
 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
 
 重新加载并启动Nginx
 ./nginx -s reload

查看是否启动成功

 ps -ef | grep nginx

在这里插入图片描述

启动成功

❇️配置80端口并关闭Linux防火墙

查询80端口是否启动

firewall-cmd --query-port=80/tcp

在这里插入图片描述

可以看到,未启动

关闭Linux防火墙

systemctl status firewalld

在这里插入图片描述

添加80端口

firewall-cmd --zone=public --add-port=80/tcp --permanent

重新加载防火墙配置

firewall-cmd --reload

查询所有开启的端口

netstat -tlnp

在这里插入图片描述

查询防火墙是否启动

firewall-cmd --state

由于是阿里云服务器,阿里云服务器默认无80端口,我们需要去阿里云服务器控制台手动添加80端口

打开实例 —> 进入安全组,手动添加80端口

在这里插入图片描述

✳️测试

浏览器输入ip地址回车查询

在这里插入图片描述

启动成功~

七、配置静态html至阿里云服务器并访问

⚠️在阿里云服务器新建路径

回到root根路径下进行创建路径

cd /
创建工作路径
mkdir work

cd /work

创建静态文件夹,上传到此路径下
mkdir statics

创建静态文件夹成功

⏰使用Filezilla上传文件至阿里云服务器

将文件夹上传至 /work/statics 路径下

在这里插入图片描述

上传成功~

⚡配置Nginx访问路径

回到跟目录下,复制静态资源的地址

cd /work/statis/mi

在这里插入图片描述

复制路径粘贴至nginx.conf下

进入linux输入路径进入nginx下

cd /usr/local/nginx/

进入nginx的配置文件目录

cd /conf

在这里插入图片描述

进入conf下的nginx.conf配置文件

vim nginx.conf

按下 i 进行编辑文件

配置如下地址

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /work/statics/mi; # 你的静态资源路径
        index  index.html index.htm;# 访问的文件为html, htm
    }

保存操作

esc取消编辑

:wq退出并保存

重新加载nginx配置文件并启动

 加载文件
 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
 
 重新加载并启动Nginx
 ./nginx -s reload

启动操作要在 /sbin 目录下完成

✅测试

输入ip进行访问

在这里插入图片描述

完美访问~

⛽Nginx相关命令

./nginx -s reload # 重新加载nginx配置文件并重启nginx

./nginx # 启动nginx

./nginx -s stop # 强制停止nginx

./nginx -s reopen # 重启nginx

./nginx -s quit # 优雅的停止nginx

nginx -v # 查看nginx的版本

killall nginx # 杀死所有nginx进程

ps -ef | grep nginx # 查看nginx是否启动

♨️往期精彩热文回顾

✈️ 3分钟带你搞懂Vue双向绑定原理及问题剖析

✈️ Netty进阶 – WebSocket长连接开发

✈️ Netty进阶 – 非阻塞网络编程 实现群聊+私聊+心跳检测系统

✈️ Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】

✈️ Java面向对象 — 吃货联盟订餐系统(完整版)

✈️ 一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

⛵小结

以上就是【Bug 终结者】对3分钟搞懂如何在阿里云服务器安装Nginx并配置静态访问页面简单的概述,Nginx是一个高性能的负载均衡和反向代理的服务器,有极高的性能,可同时承受5w+并发量,性能极高,所以,采用Nginx可大大提供系统的性能,同时Nginx是目前最火的高性能服务器,推荐使用!

如果这篇【文章】有帮助到你,希望可以给【Bug 终结者】点个赞👍,创作不易,如果有对【后端技术】、【前端领域】感兴趣的小可爱,也欢迎关注❤️❤️❤️ 【Bug 终结者】❤️❤️❤️,我将会给你带来巨大的【收获与惊喜】💝💝💝!

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

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

相关文章

怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)

该案例为了实现效果采用的是随机生成数据,比较适用于偏向展示效果的静态页面如门户网站的首页、登录页等等。颜色样式自调。 需要注意在有些项目中仪表盘可能无法正常显示,这是因为你在项目中引入的 echarts 版本太低,需要引入新版本 echarts…

一个简单的springboot+Vue前后端框架搭建

前言 根据网上的一些教程试着搭建了一个简单的前后端分离的用户管理系统。该系统使用Vue框架编写前端代码,Springboot编写后端代码,Mysql作为数据库存储系统的数据。本文着重介绍整个项目的搭建流程以及附加一些在搭建过程的想法和注意事项。 一、Vue及…

【vue+router】解决路由重复警告:[vue-router] Duplicate named routes definition

vue页面动态添加路由,但加载页面会报警告: [vue-router] Duplicate named routes definition: { name: "xxx", path: "xxx" }这个问题解释为:路由命名重复 网上有一些大神剔除原有路由的做法: 1、古墩古墩 …

vue中computed的详细讲解

vue中computed的详细讲解1.定义2.用法3.computed的响应式依赖(缓存)4.应用场景1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性…

Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录[TOC](文章目录)前言一、props是什么?使用规则二、父传子 props实现步骤代码实现效果展示二.子传父 $emit实现步骤代码实现效果展示三.兄弟传值 EventBus实现步骤代码实现效果展示总结前言 Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆…

CSS - 浮动布局(float)

目录 标准布局 标准流 浮动与浮动流,及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题:标准流父级容器高度塌陷 清除浮动 浮动布局 margin负值 标准布局 CSS将所有的元素都当成盒子,CSS布局其实就是如何堆放盒子。 在说浮动布局…

【玩转CSS】学成在线(文末素材源码自取)

🔥一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去🎶 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 🦄 …

vue监听缓存数据(localStorage) 中值的更新

2个vue组件之间数据同步,可以通过监听localStorage数据变化,来改变数据的值。 方法:可以重写localStorage的setItem方法,当调用setItem方法设置新值的时候,会new Event(setItemEvent) 用window.dispatchEvent()这个…

vue 项目兼容 IE 浏览器

前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置 因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置 可以根据自己的 vue-cli 版…

手摸手带你玩转Vue3——Vue2升级Vue3

今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本。 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路,至于淘汰过时只是…

前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗,以及已有样式的覆盖

vue3使用element-plus实现登录/注册页面登录/注册页面组件预览添加忘记密码弹窗预览已有样式的修改1.字体大小2.router-link默认样式登录/注册页面组件 vue3 的登录和注册页面 目前只有框架和函数框架, 根据具体需要填充, 已有功能: 1.没有勾选同意使用手册, 登录和注册按钮是…

后端返回各种图片形式在前端的转换及展示

一、 接口返回的图片显示如下所示:(在控制台看的)返回的是这个图片(二进制) 可是,在 打印的时候,返回的却是 出现问题的原因的axios 默认返回的是 json 文本形式,二进制图片数据被强…

TS复习-----TS中的函数

目录 一、ts函数的定义 二、ts中定义函数传参 1.函数传参方法 2.可选参数 3.默认参数 4.剩余参数 函数重载 一、ts函数的定义 函数是一种特殊的对象,可以被调用。TS 里的函数和原生,ES 6 里的函数差不太多,只是多了一些其他功能。 //…

HTML入门学习笔记+详细案例

✨HTML入门学习笔记详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩&#x1f9…

实现H5和小程序之间相互跳转

功能描述&#xff1a; 1、 当点击理赔服务的时候&#xff0c;跳转到小程序页面 2、 当点击返回的时候&#xff0c;从小程序跳回H5页面&#xff08;内嵌H5以及关闭小程序&#xff09; 功能1&#xff1a;H5跳转小程序 vue中实现步骤 在 template 标签中写html <wx-open-lau…

【Maven】maven安装、IDEA创建maven的web项目、添加依赖、集成Tomcat

学习目录前言maven简介maven的下载与安装优化配置参数1.修改本地仓库路径2.设置阿里云私服镜像3.指定JDK版本IDEA创建第一个maven的web项目IDEA集成TomcatHello java&#xff01;前言 朋友们在写后端的过程中&#xff0c;遇到功能复杂的业务时需要导入不同的jar包&#xff0c;…

Logging system failed to initialize using configuration from ‘classpathlogbacklogback-spring.xml‘

2021-12-31&#xff1a; 项目在Windows系统上可以正常运行,然而移到Mac系统上运行出现一下报错!! 据报错信息显示,初始化“logback-spring.xml”失败,监测到“Logback”配置出错,非法的声明异常, 创建“[/apps/logs/sns_error.log]”的父目录失败… 主要原因是初始化配置文…

[暑假]Vue生命周期-笔记

什么是生命周期? 生命周期: 又名: 生命周期回调函数, 生命周期函数, 生命周期钩子. 所谓的生命周期函数, 就是Vue在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改, 但是函数的具体内容是程序员根据需求编写的 生命周期函数中的 this 指向是 vm 或 组件…

CSS样式:渐变色圆角边框

目录预期效果解决方法1.两层元素&#xff1a;外层渐变背景圆角内边距&#xff0c;里层圆角背景色2.伪元素&#xff1a;background-clip属性伪元素定位元素本身背景&#xff08;以伪元素背景色做边框&#xff09;3.单层元素&#xff1a; background-clipbackground-iamgebackgro…

PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)

一、 官网下载pdf.js &#xff1a;Getting Started 注意&#xff1a; 这俩包 都不支持ie&#xff0c;因为用的是es6&#xff0c;ie解析不出来 下完以后引进去。下面为省事 找几个市面上常用的方法&#xff1a; 1、文件流转base64的 这是在自己的js请求里面 //PDFdata 是a…