前端React项目部署

前端react项目部署文档

1.下载phpstudy

小皮面板(phpstudy) - 让天下没有难配的服务器环境！

2.找到配置文件

设置-文件位置-nginx-conf

3.修改nginx.conf

项目npm run build

项目目录下可看到build文件夹

修改server中端口地址

修改server中root地址为build文件夹目录

包含vhosts下面的配置文件

include vhosts/*.conf;

#vhosts/*.conf文件
server {
        listen        80;
        server_name  localhost;
        root "D:\work\my-app\apr-fe\build";
        #起始页
        location / {
            index  index.html index.htm;
        }
}

4.修改vhosts下面的0localhost_80.conf文件

修改端口号

修改location中root地址为build文件夹目录

修改index起始页

#0localhost_80.conf文件
#user  nobody;
worker_processes 4;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
     worker_connections 40960;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
								   
     sendfile  on;

     keepalive_timeout 65;

    server {
        listen       8080 default_server;
        listen       [::]:8080 default_server;
        server_name  _;
        #路径
        root         "D:\work\my-app\apr-fe\build";
 
        location / {
            try_files  $uri $uri/ /index.html;
        }
        #后端请求接口
        location /apr/ {
            proxy_pass https://aprbeci.atomee.com;
        }
        location /api/ {
            proxy_pass https://accountsci.atomee.com;
        }
    }
	
    map $time_iso8601 $logdate {
        '~^(?<ymd>\\d{4}-\\d{2}-\\d{2})' $ymd;
        default                       'date-not-found';
    }
	include vhosts/*.conf;
     client_max_body_size 50m;
     client_body_buffer_size 60k;
     client_body_timeout 60;
     client_header_buffer_size 64k;
     client_header_timeout 60;
     error_page 400 /error/400.html;
     error_page 403 /error/403.html;
     error_page 404 /error/404.html;
     error_page 500 /error/500.html;
     error_page 501 /error/501.html;
     error_page 502 /error/502.html;
     error_page 503 /error/503.html;
     error_page 504 /error/504.html;
     error_page 505 /error/505.html;
     error_page 506 /error/506.html;
     error_page 507 /error/507.html;
     error_page 509 /error/509.html;
     error_page 510 /error/510.html;
     
     keepalive_requests 100;
     large_client_header_buffers 4 64k;
     reset_timedout_connection on;
     send_timeout 60;
     sendfile_max_chunk 512k;
     server_names_hash_bucket_size 256;
}
     worker_rlimit_nofile 100000;

5.重启nginx服务