使用Docker构建Nginx镜像并部署Web应用

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所在的当前目录。

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

docker images

7. 运行容器

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

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

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

查看容器是否运行成功

docker ps -a

8. 访问Web应用

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

9. 总结

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