试了试,不进行步骤二在阿里云里部署成功了
一、部署后端
(一)更改后端的跨域配置
config下的WebMVCConfig
你的前端项目端口号不一定是8080,改成对应的即可
registry.addMapping("/**").allowedOrigins("http://localhost:8080","http://虚拟机ip:8080");
(二)打jar包
在maven下的blog-parent(root)中,先clean,再package
(三)把target下的jar包通过xftp传输到/usr/local中
在/usr/local中执行下面的代码,-jar后面的是你打包后的jar包名称
nohup java -jar blog-api-1.0-SNAPSHOT.jar > ams.log 2>&1 &
返回一个进程号,然后你可以用postman测试接口是否正常。
二、nginx.conf的修改
ps:我修改后没重启nginx,也就是nginx.conf没生效。但是“步骤三”完成后网站也运行成功了,不清楚为什么。后又重启nginx之后,项目运行也没什么问题。
1、参考文章:如何进入nginx的镜像并修改nginx.conf
2、nginx.conf的具体修改内容如图
3、重启nginx
三、部署前端vue
后端端口不是8888的话,修改成自己的
(一)更改dev.env.js
BASE_API: '"http://虚拟机ip:8888/"'
(二)更改prod.env.js
BASE_API: '"http://虚拟机ip:8888/"'
(三)打包前端
在前端项目路径下执行
npm run build
(四)把获得的dist文件夹通过xftp传输到/opt/vue中(建一个vue文件夹)
dist文件夹包含static和index.html
(五)在vue下新建Dockerfile
1、执行代码
vi Dockerfile
2、Dockerfile中的内容
FROM后填的是你的nginx对应版本的镜像
FROM nginx:latest
MAINTAINER 你的邮箱即可
COPY dist/ /usr/share/nginx/html/
3、保存Dockerfile
最终vue文件夹下包含Dockerfile和dist
(五)运行前端项目
1、在当前路径下执行代码
后面的“.”不要漏了
docker build -t 镜像的名字(随便起,我起的vue) .
2、再执行
–name后的“vue”是容器的名称(也是随便起)
最后那个“vue”即上一段代码创建的“镜像的名字”
项目端口是8080,nginx的端口是80
docker run -d --name vue -p 8080:80 vue
(六)验证
然后通过浏览器访问虚拟机ip:8080即可。
四、ES出现一些问题
之前存入ES的文章查询不出来。
我新发布一篇文章(后端实现了发布一篇文章后就将其加入ES)后,可以查询到新的文章,以前加入的依旧查询不了。