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