使用Nginx发布前端源码

简介: 使用Nginx发布前端源码

0x00 教程内容


  1. 原理及实战
  2. 发布前端项目

前提:

要先装好Nginx,请参考教程:Nginx的安装与配置(Centos7、云服务器版)


0x01 原理及实战


1. 路径原理解析

a. 当我们在浏览器打开:http://47.104.178.131 的时候,可以看到Nginx的欢迎界面,在我们还没有装好Nginx的时候,其实是显示错误界面的。那么我们这个欢迎界面,也应该对应着一个html文件。

image.png


b. 我们去找一下它在哪里

whereis nginx

image.png


我们的Nginx的路径为:/usr/local/nginx

进入之后,发现/usr/local/nginx/html里面有两个html文件,我们来看一下里面的内容(其实就是我们访问端口时的内容):


微信图片_20220618194832.png


2. 更换主页

a. 由上面的步骤可知,我们访问浏览器 http://47.104.178.131 的时候,其实就是去找/usr/local/nginx/html路径的index.html文件的,显然,我们只要替换掉这个index.html文件就可以显示我们的内容了

b. 新建另一个index.html文件

这里我先备份一下原来的index.html文件:

mv index.html index.html_bak

再编辑一个自己的index.html文件:

vi index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
  作者简介:
    <a href="https://blog.csdn.net/shaock2018/article/details/91184254" class="header-nav-item"  target="_blank">邵奈一</a>
  </div>
  全栈工程师、市场洞察者、创业者、专栏编辑
  <div>
    <a href="https://blog.csdn.net/shaock2018/article/details/89349249" class="header-nav-item"  target="_blank">邵奈一的技术博客导航</a>
  </div>
  <div id="wechat">
    微信联系:shaonaiyi
    <br>
    邮箱:shaonaiyi@163.com
  </div>
</body>
</html>


c. 重新刷新 http://47.104.178.131/ ,发现内容已经改变:

image.png


0x02 发布前端项目


1. 上传前端项目

a. 上传你的前端项目到/usr/local/nginx/html,如图:


image.png


2. 修改Nginx配置文件

a. 配置文件路径是(/usr/local/nginx/conf/nginx.conf):

微信图片_20220618194931.png

b. 修改默认的映射路径到snyPortal

vi nginx.conf


微信图片_20220618194944.png


c. 重启Nginx

sudo /usr/local/nginx/sbin/nginx -s reload


0x03 校验效果


1. 查看效果

a. 打开浏览器查看:

微信图片_20220618195000.png

image.png


0xFF 总结


请一定要注意,/home/shaonaiyi/app/nginx-1.12.2是编译Nginx时的路径,不是Nginx安装后的路径,所以修改内容,不应该修改/home/shaonaiyi/app/nginx-1.12.2/html里面的内容,不然会报错的。

如果你的域名备案成功,则可以通过域名访问我们的网站了。备案教程:阿里云服务器域名备案。比如:我们直接访问:http://www.shaonaiyi.com,也一样可以得到结果。


相关文章
|
12天前
|
应用服务中间件 Linux 网络安全
CentOS 7.4源码编译nginx1.12 并且隐藏nginx的版本
CentOS 7.4源码编译nginx1.12 并且隐藏nginx的版本
19 0
|
12天前
|
存储 开发框架 前端开发
前端框架EXT.NET Dotnet 3.5开发的实验室信息管理系统(LIMS)成品源码 B/S架构
发展历史:实验室信息管理系统(LIMS),就是指通过计算机网络技术对实验的各种信息进行管理的计算机软、硬件系统。也就是将计算机网络技术与现代的管理思想有机结合,利用数据处理技术、海量数据存储技术、宽带传输网络技术、自动化仪器分析技术,来对实验室的信息管理和质量控制等进行全方位管理的计算机软、硬件系统,以满足实验室管理上的各种目标(计划、控制、执行)。
29 1
|
12天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
190 0
|
12天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
73 0
|
9天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
9天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效(1),头条前端面试节奏
10款精美的web前端源码的特效(1),头条前端面试节奏
|
12天前
|
前端开发 JavaScript 安全
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
37 0
|
12天前
|
存储 安全 前端开发
PHP医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理
医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流程闭环管理要求,满足等级医院评审细则要求,大力提高医院不良事件上报的效率,保障事件分析的准确性,促进医疗安全的提高,避免同类事件再次发生,改善整个医院医疗安全,从而实现医院安全医疗的目标。
29 3
|
12天前
|
算法 应用服务中间件 nginx
NGINX下的红黑树源码详解(附 流程图和GIF)(1)
之前博主稍微讲解了下红黑树的原理,那么在这篇博客博主想要把红黑树讲的更加的透彻,以便于更多的人了解红黑树 (本博客会更加详细的介绍之前的博客没介绍到的,所以各位看官不同再回去翻看博主之前那篇红黑树的原理讲解了。)
44 3
|
12天前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
41 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)