前端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服务