在windows下导入react项目并且打包编译后部署到nginx上

• nodejs安装

  注意node_global和noe_cache这两个文件夹可以不用像他那样配置。

  然后参照上面那篇文章配置镜像站，输入命令

  npm config set registry=http://registry.npm.taobao.org
  

  注意此时我们的npm版本不是最新版，运行时可能会报警告，输入命令

  npm install npm -g
  

  将npm升级到最新版。

  nodejs和npm如果版本有差异的话，后续安装库时可能会被报错，可以参照nodejs和npm版本对应
  来查看nodejs对应的版本。

  搭建react项目
  注意再创建完react项目后要先进入项目的根目录再进行后续操作。
  先不要急着打包，因为我到手的只有一个src文件夹，所以还需要再配置一下文件，如果你收到的也是一个src文件，可以跟着我的流程走。
  我的src文件夹目录如下
  进入Components目录，这里有一个Init.js文件，如图
  
  其他全是我的app文件。
  打开Init.js文件
  
  注意，后续使用python manage.py runserver启动django项目时，后面要跟着你现在配置的ip和端口号，如python manage.py runserver 192.168.149.1:4256。
  修改完src文件夹后，自己拖到你创建的react项目，覆盖原文件。注意在做这些操作前请备份自己的文件，无论是你自己创建的react项目，还是src文件夹，都尽量进行备份。
  如果你的js文件在引用其他文件路径时里面有个@字符，如图
  
  找到react项目的根目录下的config文件夹，打开webpack…config.js文件，如果没有这个文件，请在项目根目录下运行npm run eject命令。

  npm run eject
  

  如果遇到下面的错误，这是因为我们用脚手架创建一个项目时，脚手架自动给我们增加了一个 .gitignore 文件，而我们本地却没有文件仓库。
  
  在终端输入命令

  git add .
  git commit -m "up"
  

  重新输入命令就可以了。

  npm run eject
  

  
  找到resolve->alias,添加

  '@': path.resolve(__dirname,'../src')
  

  如图
  
  在项目根目录下执行命令，查看项目是否能够运行成功

  npm start
  

  如遇报错信息为 Module not found: Error: Can’t resolve ‘xxx’
  使用命令安装缺失的依赖包即可

  npm i -S xxx
  

  我在运行后还出现了这种报错，如图
  
  解决方法为卸载新版本，再安装5的版本

  npm uninstall react-router-dom
  npm install react-router-dom@5
  

  至此，项目就能够成功运行了。
  

  nginx安装
  安装成功后目录如下
  
  打包编译你的react项目，执行命令

  npm run build
  

  打包成功后如图
  
  编译成功后在项目根目录出现build文件夹
  
  build文件夹里的内容
  

  将build文件夹下的全部文件复制到nginx目录下的html，建议将html里面的文件全部删除再复制进去，如果不放心可以备份一份html文件。
  然后找到nginx目录下的conf文件夹，找到nginx.conf
  
  打开，修改配置
  
  粘一份我的配置

  
  #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;
  
      server {
          listen       3000;
          server_name  localhost;
  #         port_in_redirect off;
  
          #charset koi8-r;
  
          #access_log  logs/host.access.log  main;
  
          location / {
              root   html;
              index  index.html index.htm;
  # 			proxy_pass http://127.0.0.1:8000/;
  			try_files $uri /index.html;
          }
  
  #         location /django/ {
  # 		    proxy_pass http://192.168.149.1:4256/
  # 		    proxy_set_host HOST 127.0.0.1
  #         }
          #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   html;
          }
  
          # proxy the PHP scripts to Apache listening on 127.0.0.1:80
          #
          #location ~ \.php$ {
          #    proxy_pass   http://127.0.0.1;
          #}
  
          # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
          #
          #location ~ \.php$ {
          #    root           html;
          #    fastcgi_pass   127.0.0.1:9000;
          #    fastcgi_index  index.php;
          #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
          #    include        fastcgi_params;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #    deny  all;
          #}
      }
  
  
      # another virtual host using mix of IP-, name-, and port-based configuration
      #
      #server {
      #    listen       8000;
      #    listen       somename:8080;
      #    server_name  somename  alias  another.alias;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
  
  
      # HTTPS server
      #
      #server {
      #    listen       443 ssl;
      #    server_name  localhost;
  
      #    ssl_certificate      cert.pem;
      #    ssl_certificate_key  cert.key;
  
      #    ssl_session_cache    shared:SSL:1m;
      #    ssl_session_timeout  5m;
  
      #    ssl_ciphers  HIGH:!aNULL:!MD5;
      #    ssl_prefer_server_ciphers  on;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
  
  }
  

  cmd进入nginx目录，启动nginx

  start nginx
  

  浏览器输入localhost:3000即可访问前端
  如果是部署在服务器里的话需要将server更改为域名地址或者服务器ip地址，
  输入域名或者服务器ip即可访问。
  每次更改配置文件后都需要重启nginx

  nginx -s reload
  

  如果发现修改后重启nginx并没有更新自己修改的配置，可以杀死全部的nginx再开启nginx。

  taskkill /f /t /im nginx.exe
  

  四、总结

  配置这个项目花了两个星期的时间，期间遇到不少坑，不过也学到很多新东西，想想果然还是对react框架不太了解，准备抽空来学习一下。