本文共 2164 字，大约阅读时间需要 7 分钟。

使用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-democd react-demoyarn 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;    }}

八、项目部署完成

运行以下命令启动容器：

docker-compose up -b

访问http://localhost:80即可查看项目页面。

转载地址：http://nwfk.baihongyu.com/