docker部署前后端项目

一. 部署环境

我这边是使用虚拟机+CentOS7 做服务器，使用的项目是ruoyi的springboot项目。
首先这边需要将redis和mysql跑起来。
docker教程：
1、docker命令
2、docker下载各种软件https://www.runoob.com/docker/docker-tutorial.html（redis/mysql）

二. 后端打包

修改项目对应的数据库和redis对应的ip、端口，账号密码，与虚拟机上的进行一一对应。
在服务器安装jdk，将项目mvn package （打包）之后 放到指定的文件夹中。
jar - jar xxx.jar
然后进行测试！！

三. 前端打包

前端配置文件修改链接后端对应的IP和端口
进行打包 npm run build:prod
项目下面会出现dist的打包文件夹
部署vue
1.将dist文件夹上传到服务器的一个目录中：/home/docker/java/vue01

2.编写default.conf 文件，并上传到 /home/docker/java/vue01目录中

server {
        listen       80;
        server_name  192.xx.xx.xx;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://192xx.xx.xx:8083/;
		}
		location /boom {
			proxy_redirect off;
			proxy_pass http://192xx.xx.xx:8083/;
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}


        #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   /usr/share/nginx/html;
        }

        
    }

3.在 /home/docker/java/vue01目录中，创建Dockerfile文件，这里是使用nginx进行反向代理，删除了nginx的默认配置，添加我们自己的配置到容器去。

# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER xxm
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

4.在 /home/docker/java/vue01目录中，执行命令创建镜像（注意后面的点不可以省略）

docker build -t vue-demo .

5.运行镜像的一个容器

docker run -d --name vue-demo-run -p 80:80 vue-demo
docker ps

6.浏览器中访问测试

http://服务器ip:80

前端部署引用：原文链接：https://blog.csdn.net/csdn_xxm/article/details/111667330