前后端分离的Vue+Spring boot+redis部署

配置redis

参考
在Oracle cloud上, 用docker部署redis.

注意由于redis默认是本机访问，而前后端分离需要docker间通讯，所以要修改redis.conf.

配置Spring boot

参考

在Oracle Cloud上，Centos 8 + Docker 20.10.6 + Spring boot 2.51 + Mysql 8部署

有几点不同：

1. 由于使用到了redis，所以Docker文件中的传入参数要增加redis的四个参数，以便能在docker启动时从外部传入。

ENV redis_host=""
ENV redis_port=""
ENV redis_password=""
ENV redis_timeout=""

ENTRYPOINT ["sh","-c","java -jar /xxxxx.jar --spring.datasource.username=$username --spring.datasource.url=$url --spring.datasource.password=$password --spring.redis.host=$redis_host --spring.redis.port=$redis_port --spring.redis.password=$redis_password --spring.redis.timeout=$redis_timeout"]
复制代码

docker run --name xxxxx --network xxxx-net --link MySQL80:MySQL80 -e redis_host="xxx.xx.x.x" -e redis_port="6379" -e redis_password="xxxxxx" -e redis_timeout="30000" -e username="xxxx" -e password="xxxxxx" -e url="jdbc:mysql://MySQL80:3306/xxxxx?useUnicode=true&characterEncoding=utf8&useCursorFetch=true&defaultFetchSize=500&allowMultiQueries=true&rewriteBatchedStatements=true&useSSL=false" -p 9999:9999 -d xxxxxx:v3

2.注意将spring boot,mysql,redis和nginx放在同一个网络段中，避免docker之间无法通讯。

vue的打包

默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run build即可。

需要注意的是，在打包完毕后，要仔细查看输出日志，看看报错和警告，尽量避免由于版本冲突等等导致生成的文件在后面带来无数的坑。

在nginx上部署vue。

nginx的安装参考

用Docker部署Nginx

在网上一般的介绍，都是将vue再进一步打成docker。因为我们这里已经将nginx的配置目录，html目录等都链接到容器外，所以可以直接将vue打好的文件直接放在html目录下，也是起作用的。

但需要注意的是，在开发模式时，vue的router会vue.config.js中的devServer:下配置后端应用的地址，vue的打包是不包括这些的，所以必须在nginx中去配置后端应用地址。

打开conf.d/default.conf文件，

location / {
            root   /nginx/html;
            index  index.html index.htm;
        }
复制代码

中，增加一条try_files $uri $uri/ /index.html;

再新增一个nginx proxy去router到后端，如下：

location /back end app {
            proxy_pass   http://xxx.xxx.xxx.xxx:8080/back end app;
        }
复制代码

特别强调的是，proxy_pass的地址，不要用Localhost，因为我们是docker互访，从nginx的docker是无法通过localhost去访问另一个docker的，要通过ip或者link去访问。