Nginx+DockerDesktop部署vue+springBoot项目

一.前言

很久没写csdn了，这次带来的是在windows系统下，将自己的前端vue项目和后端的springBoot项目分别部署在nginx和dockerDesktop上

二 .前端部署

2.1.注释前端项目的代理设置

找到根目录下的vue.config.js或者vite.config.ts,并注释掉所有的代理

2.2.打包vue项目

这一步很简单，直接在项目的控制台输入：

npm run build

等待项目打包完成，就会在根目录出现dist文件夹：

注：如果在打包过程中出现问题，如果你用的是ts语言且出现ts无法识别某个符号的问题，大概率就是ts版本冲突，调整对应的版本即可，我是直接查看根目录下的package.json的ts依赖，直接在文件上更改的版本，之后  npm i  即可

2.3.将项目部署在nginx上

打开nginx文件夹，找到html文件夹，将刚才打包好的dist文件夹的内容ctrl + c、ctrl + v即可：

2.4.使用nginx的反向代理

打开nginx下的conf文件夹，打开nginx.conf，修改对应的代理设置：

# 负载均衡的设置
upstream server_list{ 
        # 后端接口的服务端口
        server localhost:8888 weight=1;
}

    server {
        # nginx的监听端口
        listen       80;
        # 服务名
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
            # 静态文件重定向
            try_files $uri $uri/ /index.html;
        }

        location /vue3-back/ {
            proxy_pass http://server_list/;
            # 请求头信息传递
            proxy_set_header Host $host;
        }

    }

如有不懂的小伙伴可自行百度，这里我就不多做论述了

2.5.测试部署的前端项目

在完成上述步骤之后我们在浏览器输入 localhost 即可看到自己的vue项目的页面了：

三.后端部署

3.1.项目打包与部署

大家可以结合我上一篇的打包与部署的方式（毕竟只是单机部署，写死什么的没什么）

点击我跳转

3.2.调整其他关联服务

3.2.1.调整kafka服务

由于某些原因，我的kafka是放在windows上的（推荐放在虚拟机上），所以我们打开kafka文件夹，找到 config 下的 server.properties 并打开，进行如下操作：

# 注释掉本机的监听
# listeners=PLAINTEXT://localhost:9092

# 启用外部监听，并暴露本机的ip与端口
advertised.listeners=PLAINTEXT://192.168.xx.xx:9092

注：重启kafka即可，如果你在测试kafka时出问题，可以直接删除kafka-logs文件的内容（这个文件是自行添加的，主要是为了方便查看） 

3.2.2.调整redis服务

由于本人图方便，我的redis同样安装在windows上，所以我们打开redis文件夹，直接找到并打开redis.windows.conf 文件，进行如下操作：

# 在本地端口后面添加本机的IP即可
bind 127.0.0.1 192.168.xx.xx

然后在redis文件目录下使用这个命令去指定配置文件启动：

redis-server.exe redis.windows.conf

运行结果如下：

注：如果出现无法启动问题（ Could not create server TCP listening socket ...），那就是本机的IP有误，请仔细检查IP

3.2.3.调整mysql服务

这个大家应该但部分都是windows吧，所以它最好整，直接打开navicat或者其他的可视化管理工具，然后打开对应服务器的 mysql 数据库，然后新建查询，输入以下sql语句：

# 更新 root 用户的host访问权限
update user set host = '%' where user = 'root'
# 刷新权限，必要动作不然不生效
FLUSH PRIVILEGES

注：重连数据库即可（我这里没啥问题，没有如果了，噗~）

3.3.测试部署的后端项目

打开dockerDesktop并启动对应的服务应用即可（别忘了映射端口）：

四.部署项目的交互测试

注：如果在测试过程中，或者部署过程中遇到了其他的问题，大家可以在评论区留下评论，我会不定时为大家给予我力所能及的帮助 

五.总结 

感谢大家能够观看这篇文章，如有不正确的地方还请各位大佬和小伙伴们的指正，让我们一起成长

生活还要继续，牛马也要休息，大家天天开心！