教程目录
- 0x00 教程内容
- 0x01 原理及实战
- 1. 路径原理解析
- 2. 更换主页
- 0x02 发布前端项目
- 1. 上传前端项目
- 2. 修改Nginx配置文件
- 0x03 校验效果
- 1. 查看效果
- 0xFF 总结
0x00 教程内容
- 原理及实战
- 发布前端项目
前提：
要先装好Nginx，请参考教程：Nginx的安装与配置（Centos7、云服务器版）
0x01 原理及实战
1. 路径原理解析
a. 当我们在浏览器打开：http://47.104.178.131 的时候，可以看到Nginx的欢迎界面，在我们还没有装好Nginx的时候，其实是显示错误界面的。那么我们这个欢迎界面，也应该对应着一个html文件。
b. 我们去找一下它在哪里
whereis nginx
我们的Nginx的路径为：/usr/local/nginx
进入之后，发现/usr/local/nginx/html里面有两个html文件，我们来看一下里面的内容（其实就是我们访问端口时的内容）：
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="javascript:void(0)/article/details/91184254" class="header-nav-item" target="_blank">邵奈一</a>
</div>
全栈工程师、市场洞察者、创业者、专栏编辑
<div>
<a href="javascript:void(0)/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/ ，发现内容已经改变：
0x02 发布前端项目
1. 上传前端项目
a. 上传你的前端项目到/usr/local/nginx/html，如图：
2. 修改Nginx配置文件
a. 配置文件路径是（/usr/local/nginx/conf/nginx.conf）：
b. 修改默认的映射路径到snyPortal
vi nginx.conf
c. 重启Nginx
sudo /usr/local/nginx/sbin/nginx -s reload
0x03 校验效果
1. 查看效果
a. 打开浏览器查看：
0xFF 总结
- 请一定要注意，
/home/shaonaiyi/app/nginx-1.12.2是编译Nginx时的路径，不是Nginx安装后的路径，所以修改内容，不应该修改/home/shaonaiyi/app/nginx-1.12.2/html里面的内容，不然会报错的。 - 如果你的域名备案成功，则可以通过域名访问我们的网站了。备案教程：阿里云服务器域名备案。比如：我们直接访问：http://www.shaonaiyi.com，也一样可以得到结果。
全栈工程师、市场洞察者、专栏编辑
微博 | | 简书 |
福利：
邵奈一的技术博客导航
邵奈一 原创不易，如转载请标明出处。
