springboot2.x整合react部署到nginx完美结合

1. 思路

1.1 springboot微服务相关

1. 比如我sprinboot总共有3个微服务ABC ，
   A：A服务负责和前端交互，端口为8080
   B: A服务所生产的发邮件、信息等都是去访问B服务，这个时候A跨服务调用B，B的端口是8081
   C：A服务接口的搜索比如elasticsearch等相关的都在C服务上，这个时候A跨服务调用C，C的端口是：8082
2. 但是和前端页面交互的只有A服务的8080端口，相信A端口怎么去调用BC大家都知道，也有很多方式，这里主要说一下，前端怎么去和后端的8080整合

1.2 前端react、VUE相关打包部署

1. 一般来说，前端开发是VUE和react，开发的时候步骤无非是下面三个：

2. . 安装相关依赖命令是：npm install

3. . 使用命令启动命令是：npm run dev
   一般来说，前端的开发人员都会用一个3000的端口启动，比如http://localhost:3000，然后在里面测试开发，但是真正部署到线上还是要打包的，就是下面的第四步

4. 打包，会出现一个dist文件夹，里面会有html和一些静态文件，命令是npm run build

5. 但是我要说重点了，你用react或者vue开发的时候，打包发布的时候，一定要把所有的路由请求（AJAX请求）发到8080端口上，比如下面两个配置，分别是前端开发环境和线上环境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8080"'
})

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://localhost:8080"'
}

1.3 前端怎么整合后端？用nginx

具体怎么安装配置nginx我这里不说，网上一大堆，我要说的是如何 把vue或者react部署到nginx上

1. 找到nginx目录下的nginx.conf文件
2. 修改配置，主要是在http下面添加一个server，要添加的如下：
   注意listen后面的端口号其实就是上面提到的前端端口号，本质上和3000没有任何区别，这里我只是把3000改成了8055，所以你可以改成任何的端口

server {
    listen       8055;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3. 将打完的包放到nginx上面
   上述两个步骤做完了之后，就把刚才1.2打完的包，其实是一个dist文件夹，然后把dist文件夹里面的全部东西放到nginx目录下的html文件夹里面，如图这是我nginx目录下的全部内容(注：捡了有用的列了出来)

├─conf
    fastcgi.conf
    fastcgi_params
    koi-utf
    koi-win
    mime.types
    nginx.conf
    scgi_params
    uwsgi_params
    win-utf
├─contrib
├─docs
├─html
│  └─static
│  └─index.html
├─logs
└─temp

4. 最后启动nginx服务器，输入地址即可，http://localhost:8055