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

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