四、部署nginx与对接acapp

实现之后的效果：

acwing端：

        

对接acapp

web端：

        

 

----------部署nginx与对接acapp
 [关于nginx和uWSGI和Django之间的关系,可以查看](https://www.acwing.com/solution/content/78903/) 

1. 增加容器的映射端口：80与443
    思路：将容器保存成镜像，然后将将容器删除，利用保存的镜像重新生成容器且多开几个端口
    登录容器，关闭所有运行中的任务。
    登录运行容器的服务器，然后执行：
docker commit CONTAINER_NAME django_lesson:1.1 # 将容器保存成镜像，将CONTAINER_NAME替换成容器名称
docker stop CONTAINER_NAME # 关闭容器
docker rm CONTAINER_NAME # 删除容器

使用保存的镜像重新创建容器
docker run -p 20000:22 -p 8000:8000 -p 80:80 -p 443:443 –name CONTAINER_NAME -itd django_lesson:1.1

然后去云平台安全组配置开放80 和 443 端口即可

2.创建AcApp，获取域名、nginx配置文件及https证书

    在服务器IP一栏填入自己服务器的ip地址。

    应用域名：即配置完成后，我们平时在浏览器中浏览我们网站的地址

    配置nginx：

    先将祖传配置传到根目录：
    sudo cp .vimrc .tmux.conf /root (.bashrc不能乱加)

    将nginx.conf中的内容写入服务器/etc/nginx/nginx.conf
    将acapp.key中的内容写入服务器/etc/nginx/cert/acapp.key文件中
    将acapp.pem中的内容写入服务器/etc/nginx/cert/acapp.pem文件中。

    然后启动nginx服务：（如果django项目路径与配置文件中不同，注意修改路径。）
    sudo /etc/init.d/nginx start

    若显示ok则成功，若无，则重新加载一下nginx配置：
        sudo nginx -s reload；或者进入etc/nginx/cert/var/log/nginx/error.log查看错误信息

3.修改django项目配置：
    打开settings.py文件:
        将域名https：//后的部分加到ALLOWED_HOSTS列表中
        令DEBUG = False

    归档static文件：（将static文件放到acapp根目录下）
        执行python3 manage.py collectstatic即可

4.配置uwsgi：
    在django项目中添加uwsgi的配置文件：scripts/uwsgi.ini，内容如下：
         `  [uwsgi]
            socket          = 127.0.0.1:8000
            chdir           = /home/acs/acapp
            wsgi-file       = acapp/wsgi.py
            master          = true
            processes       = 2
            threads         = 5
            vacuum          = true` 

    启动uwsgi服务：
         `uwsgi --ini scripts/uwsgi.ini` 

5. 填写应用的剩余信息

标题：应用的名称
关键字：应用的标签（选填）
css地址：css文件的地址，例如：https://app3246.acapp.acwing.com.cn/static/css/game.css
js地址：js文件的地址：例如：https://app3246.acapp.acwing.com.cn/static/js/dist/game.js
主类名：应用的main class，例如AcGame。
图标：4:3的图片
应用介绍：介绍应用，支持markdown + latex语法。

6. 使分配的域名生效
填写完服务器IP之后，点“保存”或者“提交”按钮，均可使分配的域名生效。

----------修改项目内容

1.由于之前写项目时，默认画布在屏幕的左上角，但实际上可能会在屏幕的别位置，会导致玩家移动出现问题，于是我们需要去修复一下这些bug：
    定位左上角的坐标：
        在game/static/js/src/playground/player/zbase.js文件进行修改：
             `  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) {
                        //e.clientX/Y是屏幕的绝对坐标 rect.left
                        //屏幕的绝对坐标减去画布距离屏幕原点的坐标，即可定位到画布的位置
                        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;
                    }
                });

                $(window).keydown(function(e) {
                    if (e.which === 81) {  // q
                        outer.cur_skill = "fireball";
                        return false;
                    }
                });
            }` 

    修改后记得打包，由于现在的app已经是发布版本了，所以需要将打包后的结果重新传到根目录下，这里可以将打包和更新static文件放在同一个脚本，这里修改一下/acapp/scripts/compress_game_js.sh脚本内容即可：
        内容如下：
            #! /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 manage.py collectstatic

    如果有问题，可以清一下缓存，F12右键刷新，点击清空缓存并硬性刷新

2.调整代码，使其看起来更像一个app（将菜单页面调出来）：
    .. AcGame {
        ...
        this.menu = new AcGameMenu(this);//不再注释
        ...
    }

    class AcGamePlayground {
        ...
        this.hide();//不再注释
        ...

    }

    有关游戏界面的初始化的内容都要写到游戏界面加载之后，否则会导致游戏界面之后的内容只有最初的窗口大小，内容如下：
        class AcGamePlayground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`

`);

        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();
    }
}

3.调整一下css，
    在/game/static/css/game.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;
    }