react-nestjs-nginx-mongo个人博客搭建记录（29 号记录总结）

今天遇到的坑

• nginx 配置静态服务器与后端交互

  • nginx 是什么?

    • Nginx
    • Nginx,发言同(engine x) 是一个一步架构的网页服务器,同时也可以用作反向代理,负载均衡,和 HTTp 缓存

  • 安装

    • linux - 我所购买的服务器是 centOS 7,

      • 使用包管理工具 yum 安装

        • 安装运行库 $ yum -y install gcc gcc-c++ automake autoconf libtool make

        • 安装 openssl -> nginx ssl 使用

        • - $ cd /usr/local/src
            $ wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz
            $ tar -zxvf openssl-1.0.1t.tar.gz
          

        • 安装 pcre -> pcre 是一个正则表达式库

        •  -$ cd /usr/local/src
            $ wget https://ftp.pcre.org/pub/pcre/pcre-8.38.tar.gz
            $ tar -zxvf pcre-8.38.tar.gz
            $ cd pcre-8.38
            $ ./configure
            $ make
            $ make install
          

        • 安装 zlib -> zlib是提供数据压缩用的函式库。

            $ cd /usr/local/src
            $ wget http://zlib.net/zlib-1.2.11.tar.gz
            $ tar -zxvf zlib-1.2.11.tar.gz
            $ cd zlib-1.2.11
            $ ./configure
            $ make
            $ make install
        

        • 安装 nginx -> 示例所使用的 nginx版本为 1.16.1

         - $ cd /usr/local/src
           $ wget http://nginx.org/download/nginx-1.16.1.tar.gz
           $ tar -zxvf nginx-1.16.1.tar.gz
           $ cd nginx-1.16.1
        
           $ ./configure --with-http_ssl_module \
           --with-pcre=/usr/local/src/pcre-8.38 \
           --with-zlib=/usr/local/src/zlib-1.2.11 \
           --with-openssl=/usr/local/src/openssl-1.0.1t
        
           $ make
           $ make install
        

        • 操作 nginx -> nginx默认安装路径为 /usr/local/nginx

        •     $ cd /usr/local/nginx
              $ ./sbin/nginx  #运行 NGINX -> 可通过配置环境变量,不用打开 nginx 目录直接调用下面也是同样
              $ /usr/local/nginx/sbin/nginx -s reload   #重新载入 nginx 配置
               # 每次修改配置都需要重新载入并且重启,这样才能让配置生效
              $ /usr/local/nginx/sbin/nginx -s reopen  #重启 nginx
              $ /usr/local/nginx/sbin/nginx -s stop #停止 nginx
          

