Docker部署Springboot+vue前后端分离项目

一、准备工作

有个安装好docker的服务器

1、安装java8

先下载java8

docker pull java:8

运行java8

docker run -itd --name java java

检查

如果有java:8说明运行成功

docker ps 

2、安装nginx

下载nginx,直接下载最新版本

docker pull nginx

运行

docker run -d -p 80:80 nginx

检查

如果有nginx说明运行成功

docker ps

二、部署后端

1、打包后端项目

直接用idea的maven工具，先清除，在打包，有些版本的idea可能有问题，可以先clean，然后install，最后package，注意是jar包

2、上传到服务器

你可以自己在根目录创建一个文件夹用来放你的文件，我就喜欢在根目录中创建一个叫project的文件夹，然后再在内部创建一个项目文件夹，最后在去里面创建对应的项目，比如我有个xgj项目，我的目录就是

后端:/project/xgj/xgj/xgj-0.0.1-SNAPSHOT.jar

前端:/project/xgj/xgj-vue/dist.zip

3、编写Dockerfile文件

在你得项目目录下，直接vim Dockerfile 编写，按i进入插入模式，记得自己改改配置，改完了退出，用esc + :wq!

FROM java:8
# 作者
MAINTAINER 不知名的帅比
# 添加jar到镜像并命名为xgj.jar
ADD xgj-0.0.1-SNAPSHOT.jar xgj.jar
# 镜像启动后暴露的端口
EXPOSE 8089
# jar运行命令，参数使用逗号隔开
ENTRYPOINT ["java","-jar","xgj.jar"]

4、构建部署

构建镜像

在你的项目目录下，输入

docker build -t xgj .

注意xgj是项目名称，他后面还有个"." 这个点表示构建当前目录

运行

在项目目录中运行

docker run -d -p 8089:8089 xgj

xgj是你的项目名称，如果你有版本号记得要跟上版本号，可以用docker ps检查

5、放行端口

如果你是用的阿里云服务器，记得去安全组里面放行这个端口，其他的云没用过

6、检查

公网访问

三、部署前端

1、打包前修改

修改config/index.js中的assetsPublicPath: './'

在build/utils.js中添加publicPath: '../../'

网页图标修改

如果你的网页有图标在修改

在build/webpack.prod.conf.js和webpack.dev.conf.js中添加如下，图标记得放在根目录

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon:path.resolve('favicon.ico') // 这一样是添加的
    }),

2、打包前端项目

直接在项目目录下输入npm run build 

等待打包完成，打包完成后在项目目录下多出来个dist文件夹，直接把他压缩成zip文件

Docker服务器部署

记得先安装nginx

1、上传dist.zip压缩包,并解压

目录自己建立项目目录，比如我有个xgj的项目，他有前后端，我的文件目录是

/project/xgj/xgj-vue/dist.zip

解压zip用unzip

安装unzip用

sudo yum unzip

解压 unzip dist.zip

2、编写配置文件

Dockerfile文件

这里面的命令主要是为了复制自己的html文件和配置文件，进nginx容器中

FROM nginx
# 作者
MAINTAINER 不知名的帅比
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html/

default.conf文件

    server {
        listen       8080;
        server_name  localhost;#修改为宿主机的ip

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist; # 项目所在路径
            index  index.html index.htm; # 默认访问主页
            # try_files  $uri $uri/ index.html=404; # 解决vue项目刷新404的问题
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
        # 代理
        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            proxy_pass http://localhost:8089/;
            proxy_set_header Host $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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

3、构建部署

构建镜像

直接在项目路径中

docker build -t xgj-vue .

注意xgj-vue是项目名称，最后面有个"."，表示构建当前目录

运行

直接运行

docker run -d -p 8080:80 xgj-vue

注意8080是你暴露的端口,xgj-vue是你的项目名称

docker ps检查

公网访问

记得去对应的服务器厂商放行你的端口

windows nginx部署

安装nginx

下载nginx.zip

nginx: download

上面的是最新版本，红框框起来的是稳定版本，建议稳定

下载到目录后解压到你自己的目录中，双击nginx.exe运行

重载配置文件:nginx -s reload

停止nginx服务：nginx -s stop

关闭是：taskkill /f /t /im nginx.exe

2、复制文件

将之前打包的dist文件复制到html下

3、修改配置

conf/nginx.conf

修改为如下

    server {
        listen       8080;
        server_name  localhost;宿主机ip

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist; # 项目所在路径
            index  index.html index.htm; # 默认访问主页
            # try_files  $uri $uri/ index.html=404; # 解决vue项目刷新404的问题
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
        # 代理
        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            proxy_pass http://localhost:8089/;
            proxy_set_header Host $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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

修改完成后记得重新加载下nginx配置文件

4、访问

直接浏览器访问localhost:8080