Поиск

Приведу здесь пошаговое руководство. Как устанавливать и использовать сам фреймворк здесь не описано, так что, при необходимости, обратитесь к официальной документации .

Структура проекта

<span>1.</span> Начнем с приложения. Создадим директорию, в которой будет проект (здесь я создаю его в домашней директории, может находиться где угодно):

$ mkdir ~/my_app

В корне будут храниться файлы конфигураций, так что приложение сгенерирем в поддиректории.

<span>2.</span> Сгенерируем в этой директории Django-приложение:

$ django-admin startproject app

<span>3.</span> Базово настроим Django-проект:

$ cd ~/my_app/
$ virtualenv -p python3.6 venv
$ source venv/bin/activate
$ pip install django
$ pip install python-dotenv
$ pip install psycopg2-binary
$ pip install gunicorn
$ pip freeze > ./app/requirements.txt

Объясню решение по поводу venv. Рекомендую сделать виртуальное окружение на уровень выше приложения, чтобы он не мешал при сборке докер-образа в будущем (чтобы не отправлялся контекст в докер при сборке и образ собирался быстрее).

Из requirements.txt удалите строку pkg-resources==0.0.0 (такой версии не существует и она сломает установщик).

В my_app/app/app/settings.py надо переменные для БД брать из файла .env (см. документацию к python-dotenv):

import os
from dotenv import load_dotenv

load_dotenv()

SECRET_KEY = os.getenv("SECRET_KEY")
DEBUG = bool(os.getenv("DEBUG"))

# ...

ALLOWED_HOSTS = ['*']

# ...

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': os.getenv('POSTGRES_DB'),
        'USER': os.getenv('POSTGRES_USER'),
        'PASSWORD': os.getenv('POSTGRES_PASSWORD'),
        'HOST': os.getenv('POSTGRES_HOST'),
        'PORT': os.getenv('POSTGRES_PORT'),
    },
}

# ...

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    # os.path.join(BASE_DIR, '..', "frontend", "src"),
)
STATIC_ROOT = os.path.join(BASE_DIR, '..', 'public', 'static')

MEDIA_ROOT = os.path.join(BASE_DIR, '..', 'public', 'media')
MEDIA_URL = '/media/'

# ...

<span>4.</span> Создаем файл .env в корне (~/my_app/.env), пример содержимого:

SECRET_KEY=1234567890

DEBUG=1

POSTGRES_DB=db
POSTGRES_USER=user
POSTGRES_PASSWORD=password
POSTGRES_HOST=localhost
POSTGRES_PORT=5432

<span>5.</span> Теперь создадим docker-compose конфигурацию, которая поможет нам при разработке. Положим файл в корень проекта:

Файл docker-compose.yml:

version: '3' 

services:
  db: 
    image: postgres:11-alpine
    env_file:
      - .env
    volumes:
      - ./postgresql/dumps:/code/dumps
      - ./postgresql/data:/var/lib/postgresql/data
    restart: always
    ports:
      - "${POSTGRES_PORT}:5432"

В данном файле можно обратить внимание на env_file - это откуда будут применены переменные окружения (логин, пароль, имя базы данных при первом создании).

Также, если вы не хотите, чтобы при рестарте компьютера контейнер с базой данных автоматически запускался, то удалите строчку restart: always

И последнее - все хранилища будут находиться в директории проекта.

<span>6.</span> Протестируем, что все нормально работает для разработки:

$ cd ~/my_app
$ docker-compose up -d
$ source venv/bin/activate
$ python app/manage.py migrate

<span>7.</span> Инициализируем в корне приложения git-репозиторий и настроем удаленный репозиторий (наконец-то бесплатные приватные репозитории на github), например:

$ cd ~/my_app/
$ git init
$ git remote add origin https://github.com/crusat/test.git

И не забудьте сделать файл .gitignore, например:

