通过docker部署前后端项目
前置条件
需要在docker中拉去jdk镜像、nginx镜像
docker pull openjdk:17 #拉取openjdk17镜像
docker pull nginx #拉取nginx镜像
部署后端
1.打包后端项目
点击maven插件下面的Lifecycle的package 对后端项目进行打包 等待打包完成即可
2.将打包好的jar包上传到服务器
将打包好的项目jar包直接上传到服务器上面即可
3.配置dockerfile文件
vim dockerfile #vim文本编辑器
FROM openjdk:17 #jdk版本RUN mkdir /app COPY canteen-0.0.1-SNAPSHOT.jar /app/CMD java -jar /app/canteen-0.0.1-SNAPSHOT.jarEXPOSE 8088 # 暴露端口
4.构建成docker镜像
执行docker build -t 完成镜像构建
docker build -t canteen . # 构建镜像
# 等待构建完成后执行docker查看镜像是否构建成功
docker images #查看镜像
5.运行docker镜像
执行下述命令完成docker命令完成容器启动
docker run -d -p 8088:8088 --restart unless-stopped --name app canteen # -p 端口映射 --restart 设置为开机自启动
如果能看到上诉信息就说明后端项目部署成功
部署前端vue项目
1.打包前端项目
在前端项目执行npm run build对vue项目进行打包
npm run build
等待构建完成后在会出现dist文件夹 dist文件下即为vue项目的依赖和文件
2.上传至阿里云服务器
3.编写default.conf配置文件
在dist同层目录下 vim default.conf 进入vim编辑器完成default.conf的配置
server {listen 80;server_name docker_ip_address; # 修改为docker服务宿主机的iplocation / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html =404;}# 跨域配置location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://backend_server_ip:port/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}
4.编写dockerfile文件
同理通过vim dockerfile 完成dockerfile的配置
vim Dockerfile
FROM nginxMAINTAINER travelerRUN rm /etc/nginx/conf.d/default.confADD default.conf /etc/nginx/conf.d/COPY dist/ /usr/share/nginx/html/
5.构建docker镜像
执行docker build 完成镜像的配置
docker build -t webapp . # 构建镜像
# 等待构建完成后执行docker查看镜像是否构建成功
docker images #查看镜像
6.启动镜像容器
启动docker镜像
docker run -p 80:80 -d --name webapp webapp
查看最终效果
到此就完成前后端项目的部署啦