从零开始的网站搭建（以照片/文本/视频信息通信网站为例）

本文面向已经有一些编程基础（会至少一门编程语言，比如python），但是没有搭建过web应用的人群，会写得尽量细致。重点介绍流程和部署云端的步骤，具体javascript代码怎么写之类的，这里不会涉及。

搭建网站分为两步：首先在本地搭建网站，测试可以运行；然后把网站移动到服务器，让大家都可以访问。

本地搭建网站

首先了解web程序的运行逻辑：

  1. 用户通过浏览器输入网址（URL）
  2. 浏览器通过域名系统（DNS）将用户输入的网址转换为服务器的 IP 地址
  3. 浏览器根据解析到的 IP 地址，向相应的服务器发起请求
  4. 服务器接收到请求后，返回结果（这个结果可能是一个html网页，或者一张图片，或者一段文本，之类的）
  5. 浏览器收到服务器响应后，开始解析 HTML、CSS 和 JavaScript 等文件（HTML 定义网页结构，CSS 控制网页样式，JavaScript 负责动态交互和功能实现）
  6. 浏览器将解析后的内容渲染并展示给用户

要先搭建一个可以在本地运行的web程序，然后再把它部署到云端，让大家都可以访问。我以手头的项目为例，讲解web网站的搭建过程。

设计网站界面和功能

这个web网站的功能是这样的：它有两个页面，问询方和回答方。

  1. 问询方可以拍摄照片或者录制视频，针对拍摄到的内容提出问题，然后把拍摄到的内容发送给回答方；
  2. 发送之后，回答方会收到图片或视频，然后回答方输入答案的文本，点击发送；
  3. 然后问询方收到答案，并且在无障碍模式下可以自动朗读出来

我设计的问询方网页如下（问询方在手机端使用）：上面四个按钮，下面一行文本显示答案。
在这里插入图片描述

回答方的网页如下（回答方在pc端使用）：上面显示视频（图片），下面输入框可以输入文本，然后一个发送按钮
在这里插入图片描述

这部分的代码会上传到 github

根据设计的网页，写前端代码

根据设计的界面，使用 html 和 css 和 javascript 把前端写好（HTML 定义网页内容，有哪些文字、图片之类的；CSS 控制网页样式，字体多大、按钮颜色、大小之类的；JavaScript 负责动态交互和功能实现，例如点下按钮之后拍摄照片，之类的功能）；这些都比较简单，实在不行你问问 ai 也能帮你搞定大部分。

这部分代码贴在这里非常累赘，所以就不贴了；如果有需求可以去找github上的仓库。

根据设计的功能，写后端代码

选择你熟悉的后端语言，这里选择 python；

然后选择合适的框架，python 写的 web 框架有 Django、Flask等，因为这是个小项目，所以这里选择 python；

另外，根据设计的网站功能，这里要实现双向通信（就是一方发送消息之后，另一方要实时收到该信息），在后端用 flask_socketio 这个包；在前端用 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>

Flask 入门的教程非常多，这里不赘述了。

需要强调的地方：因为这里用 Socket.io，在 javascript 里面，本地部署的时候是这么写的：

var socket = io.connect('http://127.0.0.1:8099');

但是部署到服务器的时候，需要修改：

const socket = io.connect('https://你的域名.com');

不然实时通信通不了的！

把网站部署到服务器

要把能够在本地运行的程序部署到云端，需要：

  1. 一个云服务器，一般是租
  2. 一个公网ip，一般是租一个弹性公网ip
  3. 一个备份过的域名，备份流程大约是半个月左右，建议尽早准备

这里以阿里云服务器租赁为例：
租好服务器之后，进入服务器控制台，选择“安全组”选项卡，选择操作中的“管理规则”，选择手动添加，添加常用端口，例如：

  1. 80端口 - 用于HTTP（超文本传输协议）通信，即普通的Web浏览。
  2. 443端口 - 用于HTTPS（HTTP Secure）通信，即安全的Web浏览，通过SSL/TLS加密。
  3. 22端口 - 用于SSH（安全壳协议），用于安全登录到远程服务器。
  4. 53端口 - 用于DNS（域名系统），负责将域名解析为IP地址。
  5. 自己的web程序使用的端口

然后登陆到服务器，把本地文件上传到服务器，然后开始部署程序。

首先要学习一下部署web程序需要的软件：反向代理和WSGI服务器。它们具体是什么作用呢？

