Dcoker启动react+springboot项目

使用dockerfile实现一次编写，即可一键启动整个项目。再也不用每次繁琐的重新安装环境依赖（前置条件：安装好centos系统，安装好docker软件），配置项目参数等一系列复杂操作。

一、安装centos

这一步如果是使用云的话可以一键安装，所以这个步骤就省略了。

二、安装docker

Docker安装请参考这篇文章 Centos7 安装 Docker

三、安装docker-compose

Docker Compose安装请参考这篇文章Centos7 安装 docker-compose

三、创建spring boot后端Demo

3.1、在IDEA中新建一个spring boot项目，添加测试接口/hello

使用maven命令将项目打成jar包

mvn clean install

在target目录下可以看到打包好的文件，在linux系统中创建/projects/docker-demo目录，把jar包拷贝进去

3.2、创建dockerfile

在/projects/docker-demo文件中创建dockerfile文件，写入如下内容

#指定基础镜像，在其上进行定制
FROM java:8

#维护者信息
MAINTAINER rex

#这里的 /tmp 目录就会在运行时自动挂载为匿名卷，任何向 /tmp 中写入的信息都不会记录进容器存储层
VOLUME /tmp

#复制副本jar包
ADD springboot-docker-demo-0.0.1-SNAPSHOT.jar /docker-demo.jar

#容器启动项目
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/docker-demo.jar"]

3.3、创建docker镜像，容器，启动项目

在/projects/docker-demo目录下执行如下命令创建当前目录下的imagename镜像（imagename自定义，我这里就直接使用‘imagename’了）

docker build -t imagename .

使用如下命令启动docker镜像容器实例

docker run -d --network=host --name containername imagename

参数说明：

参数	说明
-d	后台运行容器，并返回容器ID
- -network=host	(ps:参数前面是两个’-'直接没有空格)Docker 容器的网络会附属在主机上，两者是互通的。例如，在容器中运行一个Web服务，监听8080端口，则主机的8080端口就会自动映射到容器中。如果需要启动多实例，请参考network参数设置。

容器启动成功将返回容器id

查看容器启动日志

docker logs 容器id

测试一下接口吧：

curl 127.0.0.1:8080/hello

命令	说明
docker stop containerid	停止正在运行的容器
docker rm containerid	删除容器
docker restart containerid	重启容器
docker exec -it containerid ls	使用exec与容器交互，输入ls命令

3.4、关于更新容器

目前了解到只能通过 停止容器-删除容器-删除镜像-拉取最新镜像-启动容器 的方式来更新镜像。
或者搭建一个服务来做持续集成的工作，比如 Jenkins。
如有更好的更新方式，欢迎交流一下。

四、创建react前端demo

4.1 新建一个react项目

webpack依赖nodejs软件环境，安装过程这里就不多赘述了。项目创建使用yarn脚手架搭建，如果没有安装，可使用npm install yarn来安装

命令行切换到项目文件夹，创建react-demo项目

yarn create react-app react-demo

使用IDEA打开修改App.js页面，其中需要使用axios组件，添加命令如下

yarn add axios

App.js修改如下：

import React from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  state = {
    msg: '数据未加载...',
  };

  fetchData = () => {
    axios.post('/api/hello', {})
        .then(function (response) {
          console.log("后端获取到的数据：" + JSON.stringify(response.data));
          this.setState({
             msg: response.data,
          });
        }).catch(function (error) {
          console.log(error);
        });
  };

  render() {
    return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.msg}</h2>
            <button onClick={this.fetchData}>从后端获取数据</button>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
    );
  }
}

export default App;

打包前端代码，生成build文件夹：

yarn build

将打包好的文件夹放到服务器/projects/docker-demo文件夹

五、 创建docker-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;'"

六、 创建nginx.conf文件

#user  nobody;
worker_processes  1;

#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 {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
        location / {
        	root   /usr/share/nginx/html;
        	index  index.html index.htm;
        	try_files $uri /index.html;
        }
        
        # /api 代理到下面 地址 其中127.0.0.1是你虚拟机上面的步骤中能正常访问springboot后台
        location /api/ {          
             proxy_pass http://127.0.0.1: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;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

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


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

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