Linux centOS7里面docker部署springboot+nginx+react

lz 在学习的过程，想要把前后端项目都部署到docker，实现了在linux 虚拟机中部署项目。为了加深记忆，所以记录一下填坑的过程。
准备：（省略安装虚拟机和centOS7linux系统）

1、VMware  镜像centOS7
2、在虚拟机中安装docker 
3、IDEA 一个简单的spingboot 项目
4、一个react项目

直接开始上干货
一、在linux系统中安装docker ,可以结合docker中国官方文档https://docs.docker-cn.com/engine/installation/linux/docker-ce/centos/。如果不是root用户，前面加上sudo 权限，因为我已经安装过了，所以贴一下之前安装的步骤

docker官方文档.png

1.安装所需的软件包。yum-utils 提供了 yum-config-manager 实用程序，并且 devicemapper 存储驱动需要：
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
2.使用下列命令设置 stable 镜像仓库。您始终需要使用 stable 镜像仓库，即使您还需要通过 edge 或 testing 镜像仓库安装构建也是如此。
sudo yum-config-manager
--add-repo
https://download.docker.com/linux/centos/docker-ce.repo
3.更新 yum 软件包索引
sudo yum makecache fast
4.安装最新版本的 Docker CE，或者转至下一步以安装特定版本
sudo yum install docker-ce
5.启动docker：
sudo systemctl start docker
6.查看docker当前版本
docker version
7.查看当前docker镜像
docker images
二、打包springboot项目
1.在IDEA中新建一个springboot项目，我这里是dockerdemo里面加入一个简单的HelloController.java 然后用maven打包，贴一下部分的代码，端口默认是8080

@RequestMapping("/t-test")
@RestController
public class HelloController {

    @RequestMapping(value="/hello")
    public String hello(){
        return "hello world!";
    }
}

dockerdemo.png

2.在target目录下可以看到打包好的文件，在linux系统中home目录下创建一个一个tt文件夹，把jar包拷贝进这里，然后新建一个Dockerfile文件

微信截图_20190411165059.png

微信截图_20190411165404.png

其中Dockerfile文件内容

FROM java:8 
VOLUME /tmp 
ADD dockerdemo-0.0.1-SNAPSHOT.jar /dalaoyang.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/dalaoyang.jar"]

（1）cd 到tt 目录创建dockerdemo 镜像

创建镜像.png

（2）之后根据dockerdemo镜像创建容器并启动容器

创建并启动容器.png

（3）查看虚拟机ip地址ifconfig

查看虚拟机ip地址.png

（4）之后在后台输入http://192.168.11.128:8080/t-test/hello 可以看到springboot输出结果

springboot结果.png

三、打包react项目
1.运用create-app-react 创建一个reactdemo01
2.npm 安装axios 测试跨域
3.在vscode 中执行npm run build 打包react项目

react打包.png

这里贴一下react部分代码：

import axios from 'axios';
...
TestKuayu = () => {

        console.log("测试跨域问题！");
        axios.post('/api/t-test/hello',
            querystring.stringify({
                id: '42',
                lastName: '你好'
            })
        )
            .then(function (response) {
                console.log("打印nginx跨域：" + JSON.stringify(response.data));
            })
            .catch(function (error) {
                console.log(error);
            });
    }
...
 <h2>{this.state.msg}</h2>
              这是首页组件的内容
<button onClick={this.TestKuayu}>测试跨域问题</button>
<hr />

（1）把打包好的文件放入虚拟中，home 目录下新建comp

复制react的build文件夹.png

（2）先安装docker-compose
进入下面的网址下载目前的最新版：
https://github.com/docker/compose/releases/tag/1.14.0-rc2
网页拉到最下面，下载：
docker-compose-Linux-x86_64
然后将文件上传到 /usr/local/bin/ 文件夹下，然后将其重命名为docker-compose，修改此文件的权限，增加可执行：chmod +x /usr/local/bin/docker-compose
查看docker-compose版本，如下即安装成功

docker-compose.png

docker-compose常用的命令：
docker-compose --help你会看到docker-compose命令
docker-compose down 关闭并删除容器
（3）在comp目录下新建一个compose.yml

version: '2'
services:
  # 服务名称
  nginx:
    # 镜像:版本
    image: nginx:latest 
    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 数据卷 映射本地文件到容器
    volumes:
    # 映射nginx.conf文件到容器的/etc/nginx/conf.d目录并覆盖default.conf文件
     - ./nginx.conf:/etc/nginx/conf.d/default.conf
    # 映射build文件夹到容器的/usr/share/nginx/html文件夹
     - ./build:/usr/share/nginx/html
    # 覆盖容器启动后默认执行的命令。
    command: /bin/bash -c "nginx -g 'daemon off;'"

（4）在comp目录下新建一个nginx.conf

#user  nobody;
#worker_processes  auto;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

#events {
#   worker_connections  1024;
#}

#http {
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
        }

        # /api 代理到下面 地址 其中192.168.11.128是你虚拟机上面的步骤中能正常访问springboot后台
        location /api/ {          
             proxy_pass http://192.168.11.128:8080/;
        }
       

        #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   /usr/share/nginx/html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
#}

（5）在虚拟机终端进入comp目录
执行docker-compose up -d 即可创建一个nginx容器
如下图docker ps查看已经启动的容器，一个是dockerdemo ，一个是nginx

创建react容器.png

（6）访问react 项目
http:192.168.11.128:80 可以看到react项目正常显示，点击测试跨域问题，可以看到react项目正常访问另一个容器中springboot后台项目。

react访问springboot后台.png

至此整个流程跑通，因为是在公司的电脑写文章，有点仓促。
如果读者发现有什么不正确，请指出。
有兴趣的朋友可以，一起交流。
ly_dv，一个小菜鸟。