使用docker-compose部署前后端分离项目
前提
工具
前端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: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 .
后端打包[本例使用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_b
ports:
- "8081:8081"
frontend:
build:
context: .
dockerfile: Dockerfile-zh-Hans
ports:
- "4200:80"
用xftp将文件拷贝服务器
将前端dist 文件内容 、后端jar包 、前端Dockerfile、后端Dockerfile以及docker-compose.yml文件拷进服务器
用xshell 运行docker-compose.yml
运行docker-compose up
结束
如此便可成功访问。