一, 打包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. JavaScript---js语法,数据类型及方法, 数组及方法,JSON对象及方法,日期Date及方法,正则及方法,数据类型转换,运算符, 控制流程(三元运算),函数(匿名函数,自调用函数)

    day46 一丶javascript介绍 JavaScript的基础分为三个       1.ECMAScript:JavaScript的语法标准.包括变量,表达式,运算符,函数,if语句,for语句 ...

  2. Object-C与标准C/C++混合编程

    转自:http://www.xue5.com/Mobile/iOS/661674.html 如何将C++和Object-C混合编程开发IOS软件(Object-c调用C++) 原文网址:http:// ...

  3. Java学习之:Spring的扩展配置

    1.在配置文件applicationContext.xml中,引入相关的配置文件方式: 2.使用Jndi数据源的方式改造配置文件applicationContext.xml: 3.注释配置文件appl ...

  4. Python人工智能常用库Numpy使用入门

    第一章 jupyter notebook简单教程 命令模式按键esc开启 Enter : 转入编辑模式 Shift-Enter : 运行本单元,选中下个单元 Ctrl-Enter : 运行本单元 Al ...

  5. Django模型层(models.py)之模型创建

    Django数据库操作是十分重要的内容,这两天简单学习了数据库的操作,这里做个总结. 1.ORM简介 简单的来说,ORM就是对象-关系-映射.它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖 ...

  6. X509证书信任管理器类的详解

    在JSSE中,证书信任管理器类就是实现了接口X509TrustManager的类.我们可以自己实现该接口,让它信任我们指定的证书. 接口X509TrustManager有下述三个公有的方法需要我们实现 ...

  7. FFMPEG 命令行工具- ffmpeg

    ffmpeg 简介 ffmpeg 用于转码的应用程序,命令格式: ffmpeg [options] [[infile options] -i infile]... {[outfile options] ...

  8. Linux指令(压缩和解压类)

    gzip/gunzip 指令 gzip用于压缩文件,gunzip用于解压基本语法: gzip文件 (功能描述:压缩文件,只能将文件压缩为*.gz文件) gunzip文件.gz (功能描述:解压缩文件命 ...

  9. 执行shell脚本时提示/bin/sh^M: bad interpreter: No such file or directory

    执行脚本时提示解释器有问题,错误提示如下: 这种提示一般是脚本在windows系统之通过记事本写的,记事本修改过的文本,会默认在文本前面加上一些看不到的标记,导致shell脚本不能被shell解释器识 ...

  10. 斐波那契数性质 gcd(F[n],F[m])=F[gcd(n,m)]

    引理1 结论: \[F(n)=F(m)F(n-m+1)+F(m-1)F(n-m)\] 推导: \[ \begin{aligned} F(n) &= F(n-1)+F(n-2) \\ & ...