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

前提

工具

前端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

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

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

FROM nginx:alpineRUN { \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.confEXPOSE 80WORKDIR /usr/share/nginx/htmlCOPY ./zh-Hans .

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

./gradlew build

将在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"]

编写docker-compose.yml

version : '3'
services:backend:build:context: .dockerfile: Dockerfile_bports:- "8081:8081"frontend:build:context: .dockerfile: Dockerfile-zh-Hansports:- "4200:80"

用xftp将文件拷贝服务器

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

用xshell 运行docker-compose.yml

运行docker-compose up

结束

如此便可成功访问。