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

你的名字 2024-04-07 13:46 37阅读 0赞

*  **拉取镜像**

docker pull nginx:1.18

*  **运行nginx**

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

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

http://Docker宿主机IP:80

![在这里插入图片描述][1259ba79f5f5491fb2cb210ee312cb45.png]

*  **查看容器内的配置文件**

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

*  **修改内容如下**

注：  
1.`/www/dist`为vue文件存放的目录，需要自己创建，将解压后的vue文件放置在改文件夹下，文件目录结构如下：  
![在这里插入图片描述][0b0ced85c5e149739a93b80f6ba90f3c.png]  
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

**注意防火墙开放端口！**

[1259ba79f5f5491fb2cb210ee312cb45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2091386834b94d43963d592374776a70.png
[0b0ced85c5e149739a93b80f6ba90f3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4f3f68f346d943948891c4f17a5c8a7f.png