前端nginx部署简单教程

docker部署前端可以参考这篇博客

1. 传送门

2. 下载xshell和flashfxp。

3. 连接服务器：

• 账号：root
• 密码：p123…8!

4. 打包好的dist通过flashfxp传到服务器中
5. 进入服务器，找到文件所在目录
6. 执行命令：

docker cp dist/  fd35:/usr/share/nginx/

将dist放入docker中
7. 输入命令进入docker：

docker exec -it  fd35 bash

8. 在容器中打开目录：
   cd /usr/share/nginx/
9. 执行命令删除原文件夹：rm -rf html
10. 将外界传入的新dist改名为html：mv ./dist html
11. 复制50x.HTML到新的html：
    cp ./50x.html ./html/
12. 输入exit退出容器

重定向教程

1. 新建一个配置文件any.conf：
2. 写入server配置：

server {
        listen 80;
        server_name  localhost;#访问的地址就是localhost:80

location / {
      root /usr/share/nginx/html;             #项目路径
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }

location /work/ {
                rewrite .* /index.html break;
                root /usr/share/nginx/html/;
        }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
#后边的不需要了

location /Codeing/ {
		rewrite .* /index.html break;
		root /usr/share/nginx/html/;
        }
location /work/ {
		rewrite .* /index.html break;
		root /usr/share/nginx/html/;
        }
location /PersonalCenter/ {
		rewrite .* /index.html break;
		root /usr/share/nginx/html/;
        }
location /Login/ {
		rewrite .* /index.html break;
		root /usr/share/nginx/html/;
        }		
location /static {
        alias   /usr/share/nginx/html/static;
        index  index.html;
        }

3. 修改后的配置文件放入容器中docker cp ./nginx.conf fd35:/etc/nginx/conf.d
4. 在主配置文件：/etc/nginx/nginx.conf中，会有一个扫描语句，导入自己新建的配置文件any.conf。
5. 重启nginx服务器使得配置生效。./nginx -s reload

查看软件安装路径

whereis nginx

查询运行文件所在路径

which nginx

自动化部署vue方案

1. https://www.cnblogs.com/imstrive/p/10867943.html

websocket断开分析

1. 因为nginx默认的保持连接时间是1分钟，所以，可以通过心跳包代码书写，让前端每分钟发送一个心跳的方式维持长连接：https://www.cnblogs.com/haiwei_sun/articles/10402278.html
2. 也可以采用修改配置文件的方式，用whereis nginx命令找到配置文件nginx.conf，然后修改里面的keepalive_timeout即可。当然，也有的人说的是反向代理的配置文件中修改长连接时间，可以参看这两篇：https://www.jb51.net/article/77253.htm，https://blog.csdn.net/mynamepg/article/details/79799819
3. 也可以了解一下websocket的报错方式，再前端打印出来即可：https://segmentfault.com/a/1190000014582485?utm_source=tag-newest