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

news2025/2/24 22:18:30

本文面向已经有一些编程基础(会至少一门编程语言,比如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时,就无法访问该图片。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Elasticsearch Open Inference API 增加了对 Jina AI 嵌入和 Rerank 模型的支持

作者&#xff1a;Hemant Malik 及 Joan Fontanals Martnez 探索如何使用 Elasticsearch Open Inference API 访问 Jina AI 模型。 我们在 Jina AI 的朋友们将 Jina AI 的嵌入模型和重新排名产品的原生集成添加到 Elasticsearch 开放推理 API 中。这包括对行业领先的多语言文本嵌…

Unity学习part4

1、ui界面的基础使用 ui可以在2d和矩形工具界面下操作&#xff0c;更方便&#xff0c;画布与游戏窗口的比例一般默认相同 如图所示&#xff0c;图片在画布上显示的位置和在游戏窗口上显示的位置是相同的 渲染模式&#xff1a;屏幕空间--覆盖&#xff0c;指画布覆盖在游戏物体渲…

进程概念、PCB及进程查看

文章目录 一.进程的概念进程控制块&#xff08;PCB&#xff09; 二.进程查看通过指令查看进程通过proc目录查看进程的cwd和exe获取进程pid和ppid通过fork()创建子进程 一.进程的概念 进程是一个运行起来的程序&#xff0c;而程序是存放在磁盘的&#xff0c;cpu要想执行程序的指…

php session数据存储位置选择

PHP session 数据的存储位置可以通过配置文件或者代码来进行设置。默认情况下&#xff0c;session 数据是存储在服务器的文件系统中的。你可以将 session 数据存储在其他地方&#xff0c;例如数据库、缓存等。 基础概念 PHP session默认情况下将数据存储在服务器端的临时文件中…

计算机网络————(一)HTTP讲解

基础内容分类 从TCP/IP协议栈为依托&#xff0c;由上至下、从应用层到基础设施介绍协议。 1.应用层&#xff1a; HTTP/1.1 Websocket HTTP/2.0 2.应用层的安全基础设施 LTS/SSL 3.传输层 TCP 4.网络层及数据链路层 IP层和以太网 HTTP协议 网络页面形成基本 流程&#xff1a…

【Viewer.js】vue3封装图片查看器

效果图 需求 点击图片放大可关闭放大的 图片 下载 cnpm in viewerjs状态管理方法 stores/imgSeeStore.js import { defineStore } from pinia export const imgSeeStore defineStore(imgSeeStore, {state: () > ({showImgSee: false,ImgUrl: ,}),getters: {},actions: {…

数据结构之二叉树的定义及实现

1. 树的概念 主要的定义&#xff1a; 节点的度&#xff1a;一个节点含有的子树的个数称为该节点的度&#xff1b;如上图&#xff1a;A的为6 叶节点或终端节点&#xff1a;度为0的节点称为叶节点&#xff1b;如上图&#xff1a;B&#xff0c;C&#xff0c;H&#xff0c;I等节点…

Rust语言基础知识详解【一】

1.在windows上安装Rust Windows 上安装 Rust 需要有 C 环境&#xff0c;以下为安装的两种方式&#xff1a; 1. x86_64-pc-windows-msvc&#xff08;官方推荐&#xff09; 先安装 Microsoft C Build Tools&#xff0c;勾选安装 C 环境即可。安装时可自行修改缓存路径与安装路…

SQLMesh 系列教程9- 宏变量及内置宏变量

SQLMesh 的宏变量是一个强大的工具&#xff0c;能够显著提高 SQL 模型的动态化能力和可维护性。通过合理使用宏变量&#xff0c;可以实现动态时间范围、多环境配置、参数化查询等功能&#xff0c;从而简化数据模型的开发和维护流程。随着数据团队的规模扩大和业务复杂度的增加&…

【Deepseek】Linux 本地部署 Deepseek

前言 本文介绍在 Linux 系统上部署 Deepseek AI。本文教程是面向所有想体验 AI 玩家的一个简易教程&#xff0c;因此即使是小白也可以轻松完成体验&#xff0c;话不多说立马着手去干。 [注]&#xff1a;笔者使用的系统为 Ubuntu 24.10 1. 关于 ollama Ollama 是一款开源应用…

git,bash - 从一个远端git库只下载一个文件的方法

文章目录 git,bash - 从一个远端git库只下载一个文件的方法概述笔记写一个bash脚本来自动下载get_github_raw_file_from_url.shreanme_file.shfind_key_value.sh执行命令 END git,bash - 从一个远端git库只下载一个文件的方法 概述 github上有很多大佬上传了电子书库&#xf…

臻识相机,华夏相机,芊熠车牌识别相机加密解密

臻识&#xff0c;华夏&#xff0c;芊熠这三种车牌识别相机解密我都试过了&#xff0c;可以正常解密成功&#xff0c;其它品牌我暂时没有测试。超级简单&#xff0c;免费的&#xff0c;白嫖无敌&#xff01; 流程&#xff1a; ①&#xff1a;先导出配置文件&#xff0c;例如我以…

网络安全与措施

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 # 网络安全问题概述 1) 数据安全 访问&#xff08;授权访问&#xff09;&#xff1b;存储&#xff08;容灾、备份或异地备份等&#xff09; 2) 应用程序 不能…

前后端分离系统架构:基于Spring Boot的最佳实践

前后端分离系统架构图描绘了一个基于Springboot的前端后台分离的系统架构。它强调了前端&#xff08;客户端&#xff09;与远程&#xff08;服务器&#xff09;的解耦&#xff0c;通过API接口进行交互&#xff0c;分别独立开发和部署。 前后端分离系统架构图 从上到下&#xff…

内外网文件传输 安全、可控、便捷的跨网数据传输方案

一、背景与痛点 在内外网隔离的企业网络环境中&#xff0c;员工与外部协作伙伴&#xff08;如钉钉用户&#xff09;的文件传输面临以下挑战&#xff1a; 安全性风险&#xff1a;内外网直连可能导致病毒传播、数据泄露。 操作繁琐&#xff1a;传统方式需频繁切换网络环境&…

抖音试水AI分身;腾讯 AI 战略调整架构;百度旗下小度官宣接入DeepSeek...|网易数智日报

抖音试水AI分身&#xff0c;字节旗下AI智能体平台扣子已与抖音打通&#xff0c;相关功能内测中 2月19日消息&#xff0c;钛媒体App独家获悉&#xff0c;字节旗下AI智能体开发平台扣子&#xff08;Coze&#xff09;已与抖音打通&#xff0c;抖音创作者可在扣子智能体平台打造AI分…

红帽7基于kickstart搭建PXE环境

Kickstart 文件是一种配置文件&#xff0c;用于定义 Linux 系统安装过程中的各种参数&#xff0c;如分区、网络配置、软件包选择等。system-config-kickstart 提供了一个图形界面&#xff0c;方便用户快速生成这些配置文件。 用户可以通过图形界面进行系统安装的详细配置&…

安装PHPStudy 并搭建DVWA靶场

目录 一、PHPStudy 简介 二、DVWA 简介 三、安装 PHPStudy 四&#xff1a;安装 DVWA 一、PHPStudy 简介 phpstudy傻瓜式的一键启动&#xff0c;支持WAMP、WNMP、LAMP、LNMP&#xff0c;一键切换环境&#xff08;nginxapahce&#xff09;,一键切换PHP版本&#xff08;5.1-7…

SQL写法技巧

目录 1.批量插入&#xff0c;查询&#xff0c;删除数据 缺点 实现方法 1.批量插入数据 2.批量查询数据 3.批量删除数据 4.批量修改数据 解释 2.树型表查询 方法一&#xff1a;递归(适用于多级的情况) 方法二&#xff1a;表的自连接 方法三&#xff1a;MySQL递归&am…

Ryu:轻量开源,开启 SDN 新程

1. Ryu 控制器概述 定位&#xff1a;轻量级、开源的SDN控制器&#xff0c;专为开发者和研究人员设计&#xff0c;基于Python实现。开发者&#xff1a;由日本NTT实验室主导开发&#xff0c;遵循Apache 2.0开源协议。核心理念&#xff1a;简化SDN应用开发&#xff0c;提供友好的…