Windows版:Nginx部署React项目并访问Spring Boot后台数据
一, 打包react项目
1,在工作空间目录下create-react-app test-arrange 创建项目test-arrange

2,在新建的项目中写好请求与页面

3,打包, 在项目目录下 npm run build

打包完成之后, 在项目目录下出现build文件夹。
二, 下载安装Windows版Nginx
1,Nginx下载地址http://nginx.org/en/download.html
下载的是稳定版1.16.1
2,解压
3,将步骤一中打包后生成的build文件夹内文件复制到nginx -> html目录下[不一定是html目录,可以在nginx.conf中修改;location/里面的root]
4,修改nginx -> conf目录下配置文件nginx.conf

PS: 如果步骤一的2和步骤二的4中不加api访问后台接口的时候会报404
5,启动Nginx, 在nginx目录下 start nginx

6,访问, http://localhost:8081,因为是Windows版的nginx所以是localhost,如果nginx是在Linux服务器上,localhost改为相应ip地址

点击search,可以从后台取到数据

7,停止nginx, 在nginx目录下nginx -s quit

Windows版:Nginx部署React项目并访问Spring Boot后台数据的更多相关文章
- nginx部署h5项目
1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- 小白从零开始阿里云部署react项目+node服务接口(三:部署到服务器)
服务器 准备工具 依次安装即可 nginx 安装nginx https://www.runoob.com/linux/nginx-install-setup.html 配置全局nginx命令 http ...
- 使用uWSGI+nginx部署Django项目
最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...
- 服务器nginx部署PHP项目样式不出来要注意的小问题
服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_ ...
- 通过Nginx部署flask项目
用Flask开发之后,很多人,喜欢用nohup python manage.py & 这样的形式,放到后台运行,其实这样只是个发开模式,很简陋,无法支持并发,进程监控等功能.所以采用nginx ...
- 小白从零开始阿里云部署react项目+node服务接口(二:node服务+web)
我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init 一路enter 3 yarn add express cors ...
- 小白从零开始阿里云部署react项目+node服务接口(一:阿里云服务器)
准备阿里云服务器,并安装系统 如果没用自己服务器可以购买一个 https://www.aliyun.com/minisite/goods?userCode=x7i5glgc 初级购买一个1核2G的主机 ...
- Windows下Nginx配置SSL实现Https访问(包含证书生成)
Vincent.李 Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https ...
随机推荐
- 英语chalchite蓝绿松石chalchite单词
蓝绿松石是铜和铝的磷酸盐矿物集合体,以不透明的蔚蓝色最具特色.也有淡蓝.蓝绿.绿.浅绿.黄绿.灰绿.苍白色等色.一般硬度5~6,密度2.6~2.9,折射率约1.62.长波紫外光下,可发淡绿到蓝色的荧光 ...
- 医疗行业预测性产品的质量如何把关?MES系统帮大忙
作为行业细分的医疗设备制造正在向工业4.0快速发展.它也可能仍然是世界上受监管最严格的行业之一,产品的个性化发展速度比其他行业更快. 在医疗设备行业中,由于需求或由于市场特定的规定,产品越来越多地定制 ...
- SQLAlchemy的常用数据类型
SQLAlchemy常用的数据类型 Column 代表数据库表中的一列 是创建对象时数据类型所依赖的对象,通过在Column对象中指明具体的数据类型来实现相应的数据库表中的列的格式自定义. Strin ...
- 使用Matplotlab画图
1.绘制折线图 #! /usr/bin/env python#encoding=utf-8 # 用于python2import sys reload(sys) sys.setdefaultencodi ...
- nmap的使用方法
0x01 Nmap 典型用途: 1.通过对设备或者防火墙的探测来审计它的安全性. 2.探测目标主机所开放的端口. 3.网络存储,网络映射,维护和资产管理.(这个有待深入) 4.通过识别新的服务器审计网 ...
- C++学习(9)—— 对象的初始化及清理
1. 构造函数和析构函数 对象的初始化和清理是两个非常重要的安全问题 一个对象或者变量没有初始状态,对其使用后果是未知 同样的使用完一个对象或者变量,没有及时清理,也会造成一些安全问题 C ...
- Detectron2源码阅读笔记-(一)Config&Trainer
代码结构概览 核心部分 configs:储存各种网络的yaml配置文件 datasets:存放数据集的地方 detectron2:运行代码的核心组件 tools:提供了运行代码的入口以及一切可视化的代 ...
- 项目Beta冲刺(团队)——用户试用调查报告
项目Beta冲刺(团队)--用户试用调查报告 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:针对相应版本展开用户试用,完 ...
- 项目Beta冲刺(团队) —— 凡事预则立
1.讨论组长是否重选的议题和结论 讨论: 我们采取匿名群投票的方式进行 投票结果如下: 成员共7人 投票7人 投票率100% 结果有效 结论: 不需要重选组长 2.下一阶段需要改进完善的功能 完善游戏 ...
- 关于Python文件读写
Python中文件操作可以通过open函数,这的确很像C语言中的fopen.通过open函数获取一个file object,然后调用read(),write()等方法对文件进行读写操作. 1.open ...