Docker安装Nginx并部署Vue项目及接口

• 拉取镜像

docker pull nginx:1.18

• 运行nginx

docker run --name nginx -p 80:80 -d nginx:1.18

• 访问nginx
  注：需要防火墙开放80端口

http://Docker宿主机IP:80

• 查看容器内的配置文件

docker exec nginx ls /etc/nginx

• 将容器的文件拷贝到主机的usr/local/myObject/nginx目录下

docker cp -a nginx:/etc/nginx/ /usr/local/myObject/nginx

• 进入/usr/local/myObject/nginx/nginx/conf.d目录修改配置文件

cd /usr/local/myObject/nginx/nginx/conf.d

vim default.conf

• 修改内容如下

server {

	# 监听的端口号
    listen       80;
    
    # 监听的域名
    server_name  Docker宿主机IP;


    
	# vue静态资源代理
    location / {
    	# vue项目dist文件路径
        root   /www/dist;
    }


	# 后端api接口地址
    location /system/ {
    		# 反向代理,此处因为nginx会抹去前面的system,所以此处再加上
            proxy_pass   http://Docker宿主机IP:8080/system/;
			
        }

}

注：
1./www/dist为vue文件存放的目录，需要自己创建，将解压后的vue文件放置在改文件夹下，文件目录结构如下：

2.后端接口的配置规则如下：

@RestController
@RequestMapping("/system")
public class RegistrationInformationController {


    @PostMapping(value = "/test")
    public String  register() {return null}

     @PostMapping(value = "/test2")
    public String  register() {return null}

}

• 删除原来的容器

docker rm -f nginx

• 挂载目录并运行nginx

docker run --name nginx -p 80:80 -v /www:/www -v /usr/local/myObject/nginx/nginx/:/etc/nginx/ -d nginx:1.18

• 访问项目

http://Docker宿主机IP:80/项目路径

注意！！！！！！！！！！！ 注意！！！！！！！！！！！

因为docker中拉取的镜像都是精简版的，所以此处的nginx只能监听80端口，如果需要监听其他端口，则需要参照以下步骤：

• 停止nignx容器

docker stop nginx

• 根据现在的nginx容器重新生成一个镜像文件

#docker commit nginx(nginx容器id或者名称) 新的容器名称:版本号

docker commit nginx nginx2:1.18

• 更改default.conf配置文件

server {

	# 监听的端口号
    listen       80;
    
    # 监听的域名
    server_name  Docker宿主机IP;


    
	# vue静态资源代理
    location / {
    	# vue项目dist文件路径
        root   /www/dist;
    }


	# 后端api接口地址
    location /system/ {
    		# 反向代理,此处因为nginx会抹去前面的system,所以此处再加上
            proxy_pass   http://Docker宿主机IP:8080/system/;
			
        }

}


server {

	# 监听的端口号
    listen       8088;
    
    # 监听的域名
    server_name  Docker宿主机IP;



	# 后端api接口地址
    location /api/ {
    		# 反向代理,此处因为nginx会抹去前面的system,所以此处再加上
            proxy_pass   http://Docker宿主机IP:8080/api/;
			
        }

}

• 启动新的nginx容器
  注：此处使用的镜像是刚才生成的新镜像nginx2

docker run --name nginx -p 80:80  -p 8088:8088 -v /www:/www -v /usr/local/myObject/nginx/nginx/:/etc/nginx/ -d nginx2:1.18

• 移除旧的nginx镜像

docker rmi -f nginx　

注意防火墙开放端口！