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

前端React项目部署相关推荐

如何部署前端react项目到服务器,Vue、React前端项目打包部署
前端单页面应用部署前端打包上线部署方案之 hash路由模式对于hash路由模式打包的单页面应用,直接发布到服务器,使用nginx指向到对应文件目录即可,通用配置一般如下: location / { ...
前端—react项目及版本更新对比
介绍: 项目搭建逻辑:1)项目中index.html中渲染的内容.2)看main.js中绑定的组件渲染 React框架由Facebock开源的一款前端框架. 工作中使用的版本: react:16.2 ...
前端H5项目部署到OSS-利用jenkins实现自动发布【生产环境实战】
前端H5项目发布到OSS 文章目录前端H5项目发布到OSS 背景一.创建Bucket 二.为Bucket绑定自定义域名 1.购买的域名和oss在同一个阿里云账号下(大多数) 2.购买的域名和oss ...
react项目部署nginx服务器
1.打包好你的react本地项目,dist中具有打包好的文件 2.使用shell等工具登录你的linux服务器 3.安装nginx,网上教程一大堆 4.进入/usr/local/nginx/conf/ ...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头,实现远程播放.控制移动.放大缩小等功能,首先百度搜类似的需求,搜不到,只能自己采坑,登萤石云官网,看对应文档. 一.登录萤石 ...
发布react项目到linux服务器,react项目部署nginx服务器
1.打包好你的react本地项目,dist中具有打包好的文件 2.使用shell等工具登录你的linux服务器 3.安装nginx,网上教程一大堆 4.进入/usr/local/nginx/conf/ ...
前端react项目如何部署到nginx
缘由:公司架构只给了一台测试环境的IP地址,说让我把项目打包部署到nginx,当时听到此话,有些诧异,一直以来以为前端代码部署到测试或者生产环境都是后端同事的活,之前自己虽然部署过,一种是ftp直接替 ...
react项目部署到linux服务器
react部署笔记 1.1打包项目 #安装yarn npm install -g yarn #打包项目 yarn build 1.2 将打包好的build 推到服务器 # cd到前端web目录 cd ...
前端react项目---全球新闻发布管理系统
一. 项目入门 1. 项目介绍该项目是一个全球新闻发布管理系统,可供普通游客,超级管理员,区域管理员,和区域编辑四种角色访问,针对不同的角色所展示的页面也不相同,对于游客而言可以访问到新闻展示页面和 ...

前端React项目部署

前端React项目部署相关推荐

最新文章

热门文章