给前端同事的服务器部署教程

在上班期间，我发现，很多前端都不太会部署项目到服务器上，或者是说，后端不会部署前端，在前端同事的要求下写了这一篇比较啰嗦的教程。

1.下载finalshell：http://www.hostbuf.com/
2.
3.连接服务器
4.
依次点击1、2步（如果是WindowsServer服务器，选择远程桌面连接，此篇不再赘述WindowsServer的部署步骤）
5.
名称自定义、主机为服务器IP地址，端口为服务器连接端口，默认为22
用户名、密码就是登录的用户名与密码，输入之后点击 ‘连接’
6.进入服务器页面

6.输入命令find / -name 'nginx'

会查找出当前服务器所以路径下的'nginx'路径
如：我的在/usr/local/nginx下
7.你可以点击下方的可视化界面进入，也可以输入命令：cd /usr/local/nginx 进入到目录

8.进入目录后界面如下

html文件夹里存放的是前端的页面，conf文件夹里存放的是nginx的配置文件，sbin文件夹里是nginx的启动程序
9.进入conf文件夹里配置nginx

双击nginx.conf打开
10.
这里就不细讲具体的nginx的各种参数与通配符了，着重指导server、location就好
server：服务，包含在http{}内部，每一个server均为一个虚拟主机也可以叫它为站点。一个http{}可能会有多个server
location：位置，包含在server{}内部，每一个location可以理解为前端访问的地址。一个server{}里可能会有多个location
如图中所示，我的服务为80端口，servere_name暂且不论，location后的/代表前端不加路径访问如：127.0.0.1 则是会进入到我的location /{}里
proxy_pass：在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。

注意！因为我自己的服务是没有前后分离，所以没有单独的前端项目部署，这里没有root和index参数。如需要部署前后端分离项目，则需要用到这两个参数。

root：指向文件路径，与之相似的还有alias参数。
index：指定网站初始页。

如上图，意思是，初始页是在/root/ecp/ry1/文件夹里的index.html

try_files：是为了前端项目为history模式时，用户刷新页面出现404。
以 try_files $uri $uri/ /index.html; 为例，当用户请求 (https://www.kkjhy.com/articles) 时，这里的 $uri 就是 /articles。try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/articles(其中 $root 是 WordPress 的安装目录)的文件，就直接把这个文件的内容发送给用户。显然，目录中没有叫 articles的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/articles/ 的目录。又找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求 (https://www.kkjhy.com/index.html)。这个请求会被 location ~ .html$ catch 住，也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的，因此不受 URI 变化的影响。(出现该问题的原因，可查看HTML5 History 模式：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90) （网上找的解释。看不懂）

当然，阻止history模式跳转404还有一种解决办法，但不推荐。
就是在location里加
“error_page 404 /index.html;”
表示只要是404就跳转到初始页
不推荐

11.当我们配置完成之后，就可以返回到上级目录，把前端打好的包复制到html文件夹里
12.复制进去后，返回到上级目录，进入到sbin目录
输入命令：./nginx 则可以启动nginx了
nginx -t # 验证配置文件；无法验证其它文件的情况
nginx -s reload # 重新加载；可以重启其它文件启动的情况
nginx -s stop # 快速停止
nginx -s quit # 正常停止
nginx -V # 查看版本
nginx -c conf/web01.conf # 使用另一个配置文件

下面是内网穿透的小知识
一般个人用得较多的是：natapp
官网：https://natapp.cn/
但最近收到了一个更舒服更好用的ngrok

加压后如下：.exe为运行程序，无需在意

使用记事本打开ngrok.cfg

内容如图。
tunnels：定义隧道。

如图就是定义了三个隧道。
client表示转发http到本机8080，同时要求验证，ssh表示支持远程访问，第三个是绑定了域名转发到9090。这时候只需要一个./ngrok start client ssh test.dorole.com即可快速启动这三个隧道服务。
每一个隧道的配置节点都有五个参数，proto，subdomain，auth，hostname和remote_port，每个隧道必须有proto参数来指定本地地址和端口。auth参数用于在http(s)中身份认证，而remote_port用于在tcp隧道中指定远程服务器端口。如果没有配置subdomain参数，ngrok会默认一个二级域名与隧道节点一样的名字。

trust_host_root_certs：来支持TLS加密协议的证书信任。
server_addr：来指定自己的服务器地址

打开start.bat，它是一个运行脚本，他重新定义了subdomain参数

之后双击运行start.bat就可以穿透内网了。