一, 打包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后台数据的更多相关文章

  1. nginx部署h5项目

    1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...

  2. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  3. 小白从零开始阿里云部署react项目+node服务接口（三：部署到服务器）

    服务器 准备工具 依次安装即可 nginx 安装nginx https://www.runoob.com/linux/nginx-install-setup.html 配置全局nginx命令 http ...

  4. 使用uWSGI+nginx部署Django项目

    最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...

  5. 服务器nginx部署PHP项目样式不出来要注意的小问题

    服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_ ...

  6. 通过Nginx部署flask项目

    用Flask开发之后,很多人,喜欢用nohup python manage.py & 这样的形式,放到后台运行,其实这样只是个发开模式,很简陋,无法支持并发,进程监控等功能.所以采用nginx ...

  7. 小白从零开始阿里云部署react项目+node服务接口（二：node服务+web）

    我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init  一路enter 3  yarn add  express cors  ...

  8. 小白从零开始阿里云部署react项目+node服务接口（一：阿里云服务器）

    准备阿里云服务器,并安装系统 如果没用自己服务器可以购买一个 https://www.aliyun.com/minisite/goods?userCode=x7i5glgc 初级购买一个1核2G的主机 ...

  9. Windows下Nginx配置SSL实现Https访问（包含证书生成）

    Vincent.李   Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https ...

随机推荐

  1. Springboot揭秘-快速构建微服务体系-王福强-2016年5月第一次印刷

    JavaConfig项目: spring IOC有一个非常核心的概念——Bean.由Spring容器来负责对Bean的实例化,装配和管理.XML是用来描述Bean最为流行的配置方式.Spring可以从 ...

  2. Python 的 12 个学习方式

    Python 是世界上最受欢迎的编程语言之一,它受到了全世界各地的开发者和创客的欢迎.大多数 Linux 和 MacOS 计算机都预装了某个版本的 Python,现在甚至一些 Windows 计算机供 ...

  3. centos7安装jenkins以及jenkins正常启动无法访问问题

    1.安装jdk yum search java|grep jdk sudo yum install -y java-1.8.0-openjdk 2.下载jenkins wget http://pkg. ...

  4. js事件【续】(事件类型)

    一.UI事件[使用时需要添加on eg: onload 页面加载完成事件]load    [一张页面或一幅图像完成加载]页面加载后触发的事件,即进入页面后 unload    [用户退出页面]页面卸载 ...

  5. Vue学习之全局和私有组件小结（七）

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

  6. 40、js技巧（持续更新。。。）

    1.深拷贝对象: const a={name:'aaa',age:11} const b=JSON.parse(JSON.stringify(a)) 2.获取数组极值: let list = [1, ...

  7. .Net core 如何生成Nuget包

    以前引用了很多neget包,觉得nuget包方便了很多,是不是有些通用的代码可以封装到nuget中,想要用的时候引用就可以了, 这样其实有两个好处: 1. 首先不用重复的coding,节约了时间. 2 ...

  8. BBS之文章详情页搭建

    博客评论相关 博客文章详情页搭建 {% extends 'base.html' %} {% block css %} <style> #div_digg { float: right; m ...

  9. Pycharm中设置默认头注释

    在编写Python项目时,我们可能需要添加一些默认的信息,比如添加文件创建的时间,比如添加文件作者,等等,这些信息可以自己在python脚本中添加,但是也可以在Pycharm中配置模板,每次创建文件的 ...

  10. selenium安装

    pip安装 pqi优化pip下载速度 pip install selenium pip install --upgrade selenium pip show selenium 离线安装 官网下载se ...