用户的请求通过互联网到达你的云服务器之后：

  1. 首先通过反向代理服务器（通常是nginx）接收用户的请求
  2. 然后 nginx 将动态请求转发给WSGI（Web Server Gateway Interface）服务器（对于python后端的程序而言，常用的有Gunicorn、uWSGI、Waitress等，这里用的是简单的Gunicorn）；Nginx 会添加一些请求头信息（例如 Host、X-Real-IP），以便 Gunicorn 和 Flask 能够正确处理请求
  3. Gunicorn 接收到 Nginx 转发的请求后，根据请求的 URL 和方法（GET、POST 等），调用 Flask 应用中对应的路由函数
  4. Flask 程序处理请求，并生成响应，将生成的响应（HTML、JSON 或其他数据）返回给 Gunicorn
  5. Gunicorn 将 Flask 生成的响应（包括状态码、响应头和响应体）返回给 Nginx
  6. Nginx 将最终的响应返回给用户的浏览器

此处Nginx的作用：

  • 负载均衡：
    • 将请求分发到多个后端服务器，提升系统性能和可靠性。（但一般个人网站都只有一个后端服务器啦）
  • 安全性：
    • 隐藏后端服务器的真实 IP 地址，防止直接攻击。
    • 提供 SSL 终止，加密客户端与反向代理之间的通信。
  • 静态文件处理：
    • 直接处理静态文件请求，减轻后端服务器的负担。
  • 缓存：
    • 缓存常用资源，减少后端服务器的负载，提升响应速度。

此处 WSGI 服务器的作用：Python Web 应用与 Web 服务器之间的标准接口。它定义了 Web 服务器如何将请求传递给 Python Web 应用，以及应用如何返回响应。此时，WSGI 服务器作为中间层，连接 Web 服务器（如 Nginx）和 Python Web 应用。

所以我们先安装和配置 nginx，然后再安装和配置 WSGI（这里选择 Gunicorn）

安装和配置 nginx

请看保姆教程：
Linux系统下安装配置nginx（保姆级教程）
Linux系统下安装配置 Nginx 超详细图文教程

这里主要是配置比较难，因为该项目用了 Socket.io，而且还有服务器网址和本地网址傻傻分不清楚。Nginx 的配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/ 路径下面。这里贴上我的配置文件：

server {
	# listen 80 default_server;
	# listen [::]:80 default_server;

	# listen 80;
	listen 443 ssl; # 因为我这要访问摄像头，所以需要 https 协议，监听443端口，并且安装 ssl 证书
	server_name yourDomainName.com;  # 换成你的域名，要通过实名备份才能访问
	
	ssl_certificate /etc/nginx/cert/pem文件; # 替换成你申请的ssl证书，把证书放在这个地址下面。这个文件夹是你自己创建的。
	ssl_certificate_key /etc/nginx/cert/key文件; # 同上

	ssl_session_cache    shared:SSL:10m;
	ssl_session_timeout  4h;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  # 设置加密套件
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;

	client_max_body_size 100m;  # 这个参数需要调整，因为我要传视频，如果这个参数比较小，长一点点的视频就传不上来
	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	# root /var/www/html;

	# Add index.php to the list if you are using PHP
	# index index.html index.htm index.nginx-debian.html;

	# server_name _;

	location / {
		proxy_pass http://0.0.0.0:8099;  # 将匹配到的请求转发给指定的后端服务器，该参数指定后端服务器的地址，这个参数很重要
		proxy_redirect off;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		# 解决跨域问题
		add_header Access-Control-Allow-Origin *;   #解决跨域问题
            	add_header Access-Control-Allow-Methods 'GET,POST';
            	add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Origin,Accept';  #解决跨域问题

		# proxy_set_header X-Forwarded-Proto $scheme; # fix flask redirect生产环境 从https到http跳转
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		# try_files $uri $uri/ =404;
	}

	#用Nginx访问Flask静态文件 #静态文件在static的子目录或更低层的子目录中
    	location /static/(.*) {
        	root /home/eye_help_flask/; # 这里的路径是绝对路径，xxx是指static目录的上级目录，一般是网站根目录
    	}

	location /wss/  {   
     		proxy_pass http://0.0.0.0:8099/;        #通过配置端口指向部署websocker的项目
     		proxy_http_version 1.1;    
     		proxy_set_header Upgrade $http_upgrade;    
     		proxy_set_header Connection "Upgrade";    
     		proxy_set_header X-real-ip $remote_addr;
     		proxy_set_header X-Forwarded-For $remote_addr;
     	}

	 # 因为该程序用了 Socket.IO 双向通信，所以得配置这个
	 location /socket.io/ {
	 		proxy_set_header Origin '';
			proxy_pass http://127.0.0.1:8099/socket.io/;
			proxy_http_version  1.1;  # WebSocket 需要 HTTP/1.1 协议
			proxy_set_header    Host          $host;  # 传递客户端请求的 Host 头。
			proxy_set_header    X-Real-IP      $remote_addr;
			proxy_set_header    Upgrade        $http_upgrade;  # 将请求头 Upgrade 设置为 websocket，表示协议升级。
			proxy_set_header    Connection      "upgrade";  # 将请求头 Connection 设置为 upgrade，表示连接升级。
			proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_read_timeout  600s;
 }  
}

