docekr 部署vue项目到nginx服务器，反向代理tomcat服务器_nginx反向代理docekr部署的wordpress,访问域名以后wordpress样式丢失

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

那么现在开始

第一步拉取nginx镜像

sudo docker search nginx #查看nginx 

sudo docker pull nginx   #拉取nginx镜像
1
2
3

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

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

查看tomcat的ip地址

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

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

vim default.conf
1

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

server {
			listen       8081;
			server_name  localhost;    	   #要转发的源域名  如果配置了其他的域名则需要去host文件中修改，否则不会生效
			client_max_body_size 2000M;    #限制文件上传的大小
			
			#charset koi8-r;
			access_log  /var/log/nginx/host.access.log  main;
			error_log  /var/log/nginx/error.log  error;

			location / {     #作为vue项目的静态服务器 访问首页
				root   /usr/share/nginx/html;
				index  index.html index.htm;
				try_files $uri $uri/ /index.html;
				
			}
			#反向代理 /api 的地址
			#注意:我的是vue项目都是以/api开始 大家要选择性粘贴,如果不同的话则需要修改为自己的接口
			location /api {       
				#反向代理地址  
				proxy_pass http://172.xx.xx.xx:8080; #Tomact的IP地址 转发目标
				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; #请求发送时携带cookie信息
				
				#重写地址 /api/{path}  为/{path}  注意 tomcat发布成功后一般是带项目名称的访问 千万别忘了 
				#注意:我的是vue项目都是以/api开始 大家要选择性粘贴,如果不同的话则需要修改为自己的接口
				rewrite "^/api/(.*)$" /{项目名称}/$1 break;    
				
				proxy_cookie_path /{项目名称}/  /;
				proxy_cookie_path /{项目名称}   /;
				proxy_connect_timeout  1800s;#nginx跟后端服务器连接超时时间(代理连接超时)
				proxy_send_timeout  1800s;#后端服务器数据回传时间(代理发送超时)
				proxy_read_timeout  1800s;#连接成功后，后端服务器响应时间(代理接收超时)
				fastcgi_connect_timeout 1800s;#指定nginx与后端fastcgi server连接超时时间
				fastcgi_send_timeout 1800s;#指定nginx向后端传送请求超时时间（指已完成两次握手后向fastcgi传送请求超时时间）
				fastcgi_read_timeout 1800s;#指定nginx向后端传送响应超时时间（指已完成两次握手后向fastcgi传送响应超时时间）    
				
				#两个斜杠表示将源访问地址的“/”路径的cookie复制到目标地址的“/”路径。
			}	
			#error_page  404              /404.html;

			# redirect server error pages to the static page /50x.html
			#
			error_page   500 502 503 504  /50x.html;
			location = /50x.html {
				root   /usr/share/nginx/html;
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

rewrite 参数介绍：

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

关键字：其中关键字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
1

#设置基础镜像
FROM nginx
# 定义作者
MAINTAINER pang 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY config/default.conf /etc/nginx/conf.d/default.conf
1
2
3
4
5
6
7
8

ls查看目录结构：
config里存放的是default.conf，dist目录是vue编译后的目录
准备构建新的镜像，注意要在 Dockerfile文件的当前目录。

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

sudo docker build -t mynginx .      #注意这里有个点  别忘了  名称必须小写
1

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

启动nginx容器

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

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

进入nginx 容器

sudo docker exec -it nginx  bash
1