免费从0到1上线一个网站

由于时效问题，该文某些代码、技术可能已经过期，请注意！！！本文最后更新于：10 个月前

网站开发全流程

上线网站需要的资源：

服务器：微软云Azure、AWS等新用户第一年免费
域名：硅云新用户第一年免费
ssl证书：腾讯云、七牛云等都提供一年免费证书
cdn：各大云服务商也有免费额度，另外也可使用cloudflare的免费计划
logo：腾讯家的在线免费设计平台AIDesign
网站备案：因为用的是Azure，服务器在国外，所以无需备案。

我的小破站地址：https://letsthink.top/

做网站的初衷：学习一整套流程，练习 react和fastapi 。网站现有3个示例（系统监控，AI聊天，一个生物上可视化的demo），后续依据精力添加更多功能组件。

网站没啥设计，所以有点丑！

开源地址：https://github.com/shubihu/letsthink

开发过程踩的坑

nginx配置websocket的坑，经过不懈的测试，http的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
        listen 80;
        listen [::]:80;
        server_name www.letsthink.top letsthink.top;
        root /home/yahaha/think/frontend;   ## 网站编译好的文件地址
​
    ## 网站路由
    location / {                   
        alias /home/yahaha/think/frontend/;
        try_files $uri $uri/ /index.html;
    }
​
    ## websocket api
    location /ws/socket.io {
      proxy_pass http://172.190.79.138:8000;
      proxy_http_version 1.1;
      proxy_read_timeout 60s;
      proxy_send_timeout 60s;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
      proxy_set_header Sec-WebSocket-Version 13;
      proxy_set_header Sec-WebSocket-Key $http_sec_websocket_key;
    }
 }

使用curl命令测试

1
curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Host: 172.190.79.138:8000" -H "Origin: http://letsthink.top" -H "Sec-WebSocket-Version: 13" -H "Sec-WebSocket-Key: QpTG8BznnrVH8BUMkRWdfg==" "http://172.190.79.138:8000/ws/socket.io/?EIO=4&transport=websocket"

最终https配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
server {
    listen 80;
    listen [::]:80;
    server_name www.letsthink.top letsthink.top;
​
    # 自动重定向HTTP到HTTPS
    return 301 https://$host$request_uri;
  }
​
  server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.letsthink.top letsthink.top;
​
    ssl_certificate /home/yahaha/think/ssl/letsthink.top_bundle.crt;  # 替换为SSL证书路径
    ssl_certificate_key /home/yahaha/think/ssl/letsthink.top.key;  # 替换为SSL证书私钥路径
​
    ssl_session_timeout 10m;
    #请按照以下协议配置
    ssl_protocols TLSv1.2 TLSv1.3; 
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers on;
​
    # logging
    access_log /var/log/nginx/access.log combined buffer=512k flush=1m;
    error_log /var/log/nginx/error.log warn;
​
    root /home/yahaha/think/frontend;   ## 网站编译好的文件地址
​
    # 网站路由
    location / {
      alias /home/yahaha/think/frontend/;
      try_files $uri $uri/ /index.html;
    }
​
    # websocket api
    location /ws/socket.io {
      proxy_pass http://127.0.0.1:8000;
      proxy_http_version 1.1;
      proxy_connect_timeout 600s;
      proxy_read_timeout 600s;
      proxy_send_timeout 600s;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
      # proxy_set_header Sec-WebSocket-Version 13;
      # proxy_set_header Sec-WebSocket-Key $http_sec_websocket_key;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
​
      proxy_ssl_certificate /home/yahaha/think/ssl/letsthink.top_bundle.crt;
      proxy_ssl_certificate_key /home/yahaha/think/ssl/letsthink.top.key;
      proxy_ssl_session_reuse on;
      proxy_ssl_verify on;
      proxy_ssl_verify_depth 2;
    }
  }

参考：
https://mp.weixin.qq.com/s/Rbr3WIRCwGngDvFQyTeSHA
https://mp.weixin.qq.com/s/aN3-JHd-iPhHjUKQlc_Rzw
https://pandagamebox.com/cloudflare-ssl-cdn.html