配置 $ vim /usr/local/nginx/conf/nginx.conf 打开 nngix 的配置文件,安装的时候会默认生成,下面列出我所使用到的配置,并且说明

 #user  nobody;
 worker_processes  1;
 events {
     worker_connections  1024;
 }
 http {
     include       mime.types;
     default_type  application/octet-stream;
     sendfile        on;
     keepalive_timeout  65;
     gzip  on;       # 开启 gzip
     gzip_types text/plain text/css application/json application/javascript;
     gzip_vary on;
     server {
         listen       80;  #监听的端口,所有发送到这个端口的数据都会被这里监听到
         server_name   49.XX.XX.126; # 服务器地址,如果不是放出被公网使用,可以localhost,即默认配置即可
         #nginx 静态资源服务器根目录-> 就是说所有通过访问 80 端口进来的访问的根目录
         root /home/code/back/app; 
          '/'所访问的地址,我的地址就是 react 生成的静态工程文件 build 文件夹
         index index.html; # 根目录所使用的首页
         charset utf-8;
         
         # 下面就是最重要的 location 配置了, 格式 location 路径 { ...配置}
         location / {
             try_files $uri $uri/  /index.html  
             由于 react-router 使用 createBrowerRout生成的单页应用,
             路径名都不是真实的文件地址,所以在访问不同地址 例如 211.11.23.33/ho211.11.23.33/news 这两个地址都是由单页应用生成的,
             使用 try_files 指令告诉服务器当找不到对应的静态文件是默认去访问 index.html 文件的页面
             # proxy_set_head即允许重新定义或添加字段传递给代理服务器的请求头。
             该值可以包含文本、变量和它们的组合有定义proxy_set_header时会继承之前定义的值。默认情况下，只有两个字段被重定义
                # proxy_set_header Host $proxy_host;
                # proxy_set_header Connection close;
             proxy_set_header Host $host;   #把真实 host 的改为自己定义的 host
             proxy_set_header   X-Real-IP   $remote_addr; # 转发真实 ip到远程地址上
             proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;:
             XFF它代表客户端，也就是HTTP的请求端真实的IP，只有在通过了HTTP代理或者负载均器时才会添加该项。
             proxy_set_header   X-Forwarded-Proto  $scheme;
             autoindex on;
       
           # 这里就是重写 react-router 生成的地址指向 根目录->即 index.html
           location @router{
               rewrite ^.*$ /index.html last;
           }
           # 我所构建的应用所有请求的开头都为 /api,这里设置了/api开头的请求由被代理的后端服务器处理返回数据 -> 
           同时相当于设置了跨域的处理
           location /api/ {
             proxy_set_header x-real-ip $remote_addr;
             proxy_pass http://49. xx.xx.126:2300;
           }
           error_page   500 502 503 504  /50x.html;
           location = /50x.html {
               root   html;
       
       }
   include servers/*;
   include /etc/nginx/conf.d/*.conf;
    }

• react 构建时与开发时路由的不同

  • 当我们在开发环境下,访问的地址都是 localhost:[port],可能就很理所当然的认为在服务器上也是可以同样访问 xxx.xxx.xxx.xxx:[port],太想当然了,我之前什么不懂的时候就是这样认为的,于是耗费了我好多时间在找资料调试上
  • 首先,经过 npm/yarn build命令后会生成以经过webpack打包的build文件夹,这里包含了我们所有的静态资源文件 css``img``js等等,
    • 如果是像我一样经由静态资源服务器访问的,那么在构建前,在package.json文件添加 "homepage":'.',然后直接放到静态资源服务器访问的地址就行了
      • 这里我遇到的坑是在 axios.default.baseURL我指定了一个确定的地址,0.0.0.0:2300,以为react会直接访问这个本机服务器生成的地址,于是就耗费了好多时间在寻找解决方案,现在想想就觉得好浪费时间,实质上,在开发的时候可以配置baseURL,在生产环境这个字段需要去除,如果是由后端服务器管理数据的话,那可以写上后端服务器的地址,否则在生产环境下要去除这个字段,并且在构建时在package.json指明homePage字段

• 前端参数传递给后端需要指明格式

  • 我遇到的问题是在前端发送请求给后端,post请求没问题,可是delete请求发送的数组怎么都传递不到给后端服务器,又浪费了好多时间,
    • 由于我的post请求时通过表单发送数据给后端登录,默认就指明了enctype编码类型 => key1=value1&key2=value2格式编码的,默认是 application/x-www-form-urlencoded,由于我在AxiosConfig中使用拦截器默认生成了这个 request.header[content-type] = application/x-www-form-urlencoded,所以后端的请求主体 => nesjt@Body能接收到数据
  • 而我delete请求发送的数据是字符串类型的数组,发送数据就发送不过去了,这个时候有两种解决方案,设置request.headers[Content-Tyoe]= 'application/json或者使用第三方库 Qs,使用通过Qs.stringify(data)生成 x-www-form-urlencoded格式的数据, 在我的项目中我使用了 Qs在前端请求发送 data:{articleIds} => 转化为 data={articleIds:[...string]}这样格式的字符串,后端再通过 Qs.parse(data)重新转化为 js 对对象操作

• 今天的笔记大概就是这么短了,这三个是困了我最久的坑,还有其他小坑会都写在我的开发日记上.以后继续努力加油.