docekr 部署vue项目到nginx服务器,反向代理tomcat服务器

首先还是直接上操作的过程,具体的docekr的安装教程很简单,而且按照官方的 docker安装详情 即可完成安装,一般问题不大。

那么现在开始

第一步拉取nginx镜像

sudo docker search nginx  sudo docker pull nginx  

在此之前你应该先去部署好tomcat容器,因为需要一个tomcat容器的IP地址来充当配置nginx反向代理的服务器 有需要可以查看我的另一篇博客,那里详细介绍了tomcat容器部署项目

配好tomcat容器后接着继续配置nginx

查看tomcat的ip地址

sudo docker inspect [tomcat容器的名称或者id] 

vim 构建一个nginx的 default.conf 配置文件

vim default.conf 

下面的注释请仔细阅读,我写的尽量很详细

server { listen 8081; server_name localhost;  client_max_body_size 2000M;   access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / {  root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; }   location /api {  proxy_pass http://172.xx.xx.xx:8080;  proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Referer $http_referer; proxy_set_header X-Scheme $scheme; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Cookie $http_cookie;    rewrite "^/api/(.*)$" /{项目名称}/$1 break; proxy_cookie_path /{项目名称}/ /; proxy_cookie_path /{项目名称} /; proxy_connect_timeout 1800s; proxy_send_timeout 1800s; proxy_read_timeout 1800s; fastcgi_connect_timeout 1800s; fastcgi_send_timeout 1800s; fastcgi_read_timeout 1800s;  }    error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } 

rewrite 参数介绍

 rewrite <regex> <replacement> [flag]; 关键字 正则 替代内容 flag标记 

关键字:其中关键字error_log不能改变

正则:perl兼容正则表达式语句进行规则匹配

替代内容:将正则匹配的内容替换成replacement

flag标记:rewrite支持的flag标记

flag标记说明:

  1. last #本条规则匹配完成后,继续向下匹配新的location URI规则
  2. break #本条规则匹配完成即终止,不再匹配后面的任何规则
  3. redirect #返回302临时重定向,浏览器地址会显示跳转后的URL地址
  4. permanent #返回301永久重定向,浏览器地址栏会显示跳转后的URL地址

注意⚠️:如果vue-router使用的是history模式,try_files $uri $uri/ /index.html; 非常重要!!!

因为我们的应用是单页客户端应用,如果后台没有正确的配置,当用户在浏览器访问地址时,就会返回404。

所以需要在服务端增加一个覆盖所有情况的候选资源,如果URL匹配不到任何静态资源,则应该返回同一个index.html页面,这个页面就是你app依赖的页面。

上面的文件定义了首页的指向为/usr/share/nginx/html/index.html,所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

client_max_body_size 参数介绍

如果你的项目中牵扯到文件上传的话,则需要配置该文件限制上传文件的大小,因为我的项目上传文件可能会很大,所以我设置的也很大,大家可以按照自己的需求来修改,如果超出限制的话会把报错405,默认不设置为1M

可以选择在http{ }中设置:client_max_body_size 20m;

也可以选择在server{ }中设置:client_max_body_size 20m;

还可以选择在location{ }中设置:client_max_body_size 20m;

三者到区别是:http{}中控制着所有nginx收到的请求。而报文大小限制设置在server{}中,

则控制该server收到的请求报文大小,同理,如果配置在location中,则报文大小限制,

只对匹配了location 路由规则的请求生效。

重要的参数介绍的差不多了,接下来继续配置

开始构建Dockerfile文件

vim Dockerfile 
 FROM nginx  MAINTAINER pang  COPY dist/ /usr/share/nginx/html/  COPY config/default.conf /etc/nginx/conf.d/default.conf 

ls查看目录结构:
config里存放的是default.conf,dist目录是vue编译后的目录在这里插入图片描述
准备构建新的镜像,注意要在 Dockerfile文件的当前目录。

#注意这里有个点 别忘了 名称必须小写,不然会报错

sudo docker build -t mynginx .  

-t 是给镜像命名 ,mynginx是生成镜像的名字,. 是基于当前目录的Dockerfile来构建镜像。

启动nginx容器

sudo docker run -d -p 8081:8081 --name nginx --restart=always mynginx 

至此,nginx服务器就已经配置完毕,可以通过虚拟机的地址和映射的端口进行访问
-p 映射虚拟机和docker容器的端口
-d 后台运行

进入nginx 容器

sudo docker exec -it nginx bash 

原文链接:https://blog.csdn.net/weixin_42962634/article/details/105142797

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享