前言

部署完springboot的后盾项目之后，纠结再三，终于把vue也给部署到docker上了。但是很难受啊！因为nginx太难搞了!没学过nginx就是不爽啊!处处受限制!可哥们不怂啊

开搞

1.打开虚拟机(没钱，只能用虚拟机了，我的是centos7的)

2.添加想要暴露的端口
2.1 看是否有想要开启的端口firewall-cmd --list-port
2.2 没有就添加firewall-cmd --zone=pubilc --add-port=端口/tcp --permanent
2.3 要开启两个端口，一个后端的，一个前端的
2.4 重启防火墙firewall-cmd --reload

3.后端打jar包(打包前记得把数据库等配置改了)
3.1 idea --> maven --> clean --> package

4.后端的dockerfile

from java:8
volume /tmp
expose 后端端口
add test.jar app.jar 
entrypoint ["java","-jar","app.jar"]

5.后端文件上传服务器

后端

6.打镜像并运行
6.1 进入到后端文件的根目录下打镜像docker build -t 后端镜像名 .
6.2 运行docker run -p 防火墙端口1:后端端口 -d --name=容器名后端镜像名

后端

7.前端打dist包
7.1 npm run build
7.2 把整个dist包拿出来

8.前端的default.conf

server {
  listen       80;  //nginx监听的端口
  server_name  localhost;  //本机IP
  location / {
    root   /usr/share/nginx/html;  //找nginx的html文件夹
    index  index.html index.htm;    //找到里面的index.html页面
    try_files $uri $uri/ /index.html;    //解决路径无#，刷新出现404
  }
  location ^~ /api/ {  //解决跨域
    proxy_pass http://后端IP:后端端口/;
  }
  error_page 404 /404.html;

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root html;
  }
}

9.前端的dockerfile

FROM nginx
#删除目录下的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf
#将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
ADD default.conf /etc/nginx/conf.d/
#将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下 
COPY dist/ /usr/share/nginx/html/

10.docker拉取nginx
10.1 docker pull nginx(不带版本号默认最新版本)

11.前端文件上传服务器