解释一些关键的参数，这些参数配错了会很麻烦：
location /path/ {proxy_pass http://backend_server} : proxy_pass 用于将匹配到的请求转发给指定的后端服务器。它是 Nginx 反向代理功能的核心配置之一。其中location /path/是匹配请求的 URL 路径，http://backend_server：指定后端服务器的地址。协议与后端使用的保持一致，后端用https这里也用https，反之亦然。这里填的是http://0.0.0.0:8099，其中0.0.0.0表示监听所有可用的网络接口（即所有 IP 地址），如果你的后端服务器（如 Gunicorn）运行在同一台机器上，通常会绑定到 0.0.0.0，以便 Nginx 可以通过本地网络访问它。如果后端服务运行在其他服务器上，可以使用外部 IP 或域名，例如http://192.168.1.100:8080;。8099 是端口号，因为我的 Gunicorn 设置监听该端口，所以填这个。如果你的不是监听该端口，要修改该参数，不然会出错的。Nginx 需要通过这个端口与后端服务器通信。

另外，这里的尾部斜杠也是有影响的。proxy_pass 的 URL 是否以斜杠结尾会影响 Nginx 如何转发请求路径。具体规则如下：

  1. proxy_pass 的 URL 以斜杠结尾，Nginx 会将 location 匹配的路径部分去掉，然后将剩余部分附加到 proxy_pass 的 URL 后。
    • 例如 location /api/ {proxy_pass http://backend-server/;}
    • 请求：http://yourdomain.com/api/user
    • 转发：http://backend-server/user（/api/ 被去掉）
  2. proxy_pass 的 URL 不以斜杠结尾，Nginx 会将 location 匹配的完整路径附加到 proxy_pass 的 URL 后。
    • 例如 location /api/ {proxy_pass http://backend-server;}
    • 请求：http://yourdomain.com/api/user
    • 转发：http://backend-server/api/user（/api/ 被保留）

如何判断后端服务使用的是 HTTP 还是 HTTPS？
如果你有后端服务的访问权限，可以直接查看其配置文件或启动命令。例如，Gunicorn 的启动命令：gunicorn -b 0.0.0.0:8000 your_app:app 默认使用 HTTP。如果使用 HTTPS，通常会指定证书和密钥：gunicorn -b 0.0.0.0:8000 --keyfile key.pem --certfile cert.pem your_app:app

最后，配置好之后记得重启一下 nginx！

安装和配置 Gunicorn

请看保姆教程：Gunicorn简介、安装、配置、启动

这里我的配置文件如下：

bind = '0.0.0.0:8099'
user = 'root'
workers = 1
threads = 1
daemon = True
backlog = 512
worker_class = 'eventlet'
chdir = '/home/eye_help_flask'
access_log_format = '%(t)s %(p)s %(h)s "%(r)s" %(s)s %(L)s %(b)s %(f)s" "%(a)s"'
loglevel = 'info'
errorlog = chdir + '/logs/error.log'
accesslog = chdir + '/logs/access.log'
pidfile = chdir + '/logs/ddq.pid'

我的启动命令如下：
gunicorn -c gunicory_conf.py app:app

重启 gunicorn命令如下：

  1. 通过执行如下命令，可以获取Gunicorn进程树：
    pstree -ap|grep gunicorn
  2. 重启Gunicorn任务
    kill -HUP 主进程号

遇到过的一些奇怪 bug

  1. iOS 摄像头画面黑屏：在 video 的属性上加上 playsinline
  2. 调用Navigator.vibrate()但没反应：ios不许而且Safari会有奇怪的错误
  3. ios 自动播放声音失效：因为 ios 不许，别想了，换一个方法吧
  4. 点拍摄照片，用 createObjectUrl 生成前缀为 blob 的 url ，图片无法显示，报错为 net::ERR_FILE_NOT_FOUND
    在 edge 浏览器内拍照，另一个页面可以显示；但是在 Google 浏览器的就无法显示。查到 图片路径前缀有blob？图片渲染不出来？ 说如果数据库的图片地址前缀带有blob://，那么可能是因为在上传图片时，使用了Blob URL来表示图片。在JavaScript中，Blob URL是通过URL.createObjectURL(blob)方法创建的，其格式为blob://加上一个由浏览器自动生成的32位十六进制的字符串。用Blob URL表示的图片是存储在浏览器的内存中，而不是存储在硬盘上，所以当你在另一个页面中打开这个URL时，就无法访问该图片。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/975763.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux权限（一）

Linux权限（一）

文章目录 基本指令sudo权限chmod修改目标属性修改角色 修改权限属性目录权限缺省权限 基本指令 sudo 1. sudo是对指令的短暂提权的 2. 比如安装软件&#xff0c;安装到系统中&#xff0c;需要管理员root权限&#xff0c;这些命令其实只安装了一份&#xff0c;普通用户和超级用…
阅读更多...
CV -- 基于GPU版CUDA环境+Pycharm YOLOv8 目标检测

CV -- 基于GPU版CUDA环境+Pycharm YOLOv8 目标检测

目录 下载 CUDA 下载 cuDNN 下载 anaconda 安装 PyTorch pycharm 搭配 yolo 环境并运行 阅读本文须知&#xff0c;需要电脑中有 Nvidia 显卡 下载 CUDA 打开 cmd &#xff0c;输入 nvidia-smi &#xff0c;查看电脑支持 CUDA 版本&#xff1a; 我这里是12.0&#xff0c;进入…
阅读更多...
R语言安装教程（附安装包）R语言4.3.2版本安装教程

R语言安装教程（附安装包）R语言4.3.2版本安装教程

文章目录 前言一、安装包下载二、R-4.3.2安装步骤三、rtools43安装步骤四、RStudio安装步骤 前言 本教程将详细、全面地为你介绍在 Windows 系统下安装 R 语言 4.3.2 的具体步骤。无论你是初涉数据领域的新手&#xff0c;还是希望更新知识体系的专业人士&#xff0c;只要按照本…
阅读更多...
springBoot统一响应1.0版本

springBoot统一响应1.0版本

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…
阅读更多...
【STM32】内存管理

【STM32】内存管理

【STM32】内存管理 文章目录 【STM32】内存管理1、内存管理简介疑问&#xff1a;为啥不用标准的 C 库自带的内存管理算法&#xff1f;2、分块式内存管理&#xff08;掌握&#xff09;分配方向分配原理释放原理分块内存管理 管理内存情况 3、内存管理使用&#xff08;掌握&#…
阅读更多...
DeepSeek 助力 Vue 开发：打造丝滑的二维码生成（QR Code）

DeepSeek 助力 Vue 开发：打造丝滑的二维码生成（QR Code）

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…
阅读更多...
认知重构 | 自我分化 | 苏格拉底式提问

认知重构 | 自我分化 | 苏格拉底式提问

注&#xff1a;本文为 “认知重构 | 自我分化” 相关文章合辑。 心理学上有一个词叫&#xff1a;认知重构&#xff08;改变 “非黑即白&#xff0c;一分为二” 的思维方式&#xff09; 原创 心理师威叔 心理自救 2024 年 10 月 26 日 19:08 广东 你有没有过这样的时候&#x…
阅读更多...
YARN的工作机制及特性总结

YARN的工作机制及特性总结

YARN hadoop的资源管理调度平台&#xff08;集群&#xff09;——为用户程序提供运算资源的管理和调度 用户程序&#xff1a;如用户开发的一个MR程序 YARN有两类节点&#xff08;服务进程&#xff09;&#xff1a; 1. resourcemanager 主节点master ----只需要1个来工作 2. nod…
阅读更多...
LLM2CLIP论文学习笔记：强大的语言模型解锁更丰富的视觉表征

LLM2CLIP论文学习笔记：强大的语言模型解锁更丰富的视觉表征

1. 写在前面 今天分享的一篇论文《LLM2CLIP: P OWERFUL L ANGUAGE M ODEL U NLOCKS R ICHER V ISUAL R EPRESENTATION》&#xff0c; 2024年9月微软和同济大学的一篇paper&#xff0c; 是多模态领域的一篇工作&#xff0c;主要探索了如何将大模型融合到Clip模型里面来进一步提…
阅读更多...
Win11更新系统c盘爆满处理

Win11更新系统c盘爆满处理

1.打开磁盘管理 2.右击c盘选择属性&#xff0c;进行磁盘管理&#xff0c;选择详细信息。 3.选择以前安装的文件删除即可释放c盘空间。
阅读更多...
Spring面试题2

Spring面试题2

1、compareable和compactor区别 定义与包位置:Comparable是一个接口&#xff0c;位于java.lang包,需要类去实现接口&#xff1b;而Compactor是一个外部比较器&#xff0c;位于java.util包 用法&#xff1a;Comparable只需要实现int compareTo(T o) 方法&#xff0c;比较当前对…
阅读更多...
2025年02月21日Github流行趋势

2025年02月21日Github流行趋势

项目名称&#xff1a;source-sdk-2013 项目地址url&#xff1a;https://github.com/ValveSoftware/source-sdk-2013项目语言&#xff1a;C历史star数&#xff1a;7343今日star数&#xff1a;929项目维护者&#xff1a;JoeLudwig, jorgenpt, narendraumate, sortie, alanedwarde…
阅读更多...
Django check_password原理

Django check_password原理

check_password 是 Django 提供的一个用于密码校验的函数&#xff0c;它的工作原理是基于密码哈希算法的特性。 Django 的 make_password 函数在生成密码哈希时&#xff0c;会使用一个随机的 salt&#xff08;盐值&#xff09;。这个 salt 会与密码一起进行哈希运算&#xff0…
阅读更多...
如何在 SpringBoot 项目创建并使用 Redis 的详细介绍

如何在 SpringBoot 项目创建并使用 Redis 的详细介绍

本文是博主整理项目时整理出来的&#xff0c;项目使用 SpringBoot 框架&#xff0c;使用 Redis 作为缓存组件&#xff0c;用于缓存部分热点接口数据。 文章目录 一、Redis 的前置配置1、引入依赖2、单机配置3、集群配置4、两种配置路径解读 二、创建 Redis 配置类1、简易版 Red…
阅读更多...
快速入门——第三方组件element-ui

快速入门——第三方组件element-ui

学习自哔哩哔哩上的“刘老师教编程”&#xff0c;具体学习的网站为&#xff1a;10.第三方组件element-ui_哔哩哔哩_bilibili&#xff0c;以下是看课后做的笔记&#xff0c;仅供参考。 第一节 组件间的传值 组件可以有内部Data提供数据&#xff0c;也可由父组件通过prop方式传…
阅读更多...
使用 Grafana 监控 Spring Boot 应用

使用 Grafana 监控 Spring Boot 应用

随着软件开发领域的不断发展&#xff0c;监控和可观测性已成为确保系统可靠性和性能的关键实践。Grafana 是一个功能强大的开源工具&#xff0c;能够为来自各种来源的监控数据提供丰富的可视化功能。在本篇博客中&#xff0c;我们将探讨如何将 Grafana 与 Spring Boot 应用程序…
阅读更多...
《深度学习》——RNN网络简单介绍

《深度学习》——RNN网络简单介绍

文章目录 RNN网络简介工作原理网络结构训练方法应用领域 RNN网络简介 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一种专门用于处理序列数据的神经网络&#xff0c;在自然语言处理、语音识别、时间序列预测等领域有广泛应用。 RNN 是一种…
阅读更多...
深入解析JVM垃圾回收机制

深入解析JVM垃圾回收机制

1 引言 本节常见面试题 如何判断对象是否死亡&#xff08;两种方法&#xff09;。简单的介绍一下强引用、软引用、弱引用、虚引用&#xff08;虚引用与软引用和弱引用的区别、使用软引用能带来的好处&#xff09;。如何判断一个常量是废弃常量如何判断一个类是无用的类垃圾收…
阅读更多...
python网络安全怎么学 python做网络安全

python网络安全怎么学 python做网络安全

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 众所周知&#xff0c;python是近几年比较火的语言之一&#xff0c;它具有简单易懂、免费开源、可移植、可扩展、丰富的第三方库函数等特点&#xff0c;Java需要大…
阅读更多...
使用excel中的VBA合并多个excel文件

使用excel中的VBA合并多个excel文件

需求是这样的&#xff1a; 在Windows下&#xff0c;用excel文件让多个小组填写了统计信息&#xff0c;现在我需要把收集的多个文件汇总到一个文件中&#xff0c;前三行为标题可以忽略&#xff0c;第四行为收集信息的列名&#xff0c;处理每一行数据的时候&#xff0c;发现某一行…
阅读更多...
最新文章

Copyright @ 2022~2023