写在前面

关于nginx和uWSGI和Django之间的关系，我觉得要理一下。

• 为什么要用nginx
  • 因为我们要使用https协议访问。（y总说django不支持，但是我查了一下，django也可以支持https，但是需要安装另外的库。确实不如nginx方便，而且nginx还能提供其他的功能。）
• uWSGI是什么
  • uWSGI是一个Web服务器，它实现了WSGI协议、uwsgi、http等协议。Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换。
  • WSGI协议是Python 语言定义的 Web 服务器和 Web 应用程序或框架之间的一种简单而通用的接口。
  • 所以简单来说uWSGI就是用来沟通nginx和django的一座桥梁。
• 为什么要nginx+uwsgi+diango这样来部署
  • 首先他们的工作流程是这样的：nginx 是对外的服务接口，外部浏览器通过url访问nginx。nginx 接收到浏览器发送过来的http请求，将包进行解析，分析url，如果是静态文件请求就直接访问用户给nginx配置的静态文件目录，直接返回用户请求的静态文件，如果不是静态文件，而是一个动态的请求，那么nginx就将请求转发给uwsgi,uwsgi 接收到请求之后将包进行处理，处理成wsgi可以接受的格式，并发给wsgi,wsgi 根据请求调用应用程序的某个文件，某个文件的某个函数，最后处理完将返回值再次交给wsgi,wsgi将返回值进行打包，打包成uwsgi能够接收的格式，uwsgi接收wsgi 发送的请求，并转发给nginx,nginx最终将返回值返回给浏览器。
  • 但是要知道第一级的nginx并不是必须的，uwsgi完全可以完成整个的和浏览器交互的流程。
  • 那么nginx到底可以干嘛
    • 安全：程序不能直接被浏览器访问到，而是通过nginx,nginx只开放某个接口，uwsgi本身是内网接口，这样运维人员在nginx上加上安全性的限制，可以达到保护程序的作用。
    • 负载均衡：一个uwsgi很可能不够用，即使开了多个work也是不行，毕竟一台机器的cpu和内存都是有限的，有了nginx做代理，一个nginx可以代理多台uwsgi完成uwsgi的负载均衡。
    • 静态文件处理高效：用django或是uwsgi这种东西来负责静态文件的处理是很浪费的行为，而且他们本身对文件的处理也不如nginx好，所以整个静态文件的处理都直接由nginx完成，静态文件的访问完全不去经过uwsgi以及其后面的东西。这就是这几者之间的关系。

开始部署

主要的步骤y总的讲义里面有。这里主要记录一下踩的几个坑。

• nginx.conf中的路径问题。主要问题在于Linux的用户名和y总不一样，所以家目录下的用户文件夹名是不一样的。

   location /static {
              alias /home/acs/acapp/static/;

   location /media {
              alias /home/acs/acapp/media/;
     acs要改成自己的Linux用户名

• 复制acapp.key和acapp.pem的时候注意检查开头和结尾不多不漏，还有中间的endbegin没有链接在一行。

• 如果部署结束后域名无法访问，应用打开是白的。将nginx reload一下。

调整代码

修改整合代码的脚本

#! /bin/bash

JS_PATH=/home/acs/acapp/game/static/js/
JS_PATH_DIST=${JS_PATH}dist/
JS_PATH_SRC=${JS_PATH}src/

find $JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > ${JS_PATH_DIST}game.js

echo yes | python3 /home/自己的路径/acapp/manage.py collectstatic

修改menu和menu-field的css

可以让菜单的界面好看点。

.ac-game-menu-field {
    width: 20vw;
    position: relative;
    top: 40%;
    left: 20%;
}

.ac-game-menu-field-item {
    color: white;
    height: 6vh;
    width: 18vw;
    font-size: 4vh;
    font-style: italic;
    text-align: center;
    background-color: rgba(39,21,28, 0.6);
    border-radius: 10px;
    letter-spacing: 0.5vw;
    cursor: pointer;
}

修改Player类

修改鼠标点击的坐标为相对坐标

add_listening_events() {
        let outer = this;
        this.playground.game_map.$canvas.on("contextmenu", function() {
            return false;
        });
        this.playground.game_map.$canvas.mousedown(function(e) {
            const rect = outer.ctx.canvas.getBoundingClientRect();
            if (e.which === 3) {
                outer.move_to(e.clientX - rect.left, e.clientY - rect.top);
            } else if (e.which === 1) {
                if (outer.cur_skill === "fireball") {
                    outer.shoot_fireball(e.clientX - rect.left, e.clientY - rect.top);
                }

                outer.cur_skill = null;
            }
        });

修改playground类

class AcGamePlayground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`<div class="ac-game-playground"></div>`);

        this.hide();

        this.start();
    }

    get_random_color() {
        let colors = ["blue", "red", "pink", "grey", "green"];
        return colors[Math.floor(Math.random() * 5)];
    }

    start() {
    }

    show() {  // 打开playground界面
        this.$playground.show();
        this.root.$ac_game.append(this.$playground);
        this.width = this.$playground.width();
        this.height = this.$playground.height();
        this.game_map = new GameMap(this);
        this.players = [];
        this.players.push(new Player(this, this.width / 2, this.height / 2, this.height * 0.05, "white", this.height * 0.15, true));

        for (let i = 0; i < 5; i ++ ) {
            this.players.push(new Player(this, this.width / 2, this.height / 2, this.height * 0.05, this.get_random_color(), this.height * 0.15, false));
        }

    }

    hide() {  // 关闭playground界面
        this.$playground.hide();
    }
}