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

 

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

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

一、安装npm

安装nodejs就行了,网上都有教程,这里贴一个比较详细的nodejs安装

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

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

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

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

npm install npm -g

将npm升级到最新版。

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

二、创建react项目

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

npm run eject

如果遇到下面的错误,这是因为我们用脚手架创建一个项目时,脚手架自动给我们增加了一个 .gitignore 文件,而我们本地却没有文件仓库。
在windows下导入react项目并且打包编译后部署到nginx上插图4
在终端输入命令

git add .
git commit -m "up"

重新输入命令就可以了。

npm run eject

在windows下导入react项目并且打包编译后部署到nginx上插图5
找到resolve->alias,添加

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

如图
在windows下导入react项目并且打包编译后部署到nginx上插图6
在项目根目录下执行命令,查看项目是否能够运行成功

npm start

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

npm i -S xxx

我在运行后还出现了这种报错,如图
在windows下导入react项目并且打包编译后部署到nginx上插图7
解决方法为卸载新版本,再安装5的版本

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

至此,项目就能够成功运行了。
在windows下导入react项目并且打包编译后部署到nginx上插图8

三、安装nginx

不多说,参考nginx安装
安装成功后目录如下
在windows下导入react项目并且打包编译后部署到nginx上插图9
打包编译你的react项目,执行命令

npm run build

打包成功后如图
在windows下导入react项目并且打包编译后部署到nginx上插图10
编译成功后在项目根目录出现build文件夹
在windows下导入react项目并且打包编译后部署到nginx上插图11
build文件夹里的内容
在windows下导入react项目并且打包编译后部署到nginx上插图12

将build文件夹下的全部文件复制到nginx目录下的html,建议将html里面的文件全部删除再复制进去,如果不放心可以备份一份html文件。
然后找到nginx目录下的conf文件夹,找到nginx.conf
在windows下导入react项目并且打包编译后部署到nginx上插图13
打开,修改配置
在windows下导入react项目并且打包编译后部署到nginx上插图14
粘一份我的配置


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

文章来源于互联网:在windows下导入react项目并且打包编译后部署到nginx上

THE END
分享
二维码