使用docker-compose部署前后端分离项目（CentOS8）_docker-compose frontend backend

前提

工具

前端frontend : Visual Studio Code
后端backend : Visual Studio Code
Xshell
Xftp

版本

前端frontend : angular
后端backend : springboot

环境

CentOS8 已安装 Docker和Docker-Compose
可参考：https://blog.csdn.net/qq_37746855/article/details/116196189?spm=1001.2014.3001.5501

前端 angularJS
后端 springboot

步骤

前端打包

ng build
1

本例打包成功后文件夹为dist/zh-Hans 内，若未设置中英文，则直接打包到dist,写法类似

编写前端Dockerfile[具体Dockerfile应应对自身项目，方法类似]

FROM nginx:alpine

RUN { \
      echo 'server {'; \
      echo '    listen       80;'; \
      echo '    server_name  localhost;'; \
      echo ''; \
      echo '    location / {'; \
      echo '        root   /usr/share/nginx/html;'; \
      echo '        index  index.html;'; \
      echo '        try_files $uri $uri/ /index.html;'; \
      echo '    }'; \
      echo ''; \
      echo '    error_page   500 502 503 504  /50x.html;'; \
      echo '    location = /50x.html {'; \
      echo '        root   /usr/share/nginx/html;'; \
      echo '    }'; \
      echo '}'; \
    } > /etc/nginx/conf.d/default.conf

EXPOSE 80

WORKDIR /usr/share/nginx/html

COPY ./zh-Hans .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

后端打包[本例使用gradle,mvn类似]

./gradlew build
1

将在build/libs文件夹内生成jar包

编写后端Dockerfile

FROM openjdk:11
VOLUME /tmp 
ADD springboot-server-0.0.1-SNAPSHOT.jar /app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java","-jar","/app.jar"]
1
2
3
4
5

编写docker-compose.yml

version : '3'
services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile_b
    ports:
      - "8081:8081"
  frontend:
    build:
      context: .
      dockerfile: Dockerfile-zh-Hans
    ports:
      - "4200:80"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

用xftp将文件拷贝服务器

将前端dist 文件内容 、后端jar包 、前端Dockerfile、后端Dockerfile以及docker-compose.yml文件拷进服务器

用xshell 运行docker-compose.yml

运行docker-compose up

结束

如此便可成功访问。