Django 框架课

5. 部署nginx和acapp

本节课我们进行nginx部署和对接acapp，这是为了能够在AcWing上运行望网站（App），同时可以使用指定的域名登录网站。

如果要上线到AcWing，就需要支持Https协议，这样能被认为是安全的。要做到这样，一般需要去申请Https证书，各云平台都会有，免费收费都有。

Https证书一般都和域名挂钩，但是搞域名需要备案，个人开发申请免费的，企业的申请付费的。这个流程需要很多时间，很繁琐。所以y总免费分配域名，证书统一买的。可以直接pass掉上述这些过程。

正式开始的步骤直接看讲义，这里只提醒需要注意的步骤。

注意修改添加根目录下的文件需要每个指令前加上sudo。

nginx.conf的内容中，如果django项目路径与配置文件中不同，一定要修改，也即static/的目录。然后运行指令nginx -s reload，再启动nginx服务即可。

归档static文件可以将命令写在scripts/compress_game_js.sh里面，目的是为了让nginx能够定位到正确的static位置上。

用户访问网站的基本原理

我们原本访问网站的方式是，通过8000端口访问Django。
$$ 8000\rightarrow Django $$

我们现在是在Django前面套一层nginx，可以通过实际上用户用的443/80端口来访问nginx，然后再通过uwsgi作为桥梁访问到Django。
$$ 443/80 \rightarrow nginx \rightarrow^{uwsgi} Django $$

完成App部署之后，接下来在Acapp上运行游戏，会发现有bug，就是鼠标点的位置是不对的。这是因为JS里面，鼠标监听的位置给的是整个屏幕上鼠标的坐标，这时候我们需要的是相对于画布上的鼠标的坐标。

------------------------^----------------------
|                       |                     |
|     window            | canvas.top          |
|                       |                     |
|              ---------|--------             |
| canvas.left  |                |canvas.right |
|<-------------|     canvas     |------------>|
|              |                |             |
|              ------------------             |
-----------------------------------------------

所以我们应该修改class Player内的监听函数。如下

add_listening_events()
{
    ...
    this.playground.game_map.$canvas.mousedown(function(e){
           if (!this.is_alive) return false;
           const rect = outer.ctx.canvas.getBoundingClientRect(); // 从canvas里面获取这个画布的矩形框框
           let ee = e.which;
           let tx = e.clientX - rect.left, ty = e.clientY - rect.top; // 相对于画布上的坐标

           if (ee === 3)
           {
                outer.move_to(tx, ty);
           }
           else if (ee === 1)
           {
               if (outer.cur_skill === "fireball")
               {
                    outer.shoot_fireball(tx, ty);
                   return false;
               }
               outer.cur_skill = null;
           }
    });
    ...
}

修改完之后，开始打包。但是这里要注意一下，用nginx启动的服务中用的static文件夹是跟acapp/game同级的文件夹，也就是acapp/static，这时候我们可以在上面那个static归档命令，加入到压缩静态文件脚本acapp/scripts/compress_game_js.sh的结尾加上如下指令。

echo "yes" | python3 manage.py collectstatic

再像之前那样运行压缩脚本并重启uwsgi即可。

现在我们需要搞菜单界面，进入class AcGameMenu。很简单。

class AcGameMenu
{
    constructor(root) 
    {

        this.root = root;
        this.$menu = $(`
<div class="ac-game-menu" >
  <div class="ac-game-menu-field">
    <div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
      单人模式
    </div>
    <br><br>
    <div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
      多人模式
    </div>
    <br><br>
    <div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
      设置
    </div>
  </div>
</div>
`); // 创建一个HTML对象，menu

        this.root.$ac_game.append(this.$menu); // 将HTML对象加入到这个游戏里面
        this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode'); // 找到这个“单人模式”对象
        this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode'); // 找到这个“多人模式”对象
        this.$settings = this.$menu.find('.ac-game-menu-field-item-settings'); // 找到这个“设置”对象
        this.start();
    }

    add_listening_events() {

        let outer = this;

        this.$single_mode.click(function(){
            // 点击 单人模式
            outer.playground = new AcGamePlayground(outer); // 创建游玩区域
            outer.hide(); // 隐藏这个menu
            outer.playground.show(); // 显示这个游玩区域
        });

        this.$multi_mode.click(function(){
            console.log('click multi mode');
        });

        this.$settings.click(function(){
            console.log('click settings');
        });
    }

    start() {
        this.add_listening_events();
    }
}

至此本课完成。重点是后端部分。