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

 

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

• 一、安装npm
• 二、创建react项目
• 三、安装nginx
• 四、总结

最近接手了公司的一个django项目，这是应该前后端分离的项目，前端使用react编写，由于之前没用过react，所以在配置时遇到了一些问题，现在记录下来。

 

一、安装npm

安装nodejs就行了，网上都有教程，这里贴一个比较详细的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项目
注意再创建完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

不多说，参考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框架不太了解，准备抽空来学习一下。