Docker构建Nginx镜像并部署前台应用

偏执的太偏执、 2024-03-17 23:23 78阅读 0赞

#### 文章目录 ####

*   *  1. 简介
     *  2. 准备工作
     *  3. 编写Dockerfile
     *  4. 编写nginx.conf
     *  5. 构建镜像
     *  6. 查看镜像是否构建成功
     *  7. 运行容器
     *  8. 访问Web应用
     *  9. 总结

### 1. 简介 ###

Docker是一个开源的容器化平台，它可以帮助我们快速构建、发布和运行应用程序，实现应用程序的环境隔离和依赖管理。在本文中，我们将使用Docker构建一个Nginx镜像，并部署一个Web应用。

### 2. 准备工作 ###

在开始构建Docker镜像之前，我们需要准备一些资源，包括

1.  前台包`dist`、
2.  Nginx配置文件`nginx.conf`、
3.  `Dockerfile`

### 3. 编写Dockerfile ###

首先，我们需要创建一个Dockerfile，用于定义如何构建我们的Nginx镜像。以下是一个简单的Dockerfile示例：

# 指定基础镜像
    FROM nginx:alpine
    
    # 复制文件或目录到镜像中。可以将本地文件或目录复制到镜像的指定位置。
    COPY ./dist /project/dist
    # 用本地的nginx配置文件覆盖镜像的Nginx配置
    COPY nginx.conf /etc/nginx/nginx.conf
    
    # 设置环境变量
    # 添加时区环境变量，亚洲，上海
    ENV TZ=Asia/Shanghai
    
    # 声明要监听的端口
    EXPOSE 16001

在上述Dockerfile中，我们使用了Nginx官方提供的latest版本作为基础镜像。然后，我们将本地的dist目录复制到镜像中的/project/dist/目录下，这将是我们Web应用的静态文件。同时，我们将本地的nginx.conf配置文件复制到镜像的/etc/nginx/nginx.conf位置，这样我们可以覆盖默认的Nginx配置。

接下来，我们设置了一个时区的环境变量TZ，将时区设为亚洲/上海。最后，我们声明容器要监听的端口为16001，这样我们在启动容器时可以将宿主机的16001端口映射到容器中。

### 4. 编写nginx.conf ###

以下是一个简单的Nginx配置示例，配置文件要根据自己的项目地址、端口、路径进行配置  
, 用于部署一个Vue.js前端项目和代理后端API请求。

#user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        
        worker_connections  1024;
    }
    
    
    http {
        
        include       mime.types;
        default_type  application/octet-stream;
        server_tokens off;    #关闭版本号
        client_max_body_size 5120m; #允许用户最大上传数据大小
    	
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
        
        	listen       16001;
            server_name  localhost;
            charset utf-8;
    	
    	location / {
        
            root		/project/dist;
            #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
    	    try_files 	$uri 		$uri/ 		@router;
            index  		index.html;
        }
    
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    	location @router {
        
    		rewrite ^.*$ 	/index.html 	last;
    	}
    
    	location /code-safe {
        
    		proxy_pass 		    http://192.168.225.28:16000/code-safe;
    		proxy_redirect		off;
    		proxy_set_header 	Host			    $host:$server_port;
    		proxy_set_header 	X-Real-IP		    $remote_addr;
    		proxy_set_header	X-Forwarder-For		$http_x_forwarded_for;
    		# enables WS support
    		proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_read_timeout 600s;
    	}
    
    	error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
        }
    }

**简要说明**

> 在这个Nginx配置示例中，我们定义了一个简单的Nginx服务，监听在端口16001上。该服务用于部署一个Vue.js前端项目，并通过反向代理转发后端API请求。
> 
> 首先，我们指定了Nginx的worker进程数为1。然后，设置了一些常用的Nginx配置项，如sendfile、keepalive\_timeout等。我们还关闭了Nginx的版本号显示，以增加安全性。
> 
> 接下来，我们定义了一个服务器块，监听在端口16001，并将域名设置为localhost。在这个服务器块中，我们定义了两个location块。
> 
> 第一个location块用于处理前端Vue.js项目的请求。我们将前台包所在的目录设置为/project/dist，并使用try\_files指令处理路由请求，以避免在Nginx中刷新出现404错误。对于无法找到具体文件的路由请求，我们使用rewrite将其指向index.html。
> 
> 第二个location块用于反向代理后端API请求。我们将所有以/code-safe开头的请求代理到http://192.168.225.28:16000/code-safe地址，并设置了一些代理的头信息，以支持WebSocket。
> 
> 最后，我们定义了一个错误页面，并指定了错误页面的处理方式。

以上就是一个简单的Nginx配置示例，用于部署前端项目并代理后端API请求。希望本文对您有所帮助！

### 5. 构建镜像 ###

1.  准备好资源
2.  将资源`dist`,`nginx.conf`,`Dockerfile` 放在同一个目录中
3.  使用docker build命令来构建我们的Nginx镜像

docker build -t web .

> 其中，-t选项指定镜像的名称为web，.表示Dockerfile所在的当前目录。

![在这里插入图片描述][2f480a8e60ba497b906aca7d732f6e41.png]

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

### 6. 查看镜像是否构建成功 ###

docker images

![在这里插入图片描述][0cfe6d677ca04da185b63d723694e96e.png]

### 7. 运行容器 ###

完成镜像的构建后，我们可以使用docker run命令来运行容器：

docker run -d -p 16001:16001 --name myweb web:latest

> \-d选项表示以后台守护进程方式运行容器  
> \-p选项将容器的16001端口映射到宿主机的16001端口  
> –name 定义容器的名称 web是我们之前构建的镜像名称。

查看容器是否运行成功

docker ps -a

![在这里插入图片描述][92238bcca4b045a789daf40b64f317ef.png]

### 8. 访问Web应用 ###

现在，我们的Nginx容器已经在后台运行，并且容器的16001端口已经映射到了宿主机的16001端口。我们可以通过浏览器访问`http://localhost:16001`来查看我们的Web应用。

### 9. 总结 ###

本文介绍了如何使用Docker构建Nginx镜像并部署Web应用。通过Docker，我们可以轻松构建、发布和管理容器化的应用，大大简化了应用部署和管理的过程。

[2f480a8e60ba497b906aca7d732f6e41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3c07dbc443e043638db2f105396d425f.png
[cfded9b307a9413e82f5b4c0714e23dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9955af75456747e592796a3402b0dfae.png
[0cfe6d677ca04da185b63d723694e96e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/80f5e6816e28438fa7c8baf695931c17.png
[92238bcca4b045a789daf40b64f317ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c875216612374a7d9aeda200b7b87d88.png