329-将react项目打包部署在服务器上

将react项目打包部署在服务器上

我们试一试
从0开始
将一个react项目部署在服务器上
还是踩了很多坑的
主要还是因为自己对服务器不是特别精通
所以还是要多多学习

我们的本地系统是windows
云服务器系统是centos

那么我们在本地创建一个react项目
执行
create-react-app demo
这样就创建了一个demo项目

如果我们在本地执行
npm start
那么这个react项目就运行在本地
localhost:3000
可以看到是一个reactLOGO的页面

然后我们来看一下生成的项目的目录
-node_modules
-public
-src
-package.json
-package-lock.json

我们需要在package.json里面添加一行
"homepage": ".",

如果不加上这个的话
之后打包的时候,打开index.html会报错

然后我们来看一下package.json文件

{
  "name": "demo0401",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

然后我们进入服务器系统
我用的是centos
先用yum来安装一下nginx
yum install nginx

这样nginx就安装好了

由于我80端口已经被占用了
所以我们来试一试将nginx运行在其他端口例如9090
我们先打开
nginx.conf和nginx.conf.default
然后将80端口修改成9090

nginx.conf
是这样

    server {
        listen       9090 default_server;
        listen       [::]:9090 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

 

 

nginx.conf.default是这样

    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

    }

 

 

 

然后现在我们来启动一下nginx

nginx -c /etc/nginx/nginx.conf

 

然后我们访问一下 服务器地址:9090

http://123.123.123.123:9090/

 

我们发现是一个welcome页面

Welcome to nginx on Fedora!

This page is used to test the proper operation of the nginx HTTP server after it has been installed. If you can read this page, it means that the web server installed at this site is working properly.

Website Administrator

This is the default index.html page that is distributed with nginx on Fedora. It is located in /usr/share/nginx/html.

You should now put your content in a location of your choice and edit the root configuration directive in the nginx configuration file /etc/nginx/nginx.conf.

 

 

 

 

然后我们要把本地的react项目弄到云服务器上

我们在本地执行

npm run build

然后就生成了一个build文件夹

       asset-manifest.json
       favicon.ico
       index.html
       manifest.json
       precache-manifest.a28482af51bf43f1f334c1113b447a27.js
       service-worker.js
  static

 

 

 

我们需要把build文件夹上传到云服务器

应该放在哪个目录呢

我们看一下conf文件

发现是/usr/share/nginx/html

 

那么我们需要放到/usr/share/nginx文件夹里面

比如我是创建了一个root文件夹,然后把build文件夹重命名为app

所以路径就是/usr/share/nginx/root/app

 

 

 

然后我们需要修改一下nginx.conf和nginx.conf.default

然后

    server {
        listen       9090 default_server;
        listen       [::]:9090 default_server;
        server_name  _;
        root         /usr/share/nginx/root/app;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

 

 

    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   root/app;
            index  index.html index.htm;
        }

    }

 

 

 

然后我们重启一下nginx

nginx -s reload

 

 

然后打开 服务器地址:9090

就看到了我们的react