*.pyc
*.log
__pycache__
/app/venv/
db.sqlite3
.DS_Store
/public/*
!/public/favicon.ico
/.idea/
.vscode/
*.history
/reports/
.coverage
*.swp
/htmlcov/
*.ipynb
.env
nohup.out
/postgresql/
tmp

И запушить:

$ git add .
$ git commit -am "initial"
$ git push -u origin master

Подготовка к деплою

<span>8.</span> Регистрируем на докер хабе (можно использовать gitlab registry и т.п.) новый репозиторий https://cloud.docker.com/repository/create - в него мы будем пушить образы. В будущем для этого можно сделать автоматическую сборку, но пока делаем в ручном режиме, для понимания. Назовем репозиторий, например, “test”.

<span>9.</span> Теперь надо сбилдить образ, который мы будем деплоить. Для этого в директории ~/my_app/app/ создадим файл Dockerfile:

FROM python:3.6-stretch

ENV PYTHONUNBUFFERED 1

# Здесь можно добавлять пакеты, которые необходимы для работы приложения
RUN apt update && apt install -y python3-dev

WORKDIR /code

# Сначала копируем requirements.txt, для того, чтобы образ собирался быстрее (см. слои докера)
COPY requirements.txt /code/
RUN pip install -r requirements.txt

# Далее копируем сам код приложения
COPY . /code/
WORKDIR /code/

EXPOSE 8000

И файл run.sh там же с содержимым:

#!/usr/bin/env sh

python ./manage.py migrate
python ./manage.py collectstatic --noinput
gunicorn --forwarded-allow-ips=* --bind 0.0.0.0:8080 -w 2 app.wsgi:application

Запускаем билд, потом авторизуемся на удаленном сервере, затем пушим в удаленный репозиторий докерхаба.

$ docker build -t crusat/test .
$ docker login
$ docker push crusat/test

Замените “crusat/test” на ваше имя пользователя и имя репозитория.

<span>10.</span> Теперь подготовим docker-compose.yml для удаленного сервера.

Создаем директорию ~/my_app/deploy

Создаем файл ~/my_app/deploy/docker-compose.yml с содержимым:

version: '3'

services:

  server:
    image: nginx:alpine
    restart: always
    depends_on:
      - web
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./public:/code/public

  web:
    image: crusat/test:latest
    command: sh -c "/code/run.sh"
    restart: always
    env_file:
      - .env
    depends_on:
      - db
    volumes:
      - ./public:/code/public

  db:
    image: postgres:10-alpine
    restart: always
    env_file:
    - .env
    volumes:
    - ./postgres/data:/var/lib/postgresql/data
    - ./postgres/dumps:/dumps

Замените в этом файле “crusat/test” на ваши данные.

Также, создайте в этой директории файл .env аналогичным тому, который лежит в корне.

И положите файл nginx.conf там же со следующим содержимым:

# daemon off;
worker_processes  auto;

pid  /var/run/nginx.pid;

events {
    worker_connections  1024;
    multi_accept on;
    use epoll;
}

http {
    default_type application/octet-stream;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    types_hash_max_size 2048;
    client_max_body_size 1G;

    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name _;

        # gzip begin
        gzip on;
        gzip_disable "msie6";

        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_min_length 256;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
        # gzip end

        location /media/ {
            root /code/public;
            expires max;
            try_files $uri$args $uri =404;
        }

        location /static/ {
            root /code/public;
            expires max;
            try_files $uri$args $uri =404;
        }

        location = /favicon.ico {
            alias /code/public/favicon.ico;
        }

        location / {
            proxy_pass http://web:8000;
            proxy_set_header Host $http_host;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Upgrade $http_upgrade;
            proxy_connect_timeout       600;
            proxy_send_timeout          600;
            proxy_read_timeout          600;
            send_timeout                600;
        }
    }
}

Удаленная машина

<span>1.</span> Для начала надо зарегистрировать новый сервер. Я использую хостинг https://vscale.io и Ubuntu (в данный момент последняя LTS это 18.04). При создании добавьте свой публичный ключ. Возможно, сервера на 512 мб ОЗУ не будет достаточно и придется использовать сервер на 1 гб ОЗУ.

<span>2.</span> Заходим на сервер, например:

$ ssh root@123.123.123.123

<span>3.</span> Устанавливаем зависимости:

$ apt update && apt install -y curl

<span>4.</span> Устанавливаем Docker и docker-compose:

$ curl -sSL https://get.docker.com/ | sh; curl -L https://github.com/docker/compose/releases/download/1.21.0/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

<span>5.</span> Создаем нового пользователя (назовем его deploy) и добавляем его к группе Docker, чтобы не требовался root-доступ для работы с докером:

$ adduser deploy
$ usermod -aG docker deploy

<span>6.</span> Проверяем, что все работает нормально:

$ su deploy
$ docker run hello-world

Должно появиться следующее (если вывелось это, то все работает нормально):

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete 
Digest: sha256:2557e3c07ed1e38f26e389462d03ed943586f744621577a99efb77324b0fe535
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

<span>7.</span> Теперь копируем содержимое директории deploy (~/my_app/deploy) в директорию на сервере (/home/deploy/my_app) и устанавливаем владельца, также поменяйте пароли и секретные ключи в файле окружения .env.

$ chown -R deploy:deploy /home/deploy/my_app

Пример содержимого .env:

SECRET_KEY=MubREzkP5GNMxBCHE3wOhuo49zpEjZMUEhoAjkvVujEl3AUD

DEBUG=

POSTGRES_DB=db
POSTGRES_USER=user
POSTGRES_PASSWORD=snm2LfPnas1Fb7d8
POSTGRES_HOST=db
POSTGRES_PORT=5432

<span>8.</span> Теперь необходимо авторизоваться на реджистри, забрать последний образ и развернуть приложение:

$ su deploy
$ docker login
$ cd /home/deploy/my_app
$ docker-compose pull && docker-compose down && docker-compose up -d

<span>9.</span> Заходим по IP-адресу сервера, все должно работать. При необходимости подключаем домен (ставим А-запись домена на регистраторе на IP-адрес сервера).

Это можно сделать, используя следующую функцию:

function readURL(input, img_container) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) { img_container.attr(‘src’, e.target.result); };
        reader.readAsDataURL(input.files[0]);
    }
}

И использовать, например, так:

$(‘#myFileField’).change(function(e) {
    readURL(e.target, $(‘#myImgPreview’));
});

При верстке:

<div><input type="file" id="myFileField" /></div>
<div><img id="myImgPreview" /></div>

Источник: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

Небольшая подборка js-библиотек отрисовки диаграмм:

http://highcharts.com

http://selection.datavisualization.ch

http://sigmajs.org/examples.html

http://geocommons.com/tour

https://github.com/mbostock/d3/wiki/Gallery

Забавный сайт на тему «какого хрена это происходит именно так в JS» 🙂

http://wtfjs.com/

Обновление CSS без перезагрузки страницы. Просто вставьте этот код на страницу. Не забудьте обрамить тэгом <script>

var DeveloperTool={
    Init:function(){
        this.headObj = document.getElementsByTagName('html')[0].getElementsByTagName('head')[0];
        return this;
    },
    ReloadAllCSS : function(headObj) {
            console.log('DT:ReloadAllCSS');
            var links = headObj.getElementsByTagName('link');
            for (var i=0 ; i < links.length ; i++){
                var link = links[i];
                this.ReloadCSSLink(link);
            }
        return this;
    },
    ReloadCSSLink : function(item) {
        var value = item.getAttribute('href');
        var cutI = value.lastIndexOf('?');
        if (cutI != -1)
        value = value.substring(0, cutI);
        item.setAttribute('href', value + '?t=' + new Date().valueOf());
        return this;
    },
    ReloadAllCSSThisPage : function() {
        this.ReloadAllCSS(this.headObj);
        return this;
    }
};
setInterval(function(){DeveloperTool.Init().ReloadAllCSSThisPage();},1000);

Это делается так.

Ссылка будет вида:

<a class="fancy-video-js" href="http://www.youtube.com/v/iCz8R25hlFI&fs=1&amp;autoplay=1"><img src="http://img.youtube.com/vi/iCz8R25hlFI/1.jpg" /></a>

Ютуб возвращает полноразмерные скриншоты видео по адресу http://img.youtube.com/vi/<код видео>/0.jpg. Вместо 0.jpg может быть 1.jpg, 2.jpg или 3.jpg.

Ссылка стоит на ютуб-видео с небольшими модификациями (сравните с кодом, что получаете при копировании HTML в youtube со ссылкой выше).
Затем вставьте код ниже в ваш <script> блок.

$(document).ready(function() {
    $(".fancy-video-js").click(function() {
        $.fancybox({
            ‘padding’   : 0,
            ‘autoScale’ : false,
            ‘href’  : this.href.replace(new RegExp("watch\\?v=", "i"), ‘v/’),
            ‘type’  : ‘swf’,
            ‘swf’   : {
                ‘wmode’ : ‘transparent’,
                ‘allowfullscreen’   : ‘true’
            }
        });
        return false;
    });
});

1. Не отображайте highcharts-графики в скрытом (display:none) блоке.
2. Не отображайте highcharts-графики в анимационно-раскрываемом блоке (jquery: $(block).show(500), $(block).slideDown(100)).

Смотри пример:

Код функции:

function generateColors(step, min_color, max_color) {
    var R_step = min_color;
    var G_step = min_color;
    var B_step = min_color;
    var color_list = [];
    var somecolor;
    while (R_step <= max_color) {
        G_step = min_color;
        while (G_step <= max_color) {
            B_step = min_color;
            while (B_step <= max_color) {
                somecolor = R_step + G_step*256 + B_step*256*256;
                color_list.push('#'+somecolor.toString(16));
                B_step += step;
            }
            G_step += step;
        }
        R_step += step;
    }
    return color_list;
}

Применение:

cl = generateColors(70, 30, 200);

Не особо полезный скрипт, просто на работе использую определенные цвета для графиков, и когда требуется создать график на основе двух существующих, решил смешать их цвета и выбрать похожий на их среднее.

var hex1 = 'e32636';
var hex2 = '01b1c3';
var ave_hex = (Math.ceil((parseInt(hex1,16) + parseInt(hex2,16)) / 2)).toString(16);

Например, нам нужно убрать из массива все нули. Для этого используем метод filter.

var x = [1,5,8,0,3,45,0,31,1,0,0,0,34,5]; // из этого массива нам требуется удалить нули

var y = x.filter(function(elem) {
    return (elem !== 0); // если true, то возвращаем элемент, иначе - он будет удален из массива
});

console.log(y); // выводим получившийся результат

Результатом будет:

[1, 5, 8, 3, 45, 31, 1, 34, 5]