Docker 部署前后端分离项目

前言

Docker & MySQL & Redis已完成安装的情况下,只需要构建后台接口服务和nginx静态资源的前端页面即可。

部署SpringBoot项目

  1. 将Maven Package 打包后的jar包上传至服务器指定目录
  2. 编写Dockerfile文件
FROM java:8
COPY *.jar /app.jar
EXPOSE 8088
ENTRYPOINT ["java","-jar","app.jar"]

# FROM 基于jdk1.8镜像
# COPY 将当前目录的jar包复制成名为app.jar
# EXPOSE 向外暴露的端口
# ENTRYPOINT 执行的命令
  1. 构建后台接口服务镜像 **docker build -t images_name:version .**
    1. images_name 镜像名
    2. version 指定版本,可以忽略不写,不指定版本则为最新版本 latest
    3. Dockerfile文件与项目的jar包要处于统一目录
    4. docker images 可以查看生成的容器信息
    5. 最后的.不要忘记

image.png
image.png

  1. 启动后台接口服务容器

image.png

docker run -d -p 8088:8088 --name=admin-api --network=app_app images_name:version

# images_name:version 上面构建镜像时所指定的名字和版本,如果版本没有指定只写镜像名即可
# -p 暴露端口
# --name 容器名称
# --network 指定网络桥段,容器如果设置了统一的网络桥段,则在容器内可以通过容器名称代替ip访问

部署Nginx&Vue项目

  1. 打包Vue项目服务 **npm run build:prod** 将产物dist目录移至服务器指定目录(与Nginx容器所对应的静态资源数据卷位置)
  2. 初始化Nginx数据卷
    1. 日志:/usr/local/docker/app/nginx/config/nginx.conf
    2. 配置文件:/usr/local/docker/app/nginx/logs
    3. 静态资源:/usr/local/docker/app/admin/vue/dist
  3. 编辑配置文件,配置vue所请求的后端接口地址,此处可以通过容器名称进行访问。
http {
    server {
        listen       80;
        server_name 10.0.4.14 www.snowl.space;
        error_page 500 502 503 504 /50x.html;
        error_page 400 404 error.html;

        location / {
            root /usr/share/nginx/html; # 网站根目录
            index index.html index.htm; # 默认首页文件
 						try_files $uri $uri/ @rewrite; # 防止重定向问题	
        }

 				location @rewrite{
            rewrite ^.*$ /index.html last;
        } 
		
    		# 后台接口
    		location /neo/ {
            proxy_pass http://admin-api:8808;
        }
		}
}

  1. 启动Nginx容器
docker run -d -p 80:80 --name app_nginx --network=app_app --restart=always -v /usr/local/docker/app/nginx/config/nginx.conf:/etc/nginx/nginx.conf 
-v /usr/local/docker/app/nginx/logs:/var/log/nginx -v /usr/local/docker/app/admin/vue/dist:/usr/share/nginx/html nginx
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值