5 部署nginx与对接acapp
增加容器映射端口:80与443
ssh lsfserver # 运行装载容器的服务器
docker ps # 查看容器
docker commit django_server django_lesson:1.1 # 将容器保存成镜像,将CONTAINER_NAME替换成容器名称
docker stop django_server # 关闭容器
docker rm django_server # 删除容器
# 使用保存的镜像重新创建容器
docker run -p 20000:22 -p 8000:8000 -p 80:80 -p 443:443 --name django_server -itd django_lesson:1.1
# 云服务器开放443和80端口
创建AcApp
AcWing应用中心点击创建应用
在服务器IP一栏填入自己服务器的ip地址。
将nginx.conf
中的内容写入服务器/etc/nginx/nginx.conf
文件中。
如果django项目路径与配置文件中不同,注意修改路径。
sudo cp .vimrc .tmux.conf /root/ # 配置祖传文件
cd /etc/nginx/
sudo vim nginx.conf
gg=G
:set paste
i
shift + insert
:wq
# 注意:不按i插入的话,会导致开头i之前的全部删掉【由于输入i才会进入输入模式】
将acapp.key
中的内容写入服务器/etc/nginx/cert/acapp.key
文件中。
sudo mkdir cert
cd cert
sudo vim acapp.key
将acapp.pem
中的内容写入服务器/etc/nginx/cert/acapp.pem
文件中。
sudo vim acapp.key
然后启动nginx
服务:
sudo /etc/init.d/nginx start
出错,重新加载nginx
sudo nginx -s reload
报错信息查看
shell cd /var/log/nginx/ sudo vim error.log
修改django项目的配置
打开settings.py
文件:
将分配的域名添加到
ALLOWED_HOSTS
列表中。注意只需要添加https://
后面的部分。
令DEBUG = False
。
cd ~/acapp/acapp
vim settings.py
i
DEBUG = False
ALLOWED_HOSTS = ["xx.xxx.xxx.xx", "app5423.acapp.acwing.com.cn"]
:wq
归档static
文件:
python3 manage.py collectstatic
配置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
填写应用的剩余信息
标题:应用的名称
关键字:应用的标签(选填)
css地址:css文件的地址,例如:https://app5423.acapp.acwing.com.cn/static/css/game.css
js地址:js文件的地址:例如:https://app5423.acapp.acwing.com.cn/static/js/dist/game.js
主类名:应用的main class,例如AcGame。
图标:4:3的图片
应用介绍:介绍应用,支持markdown + latex语法。
使分配的域名生效
填写完服务器IP之后,点“保存”或者“提交”按钮,均可使分配的域名生效。
https://app5423.acapp.acwing.com.cn
修复画布BUG
画布定位左上角坐标
game/static/js/src/playground/player/zbase.js
e.clientX, e.clientY:整个屏幕的坐标
add_listening_events() {
...
this.playgroud.game_map.$canvas.mousedown(function(e) {
const rect = outer.ctx.canvas.getBoundingClientRect();
// e.clientX 改为--> e.clientX - rect.left
// e.clientY 改为--> e.clientY - rect.top;
});
}
每次都要进行Js
打包
cd acapp/scripts
./compress_game_js.sh
由于上线app,归档static
文件
cd ~/acapp
python3 manage.py collectstatic
将上述操作合二为一。
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
运行
cd ~/acapp
./scripts/compress_game_js.sh
打开应用记得清缓存 crtl + F5
或者crtl+shift+R
修复菜单界面
game/static/js/src/zbase.js
里打开菜单界面 // this.menu = new AcGameMenu(this);
game/static/js/src/playground/zbase.js
里打开隐藏界面 // this.hide();
原来加载时固定了大小,初始化操作应该移动到show()里 未来可修改为适应窗口大小
games/static/js/src/playground/zbase.js
cd games/static/js/src/playground/
vim zbase.js
:6,16 m 38
:wq
constructor(root) {
this.root = root;
this.$playground = $(`<div class="ac-game-playground"></div>`);
this.hide();
this.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.player.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.player.push(new Player(this, this,width / 2, this.height / 2, this.height * 0.05, this.get_random_color(), this.height * 0.15, false));
}
}
原来菜单目录位置固定
games/static/css/game.js
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
background-size: 100% 100%; // 按容器比例撑满,图片变形;cover图片比例不变
user-select: none; // 页面不能被选中
}
// 按钮位置
.ac-game-menu-field {
width: 20vw; // px像素, v百分比
position: relative;
top: 38%;
left: 24%;
}
// 每个条目的格式
.ac-game-menu-field-item {
color: white;
height: 7vh;
width: 18vw;
font-size: 5.5vmin;
font-style: italic;
text-align: center;
background-color: rgba(39,21,28, 0.6);
border-radius: 10px; // 框圆边角
letter-spacing: 0.5vw; // 字间距
cursor: pointer; // 鼠标样式
}
// 鼠标悬浮效果
.ac-game-menu-field-item:hover {
transform: scale(1.2);
transition: 100ms;
}