使用Nginx发布前端源码

教程目录

  • 0x00 教程内容
  • 0x01 原理及实战
          • 1. 路径原理解析
          • 2. 更换主页
  • 0x02 发布前端项目
          • 1. 上传前端项目
          • 2. 修改Nginx配置文件
  • 0x03 校验效果
          • 1. 查看效果
  • 0xFF 总结

0x00 教程内容

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

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

0x01 原理及实战

1. 路径原理解析

a. 当我们在浏览器打开:http://47.104.178.131 的时候,可以看到Nginx的欢迎界面,在我们还没有装好Nginx的时候,其实是显示错误界面的。那么我们这个欢迎界面,也应该对应着一个html文件。
使用Nginx发布前端源码_第1张图片
b. 我们去找一下它在哪里
whereis nginx
在这里插入图片描述
我们的Nginx的路径为:/usr/local/nginx
进入之后,发现/usr/local/nginx/html里面有两个html文件,我们来看一下里面的内容(其实就是我们访问端口时的内容):
使用Nginx发布前端源码_第2张图片

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>
		邮箱:[email protected]
	div>
body>
html>

c. 重新刷新 http://47.104.178.131/ ,发现内容已经改变:
使用Nginx发布前端源码_第3张图片

0x02 发布前端项目

1. 上传前端项目

a. 上传你的前端项目到/usr/local/nginx/html,如图:
使用Nginx发布前端源码_第4张图片

2. 修改Nginx配置文件

a. 配置文件路径是(/usr/local/nginx/conf/nginx.conf):
使用Nginx发布前端源码_第5张图片
b. 修改默认的映射路径到snyPortal
vi nginx.conf
使用Nginx发布前端源码_第6张图片
c. 重启Nginx
sudo /usr/local/nginx/sbin/nginx -s reload

0x03 校验效果

1. 查看效果

a. 打开浏览器查看:
在这里插入图片描述

0xFF 总结

  1. 请一定要注意,/home/shaonaiyi/app/nginx-1.12.2是编译Nginx时的路径,不是Nginx安装后的路径,所以修改内容,不应该修改/home/shaonaiyi/app/nginx-1.12.2/html里面的内容,不然会报错的。
  2. 如果你的域名备案成功,则可以通过域名访问我们的网站了。备案教程:阿里云服务器域名备案。比如:我们直接访问:http://www.shaonaiyi.com,也一样可以得到结果。

作者简介:邵奈一
全栈工程师、市场洞察者、专栏编辑
| 公众号 | 微信 | 微博 | CSDN | 简书 |

福利:
邵奈一的技术博客导航
邵奈一 原创不易,如转载请标明出处。


你可能感兴趣的:(使用Nginx发布前端源码)