一、准备工作

1.阿里云服务器一台

2.Xshell和Xftp连接软件

3.自己的SpringBoot+vue项目

二、具体操作

1.前端部署

在控制台输入如下命令对vue项目进行打包，打包前注意调整好项目的参数、配置等，如果有误，只能重新打包重新部署了┭┮﹏┭┮，注意一下axios的请求根路径，host配置为你的云服务器地址，而不是localhost

npm run build

打包完毕后会得到如下的dist文件夹

docker中 以root权限运行 docker buildroot_spring boot


然后使用Xftp连接上云服务器，将dist文件夹上传至服务器，然后在dist文件夹的同级目录下，新建一个Dockerfile文件

vim Dockerfile

#在文件中输入如下信息
# 设置基础镜像
FROM nginx
# 将dist文件中的内容复制到
COPY dist/  /usr/share/nginx/html/
# 暴露端口，就是你的vue前端的访问端口
EXPOSE 8888

然后使用如下命令新建一个docker镜像，注意后面有一个点，vue_blog就是镜像名字

docker build -t vue_blog .

建好后可以使用如下命令查看

docker images

docker中 以root权限运行 docker buildroot_docker_02


然后使用如下命令运行容器，其中-p后面参数的意思是将云服务器的8888端口作为前端项目的端口

docker run -d --name vue_blog -p 8888:80 vue_blog

运行成功可以使用如下命令查看到

docker ps

2.后端部署

idea直接使用maven就可以打包了，打包前记得引入maven的插件，如果你的redis和mysql是使用docker安装的，地址记得换为云服务器地址。

docker中 以root权限运行 docker buildroot_spring boot_03


打包成功后可以在target目录下看到项目的jar包

docker中 以root权限运行 docker buildroot_spring boot_04


然后也是一样的步骤，使用xftp将jar包传到云服务器上，在同级目录下新建一个Dockerfile，blog-api-1.0-SNAPSHOT.jar就是jar包的名字

vim Dockerfile

FROM java:8
VOLUME /tmp
ADD blog-api-1.0-SNAPSHOT.jar /app.jar
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

然后也是一样的创建docker镜像

docker build -t java_blog .

然后使用如下命令运行后端项目

docker run -d --name java_blog -p 8899:8899 java_blog

3.阿里云服务器相关配置

在云服务器的控制台中，点击实例，然后点击操作中的管理，选择安全组，点击配置规则，按如下添加配置规则，前端项目、redis和mysql建议设置来源为你的云服务器地址。做好这一步，你的项目才能完整访问到。

docker中 以root权限运行 docker buildroot_docker_05

4.使用Nginx反向代理，将80端口作为项目的访问端口

首先使用docker安装Nginx，具体步骤就省略了，安装完毕后运行在80端口，然后对Nginx进行配置。在Nginx的conf目录下的nginx.conf文件中的末尾、include的上方插入如下代码，blog是起的上游服务器名称，xx.xx.xx.xx是你的云服务器地址，8888是前面配置的前端项目的运行端口

upstream blog {
	server xx.xx.xx.xx:8888;
    }

然后来到conf.d文件夹下，复制一个default.conf，随便起一个名字，在该文件中进行如下配置。这里server_name暂时设置为localhost，等后续购买域名并备案后，换成域名就可以使用域名访问你的网站了。重要的是proxy_pass这一行。

listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
	proxy_pass   http://blog;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

三、最终效果

最后的效果就是在浏览器输入你的服务器IP地址，就能直接访问到你的项目。

docker中 以root权限运行 docker buildroot_vue.js_06