入门级-最详细的springboot dubbo分布式项目docker部署全过程(终)

一.docker安装nginx并部署vue项目

vue项目打包

#在vue项目目录下执行
npm run build

然后复制打包后的文件夹dist到linux服务器上
在这里插入图片描述
这是我的两个vue项目打包上传到服务器上的样子。

docker安装nginx

#拉取镜像
docker pull nginx 

#运行容器,自定义名称和暴露端口
docker run -d --name xxx -p 3000:80 nginx:latest

复制vue项目到nginx容器内

#复制,将/home/client/目录下的全部文件复制到容器/usr/share/nginx/html/目录下
docker cp /home/client/. 容器名称或ID:/usr/share/nginx/html/

修改nginx配置文件

新建一个nginx.conf文件,如图

在这里插入图片描述
修改文件内容如下:

 
#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  localhost;
  
        location / {
        	#是你vue项目在容器内存放的位置
            root  /usr/share/nginx/html/
            try_files $uri $uri/ /index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

复制文件到容器内,覆盖掉原本的配置文件

docker cp /home/nginx.conf 容器名称或ID:/etc/nginx/

操作完成后进入容器,查看对应目录是否存在和配置文件是否修改

docker exec -it 容器ID或名称 bash

#检查完毕后停止容器后在开启
docker stop 容器ID
docker start 容器ID

配置文件目录:/etc/nginx/nginx.conf
vue项目文件目录:/usr/share/nginx/html/
最后服务器设置安全组端口3000,就可以用外网ip:端口号访问vue项目了

二.博主的项目介绍

项目是模仿bilibili的视频网站哦

使用技术:

MySQL
idea vsCode
Spring MVC,Spring,mybatis技术
Spring boot 整合dubbo，zookeeper搭建分布式微服务。
Shiro框架实现权限管理
使用maven管理，Redis服务器进行缓存管理。
使用fastdfs进行文件分布式管理。
使用docker进行服务运营。
前端使用vue、ElementUI、axios、

不多说上图:

在这里插入图片描述 分类查看
视频查看
评论
主页

最后放一张后台管理
图就不放太多了。

附上项目的访问地址:
客户端: http://193.112.249.143:3000
后台 http://193.112.249.143:3050
服务器学生机不能折腾哦，请收下留情，因为宽带低，网页初次加载会慢哦请等待。注:客户端不支持ie8一下哦，建议谷歌或者火狐浏览器。了解更多可以加q 820186198

未丶央

发布了13 篇原创文章 · 获赞 1 · 访问量 569

私信关注