网站部署

前端React 采用Nginx 方式部署

react 路由会区分dev和prod环境

if (process.env.NODE_ENV === 'production') {
    module.exports = require('./Root.prod')
} else {
    module.exports = require('./Root.prod')
}

查下怎么通过.env转换生产和测试环境 

 

package.json 第四行加上homepage

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "homepage":"./",

 

 

参考：nginx部署React项目 - 云+社区 - 腾讯云 (tencent.com)

在官网下载安装包: http://nginx.org/en/download.html

解压，直接可以点击nginx.exe运行，如果80端口被windows server的IIS服务占用，可能会启动失败，如果启动成功，可以打开localhost:80地址

 

-- bind error 0.0.0.0:8080 permission deny, 这个产生原因主要是之前启动了端口被nginx占用了

参考  https://www.cnblogs.com/qmfsun/p/4512018.html

netstat -ano   各个端口占用和进程PID

netstat -aon | findstr "80"

在任务管理器将所有开启的nginx关闭即可,重新启动后可以看到nginx的欢迎界面，但此时没有把我们的reach Build文件夹映射进去，

参考以下文件的配置，监听8080端口的所有请求（react配置的路由会完全能匹配） 

一开始用了wildcard去填server_name,发现完全不生效，只能通过原始路径访问，如果带后缀就404（即server_name 完全不起作用）

特别注意红色部分server的配置  --  https://cloud.tencent.com/developer/article/1661636

    server {
        listen    8080;
        server_name  "";
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            #需要指向下面的@router
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        #对应上面的@router，
        #主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给前端路由再处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

 

 nginx开启缓存：https://blog.51cto.com/lookingdream/2542860

 

开启https -- 采用mkcert生成简单的https密匙

参考官网的下载和运行方法即可，windows 用chocolay安装

 安装完后生成的cert.pem和key.pem路径填进 nginx的conf即可

 

 

 

后端Django   nginx +uwsgi 

windows 安装 uwsgi：去pypi直接下载release 的最新版gar压缩文件，解压

python setup.py install, 提示以下：

报错1 ：os.uname() --> 打开 uwsgiconfig.py,  import platform 将所有的os.uname() 替换成 platform.uname()

报错2：you need a c Compiler --> 

　　　 下载 MinGW https://osdn.net/projects/mingw/downloads/68260/mingw-get-setup.exe/   按照默认指引点continue,最好不要改动保存的位置

　　　 在all package找到mingw32-gcc.bin, mingw32-gcc-g++.bin, 以及mingw32-gdb.bin  第一个是c语言文件的编译器，第二个是c++的，第三个是用来调试编译后文件的

　　　 打勾mark这三个, 左上方apply changes, 开始下载，如果下载失败，等下需要重新打勾下载，完成后找到MinGW/bin 把这个路径加到环境变量，

　　    此时再尝试安装uwsgi的包 python setup.py install

　　　 参考( https://cloud.tencent.com/developer/article/1627901)

报错3：vital error, 还是无法安装成功，-- 看了下 都说django不适合部署在windows，而且windows10 并不支持 uwsgi,故暂时不继续处理

 

runserver 如何启动https (mkcert的证书只能本地使用，别的电脑没安装过该证书即使进入https连接也显示的红色)

python manage.py runsslserver --certificate D:\web_env\hida-dict-web\nginx-1.20.1\conf\cert.pem --key D:\web_env\hida-dict-web\nginx-1.20.1\conf\key.pem 10.225.21.101:8000

 

 

 

 

 

 

django Broken pipe 如何解决：

问题情景：每次登陆后点击主页或者第一次登陆的时候，前端发起的第一个请求会因为CORS跨域问题而请求失败（实际后端已经完全开启了CORS允许跨域的设置）

搜了很久，基本确认这个问题可能是django或者Python的一个bug,需要引用socket包到django配合解决

从后端的角度处理太复杂，暂时采用的方式为前端引入axios-retry包，如果请求失败再试两次 GitHub - softonic/axios-retry: Axios plugin that intercepts failed requests and retries them whenever possible

 

 

 

 

 

 

 

 

 

 

附注：nginx配置文件

#vue或者React项目的打包后的dist，build文件里面的内容都放进html文件夹
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip on;
    gzip_buffers 32 4K;#压缩在内存中缓冲32块 每块4K
    gzip_comp_level 6 ;#压缩级别 推荐6
    gzip_min_length 4000;#开始压缩的最小长度4bit
     # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    #http发起的请求,直接引到https路径即可
    server {
        listen    8080 default;
        server_name "";
        ssl_certificate     cert.pem;
        ssl_certificate_key  key.pem;

        location / {
            #需要指向下面的@router
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        #对应上面的@router，
        #主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给前端路由再处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

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

    # HTTPS server
    server {
       listen    8080 ssl;
       server_name  www.hida.csmar.com hida.csmar.com;

       ssl_certificate     cert.pem;
       ssl_certificate_key  key.pem;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

        location / {
            #需要指向下面的@router
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        #对应上面的@router，
        #主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给前端路由再处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

        error_page 497 https://$host:$server_port$request_uri;

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

    }
    

}