Docker部署-通过nginx管理web前端页面

本文详细介绍了如何在Docker环境下部署Django测试管理平台,包括使用Nginx作为前端服务器,uWSGI处理请求,以及MySQL作为数据库。首先,通过Docker分别安装mysql、nginx和python环境。接着,配置Nginx以实现反向代理管理项目的前端功能,通过映射容器内外文件或直接修改容器内配置文件实现静态文件的托管。最后,通过一系列docker命令启动和映射容器,确保平台的正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前提

本地已完成“测试管理平台”的开发:

实现方式:前后端分离

前端:html+script+css+javascript

后端:django框架

本地服务:django自带服务

数据库:django默认sqlite3数据库

Docker部署测试管理平台

整个测试管理平台需要用到三个容器,分为为:mysql、python(使用uwsgi服务器代替django自带的服务)、nginx

Nginx作为前端静态页面的服务器,主要负责管理操作静态资源文件。

uwsgi作为django应用的服务器,主要负责处理发送到django的请求。

mysql作为数据库,存储数据使用。

工作原理如下:

1. 用户从客户端发起的http/https请求首先到达了我们的Nginx服务器
        2. Web服务器收到请求后,对请求进行解析处理(一般来说如果是静态请求,直接返回静态页面(纯HTML页面)),然后将请求发送给uWSGI。
        3. uWSGI对来自Nginx的请求进行处理,将处理后的结果发送给django Web应用框架
        4. django 请求之后,对请求进行处理,将结果返回给uWSGI服务器。
        5. uWSGI收到Web应用框架的处理结果后,对该结果进行处理打包,发送给Nginx服务器。
        6. Nginx服务器将收到的结果返回给客户端。
这三者之间信息的传递涉及到数据格式以及协议的转换。

实战

  1. docker安装mysql :参考 Docker基础+Docker安装mysql
  2. docker安装nginx
  3. docker安装python3.6

Django- Nginx

Nginx环境准备

 安装命令:docker run -itd -p 80:80 --name mynginx --rm nginx

 其中:

         run:执行run时,若本地没有nginx镜像,会自动去镜像仓库内拉取

-rm表示容器停掉后自动删除nginx

--name 表示定义容器的名称=mynginx

-p80:80 表示的容器端口:宿主机端口

校验是否运行成功:

访问地址:虚拟机的ip地址,若访问成功展示的是“welcome to Nginx!”页面,如下

实现Nginx反向代理管理项目的前端功能

两种方式:

1.通过映射的方式:

    1.1先将容器内的配置文件拷贝到宿主机上

    1.2将项目静态文件拷贝到宿主机上

    1.3命令运行容器时通过-v来完成宿主机上的配置文件和静态文件与容器内的配置文件和静态文件的映射

2.修改nginx容器的配置文件,将文件内的server模块的静态文件【/usr/share/nginx/html;】地址改成项目静态文件地址

映射实现过程:

1.进入nginx容器命令模式:docker exec -it mynginx bash

 2.查看当前nginx配置文件路径:nginx -t

查看配置文件内容:cat /etc/nginx/nginx.conf打开可以看到没有server模块,查看文件底部内容提示“ include /etc/nginx/conf.d/*.conf;”意识是,在conf.d文件夹下还有其他配置文件

最后可以找到server模块在配置文件/etc/nginx/conf.d/default.conf内

3.修改配置文件的server模块

由于容器内无法修改配置文件,所以需要将容器内的配置文件挂载到宿主机上。

前提:退出nginx容器

执行:docker cp mynginx:/etc/nginx conf     其中mynginx:/etc/nginx  表示从容器mynginx的目录etc/nginx下拷贝文件到宿主机的conf文件夹下

执行:查看宿主机conf下的配置文件

执行:docker stop mynginx    先暂停容器

执行:docker run --rm --name mynginx --volume "$PWD/宿主机上静态文件地址":/usr/share/nginx/html --volume "$PWD/conf":/etc/nginx -p 80:80 -d nginx

       -v表示映射,映射实现的格式:源文件:宿主机上的映射目标文件

       第一个映射:将nginx容器的配置文件映射到宿主机的conf文件夹下

       第二个映射:将nginx的配置文件内,ront用户默认指向地址/usr/share/nginx/html,映射到宿主机的项目静态文件下

按照上述操作步骤后,即可访问测试管理工具平台前端

 

 

 

### 使用Docker部署基于Vue.js和Nginx前端应用程序 为了实现这一目标,需要创建一个适合于生产环境的构建流程并将其容器化。以下是详细的说明: #### 准备工作 确保已经完成项目的开发阶段,并且能够通过`yarn run build`命令成功编译项目[^4]。 ```bash yarn run build ``` 这一步会生成位于`dist`目录中的静态资源文件,这些文件就是最终要被Nginx提供服务的内容。 #### 创建Dockerfile 在项目根目录下新建名为`Dockerfile`的文件,内容如下所示: ```dockerfile # 使用官方Node镜像作为基础镜像来安装依赖项 FROM node:alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . # 构建应用 RUN npm run build # 切换至nginx镜像以供实际运行时使用 FROM nginx:stable-alpine # 复制之前构建好的静态文件到默认的html目录中 COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 此多阶段构建方法先利用Node.js环境执行构建过程,再切换到轻量级的Nginx镜像用于发布静态页面,从而减小了最终镜像大小。 #### 构建与启动容器 有了上述准备之后,就可以按照下面的方式来进行操作了: - **构建 Docker Image** ```bash docker build -t vue-frontend-app . ``` - **启动 Docker Container** 可以直接使用简单的`docker run`指令或者更推荐的做法是采用`docker-compose.yml`定义服务组合以便管理和维护更加方便。 对于单个容器来说: ```bash docker run -d --name VueFrontendApp -p 80:80 vue-frontend-app ``` 如果选择使用Docker Compose,则需编写相应的配置文件如`docker-compose.yml`: ```yaml version: '3' services: web: image: vue-frontend-app ports: - "80:80" restart: always ``` 接着可以通过以下命令一键启动整个栈: ```bash docker-compose up -d ``` 这样就完成了从源码到可访问Web站点的过程,在浏览器里输入服务器IP地址即可看到由Vue.js驱动的应用界面。 #### 配置Nginx支持历史模式路由 为了让Vue Router的历史模式正常运作,还需要适当调整Nginx设置使得所有未匹配到具体文件路径的请求都被重定向回首页处理。这部分已经在提供的Nginx配置片段中有体现[^2]: ```nginx location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } ``` 这段配置保证即使刷新页面也不会因为找不到对应URL而报错,而是交还给前端框架去解析路由。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Miss糖豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值