使用Dockerfile一键启动项目：Spring Boot后端+React前端

一、安装CentOS（云环境下推荐）

对于云环境用户，本文直接跳过此步骤，云服务器一键安装即可。

二、安装Docker

请参考官方文档安装Docker环境。安装完成后，可通过命令直接使用。

三、安装Docker Compose

安装完成后，项目部署变得更加简便，可参考官方文档进行配置。

四、创建Spring Boot后端项目

1. 在IDEA中创建Spring Boot项目

创建完成后，添加测试接口/hello，并通过Maven打包项目。

2. 打包并上传JAR文件

运行以下命令：

mvn clean install

将生成的JAR文件复制到/projects/docker-demo目录下。

3. 创建Dockerfile

在/projects/docker-demo目录下新建dockerfile文件，内容如下：

# 基础镜像
FROM java:8
# 维护者信息
MAINTAINER rex
# 匿名卷，确保临时文件不丢失
VOLUME /tmp
# 复制JAR文件
ADD springboot-docker-demo-0.0.1-SNAPSHOT.jar /docker-demo.jar
# 启动Spring Boot应用
ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-jar", "/docker-demo.jar"]

4. 构建镜像并运行容器

在项目目录下执行以下命令：

docker build -t imagename .

启动容器：

docker run -d --network=host -p 8080:8080 --name springboot-container imagename

参数说明：

-d：容器运行在后台

--network=host：与主机共享网络

--name：容器名称

-p 8080:8080：映射宿主机8080端口到容器

5. 测试接口

通过浏览器访问http://localhost:8080/hello测试接口是否正常响应。

五、创建React前端项目

1. 初始化React项目

在终端执行以下命令：

yarn create react-app react-demo
cd react-demo
yarn add axios

修改App.js文件，添加axios调用接口功能。

2. 打包前端代码

运行以下命令：

yarn build

将生成的build文件夹复制到/projects/docker-demo目录下。

六、配置Docker Compose

在项目根目录下新建docker-compose.yml文件，内容如下：

version: '2'
services:
  - nginx
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./build:/usr/share/nginx/html
    command: /bin/bash -c "nginx -g 'daemon off;'"
  - springboot:
    build: .
    environment:
      - JAVA_ENV=development
    ports:
      - "8080:8080"

七、配置Nginx（高级配置）

在项目根目录下新建nginx.conf文件，内容如下：

server {
    listen       80;
    server_name  localhost;
    
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    
    location /api/ {
        proxy_pass http://springboot:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    error_page 404 /404.html;
    error_page   500 502 503 504 /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}