lz 在學(xué)習(xí)的過程艇搀，想要把前后端項(xiàng)目都部署到docker腋颠，實(shí)現(xiàn)了在linux 虛擬機(jī)中部署項(xiàng)目袋狞。為了加深記憶涮坐，所以記錄一下填坑的過程凄贩。
準(zhǔn)備：（省略安裝虛擬機(jī)和centOS7linux系統(tǒng)）

1、VMware  鏡像centOS7
2袱讹、在虛擬機(jī)中安裝docker 
3疲扎、IDEA 一個(gè)簡單的spingboot 項(xiàng)目
4、一個(gè)react項(xiàng)目

直接開始上干貨
一捷雕、在linux系統(tǒng)中安裝docker ,可以結(jié)合docker中國官方文檔https://docs.docker-cn.com/engine/installation/linux/docker-ce/centos/椒丧。如果不是root用戶，前面加上sudo 權(quán)限非区，因?yàn)槲乙呀?jīng)安裝過了瓜挽，所以貼一下之前安裝的步驟

docker官方文檔.png

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

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

dockerdemo.png

2.在target目錄下可以看到打包好的文件她肯，在linux系統(tǒng)中home目錄下創(chuàng)建一個(gè)一個(gè)tt文件夾，把jar包拷貝進(jìn)這里鹰贵，然后新建一個(gè)Dockerfile文件

微信截圖_20190411165059.png

微信截圖_20190411165404.png

其中Dockerfile文件內(nèi)容

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 目錄創(chuàng)建dockerdemo 鏡像

創(chuàng)建鏡像.png

創(chuàng)建并啟動容器.png

查看虛擬機(jī)ip地址.png

springboot結(jié)果.png

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>
              這是首頁組件的內(nèi)容
<button onClick={this.TestKuayu}>測試跨域問題</button>
<hr />

（1）把打包好的文件放入虛擬中甫窟，home 目錄下新建comp

復(fù)制react的build文件夾.png

docker-compose.png

version: '2'
services:
  # 服務(wù)名稱
  nginx:
    # 鏡像:版本
    image: nginx:latest 
    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 數(shù)據(jù)卷 映射本地文件到容器
    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
    # 覆蓋容器啟動后默認(rèn)執(zhí)行的命令阻荒。
    command: /bin/bash -c "nginx -g 'daemon off;'"

（4）在comp目錄下新建一個(gè)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是你虛擬機(jī)上面的步驟中能正常訪問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）在虛擬機(jī)終端進(jìn)入comp目錄
執(zhí)行docker-compose up -d 即可創(chuàng)建一個(gè)nginx容器
如下圖docker ps查看已經(jīng)啟動的容器挠锥，一個(gè)是dockerdemo ，一個(gè)是nginx

創(chuàng)建react容器.png

（6）訪問react 項(xiàng)目
http:192.168.11.128:80 可以看到react項(xiàng)目正常顯示侨赡，點(diǎn)擊測試跨域問題蓖租，可以看到react項(xiàng)目正常訪問另一個(gè)容器中springboot后臺項(xiàng)目纱控。

react訪問springboot后臺.png

至此整個(gè)流程跑通，因?yàn)槭窃诠镜碾娔X寫文章菜秦，有點(diǎn)倉促甜害。
如果讀者發(fā)現(xiàn)有什么不正確，請指出球昨。
有興趣的朋友可以尔店，一起交流。
ly_dv主慰，一個(gè)小菜鳥嚣州。