docker部署springboot+vue项目(说明nginx配置)

本篇记录通过Dockerfile来生成image并通过挂载的方式进行数据的同步

安装docker环境

# 1.需要的安装包
yum install -y yum-utils

# 2.设置镜像的仓库
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 3.更新yum软件包索引 
yum makecache fast

# 4.安装docker docker-ce 社区版 ee 是企业版
yum install docker-ce docker-ce-cli containerd.io

# 5.启动docker
systemctl start docker

# 6.使用 docker version 查看是否安装成功
docker version

docker创建springboot的image

1、下载jdk

# 1.搜索需要的环境
docker search jdk

# 2.通过环境名进行下载
docker pull ascdc/jdk8

# 3.查看是否下载成功
docker images

在这里插入图片描述
在这里插入图片描述

2、在虚拟机里创建目录并上传Springboot文件和Dcokerfile文件

本次demo放在 */home/idea

在这里插入图片描述
Dockerfile镜像文件内容如下

# 一定要和 docker pull的版本相同
FROM ascdc/jdk8

# 添加内容->添加同目录 
ADD casex.jar /app.jar

CMD ["--server.port=8000"]

EXPOSE 8000

# 指定这个容器启动的时候要运行的命令
ENTRYPOINT ["java","-jar","/app.jar"]

3、进入当前目录构建image

# 进入ja包和Dockerfile文件目录
cd /home/idea

# 后面 .
docker build -t testcsdn .

# 查看是否生成成功
docker images

在这里插入图片描述

# 启动镜像
docker run -d --name testcsdn -p 8000:8000 -v /mnt/upload:/mnt/upload testcsdn

# 使用docker镜像testcsdn以后台模式启动一个容器,并将容器命名为testcsdnrun。
# -v: 挂载需要的目录,格式为:主机:容器内
# -p: 指定端口映射,格式为:主机(宿主)端口:容器端口

在这里插入图片描述

docker创建nginx并实现前后端调用(nginx配置)

1、下载nginx

安装nginx,步骤与安装jdk相同

# 1.搜索需要的环境
docker search nginx

# 2.通过环境名进行下载
docker pull nginx

# 3.查看是否下载成功
docker images

2、上传dist文件和Dockerfile文件

本次上传的地址为 /frontend-docker(新建)

在这里插入图片描述

Dcokerfile文件内容如下

FROM nginx

RUN mkdir /dist

# 将文件拷贝到镜像中
COPY ./dist /dist

COPY ./nginx.conf.template /

# 指定这个容器启动的时候要运行的命令
# envsubst 进行替换
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf && cat /etc/nginx/nginx.conf && nginx -g 'daemon off;'

nginx.conf.template文件内容如下

user nginx;
 
worker_processes  1;

events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    
    sendfile        on;
    
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  xxx.xx.xx.xxx;

        #access_log  logs/host.access.log  main;
        location / {
            root   /dist;
			#try_files $uri /index.html; #解决路由重定向跳转 404 页面配置
            index  index.html index.htm;
        }
		
        location /api/ {
            proxy_pass http://xxx.xx.xx.xxx:8000/api/;
            
        }
		location /api/images/{
            alias /mnt/upload/;
			autoindex on;
        }
        #通过调用/api/v1/common/download/接口--->找到服务器/mnt/upload/head_image/文件下得内容
		location /api/v1/common/download/{
            alias /mnt/upload/head_image/;
			autoindex on;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
 
}

3、构建进行并运行

# 最后那个点是必须的,代表当前目录
docker build -f Dockerfile -t my-frontend:v2.0 .

# -后台运行
# --name nginx03  设置容器名字叫nginx03
# -p 3000:80 公网ip的3000端口对应该容器的80端口
# --restart=always设置了开机自启
# my-frontend:v2.0 构建的镜像的名字
docker run -d --name nginx03 -p 3000:80 --restart=always my-frontend:v2.0


在这里插入图片描述

最后docker ps 查看运行的容器

在这里插入图片描述

在浏览器进行访问

通过登录接口调用进入后台
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值