一、准备工作
1.阿里云服务器一台
2.Xshell和Xftp连接软件
3.自己的SpringBoot+vue项目
二、具体操作
1.前端部署
在控制台输入如下命令对vue项目进行打包,打包前注意调整好项目的参数、配置等,如果有误,只能重新打包重新部署了┭┮﹏┭┮,注意一下axios的请求根路径,host配置为你的云服务器地址,而不是localhost
npm run build
打包完毕后会得到如下的dist文件夹
然后使用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
然后使用如下命令运行容器,其中-p后面参数的意思是将云服务器的8888端口作为前端项目的端口
docker run -d --name vue_blog -p 8888:80 vue_blog
运行成功可以使用如下命令查看到
docker ps
2.后端部署
idea直接使用maven就可以打包了,打包前记得引入maven的插件,如果你的redis和mysql是使用docker安装的,地址记得换为云服务器地址。
打包成功后可以在target目录下看到项目的jar包
然后也是一样的步骤,使用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建议设置来源为你的云服务器地址。做好这一步,你的项目才能完整访问到。
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地址,就能直接访问到你的项目。