Блог

HTTPS на localhost

Когда на локалхосте нужен https можно сделать следующее.

Выполняем команду:

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Копируем файлы localhost.crt и localhost.key в папку приложения и подключаем.

Также, не забывайте, что может потребоваться добавить сертификат в кейчеин (на маке просто делаем двойной клик по localhost.crt).

Также, может потребоваться перейти по ссылке на сертификат (если допустим подключается апи к другому хосту), то просто открывайте сайт по тому урлу и соглашайтесь через “Дополнительно” и “Перейти на сайт”.

Например, для nodejs код будет выглядеть примерно так (index.js):

const https = require('https');

const HTTPS_OPTIONS = Object.freeze({
    cert: fs.readFileSync('./localhost.crt'),
    key: fs.readFileSync('./localhost.key')
});

const httpsServer = https.createServer(HTTPS_OPTIONS);

Источник: https://letsencrypt.org/ru/docs/certificates-for-localhost/

devops

Docker показывает IP контейнера, а не пользователя

Это в первую очередь касается PHP проектов.

Делаем две вещи. Первое - для reverse proxy (если используется) у nginx дописываем в раздел следующее:

server {
    ...
    location / {
        ...
        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;
        ...
    }
    ...
}

И рестартим nginx.

После этого у нас для переменной $_SERVER['HTTP_X_REAL_IP'] будет правильный IP-адрес клиента, а для $_SERVER['REMOTE_ADDR'], скорее всего, останется неправильной.

Второе, что делаем - надо прокинуть правильную переменную в fastcgi_param. Идем во внутренний nginx и исправляем конфиг:

server {
    ...
    location ~ \.php$ {
        ...
        fastcgi_param REMOTE_ADDR $http_x_real_ip;
        ...
    }
    ...
}
devops nginx php

Битрикс редиректит на старый домен

После переноса сайта на другой домен или ip-адрес он может начать редиректить, при заходе на него, на старый сайт.

Ситуация может быть в конструкции кода редиректа, например:

<?php
header('Location: http://oldsite.example')

Но, возможно, что это не привязано к коду. И в коде решение найти будет проблематично. Тогда, скорее всего, дело в системе безопасности битрикса. Для того, чтобы ее убрать, необходимо зайти в консоль MySQL и выполнить следующую команду:

> DELETE FROM b_module WHERE `ID`='security';

Query OK, 1 row affected (0.001 sec)

Источник: http://blog.ispsystem.info/2019/05/bitrix.html

bitrix

Не получается собрать React Native приложение под Android после обновления до x64

  1. Запускаем Android Studio.
  2. Ждем индексацию.
  3. Ставим выделение на Gradle Scripts.
  4. Выбираем в меню Refactor -> Migrate to AndroidX…
  5. Жмем кнопку Migrate.
  6. Сохраняем бекап-архив где-нибудь.
  7. Ждем выполнение операции миграции.
  8. Жмем Do Refactor.
  9. Ожидаем окончания.
  10. Пробуем собрать привычным способом.
react native

Ошибка при компиляции React Native приложения - clang: error: linker command failed with exit code 1 (use -v to see invocation)

Идем в Targets -> Цель для Tests

Меняем значение Host Application на основное целевое приложение.

Например

Приложение называется AwesomeApp. Цель соответственно, тоже называется AwesomeApp.

Идем в цель AwesomeAppTests, на вкладке General выбираем Host Application как AwesomeApp.

xcode

Ошибка django.contrib.gis.geos.error.GEOSException: Could not parse version info string "3.8.0-CAPI-1.13.1 "

Причина: ошибочная версия у GEOS. Происходит на MacOS.

Как исправить

Удалить новую версию:

brew unlink geos

И установить более старую версию (подходит для MacOS Catalina):

brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/823b700ab61eeec57f34d50be2cc34a285fb5abc/Formula/geos.rb
macos

ЖЭКА ПРОФИ на Первом канале

Крайне приятно, когда результаты твоей работы показывают по федеральному каналу :)

Фрагмент здесь: https://www.1tv.ru/shows/dobroe-utro/reportazh/zhkh-eto-celaya-nauka-dobroe-utro-fragment-ot-27-08-2019

webgl

Во что сохранять 3D-модели для A-Frame, чтобы они не глючили?

По работе снова столкнулся с необходимостью реализации 3D в вебе. Что хорошо - сейчас WebGL довольно развился и появились хорошие фреймворки, что плохо - до сих пор это сильно не дотягивает до Unity3D и подобных движков. Так что если есть возможность выбора - лучше собирать на Unity3D под web - проблем будет гораздо меньше.

Итак, у нас webgl-фреймворки, выбрал A-Frame. В будущем может потребоваться необходимость прикрутить виртуальную реальность, а он это умеет “из коробки”. Есть много компонентов (контроллеры, эффекты и т.п.).

По ходу разработки столкнулся с тем, что стандартные для Unity3D форматы obj и fbx плохо поддерживаются в A-Frame, как выяснилось позже - three.js, babylon.js тоже их не особо поддерживают, например, большинство fbx со сторов подгружались с поехавшими текстурами. После гуглежки выяснилось, что стоит применять формат glTF. В целом этот формат файлов имеет уже вторую версию (2.0) и хорошую поддержку аудитории. Его создавали специально под веб, следовательно сам имеет внутреннюю структуру как JSON и плюс бинарник для материалов и отдельные файлы текстур - jpg, png и т.п. Формат поддерживает текстуры, bump-мэппинг (не сразу получилось это найти), анимацию, свет (но его официально еще поддержки нет, поэтому лучше использовать не внутри модели, а расставлять через A-Frame). ВНИМАНИЕ! Используйте ТОЛЬКО стандартные или физические текстуры (PBR), V-Ray текстуры не отображаются без конвертации в стандартные, а физические имеют максимально возможную поддержку - как раз бампы работают только с ним. Также, можно упаковать это все в один файл - glb.

Вот способ, через который делали модели:

  1. В 3dsmax делать модели с физическими или стандартными текстурами.
  2. Все текстуры складывать в общую кучу и накладывать в 3dsmax оттуда, чтобы пути были максимально короткие и без “../../..” подобных вещей.
  3. Установить плагин для 3dsmax - Babylon.js и экспорт делать в формат glTF через него со включенной конвертацией текстур. Все остальные галки по умолчанию. Директория с файлом и текстурами должна быть одна и та же. Все имена файлов должны быть на английском языке и без пробелов.
  4. Объекты-линии делать всегда с модификатором Editable Poly.
  5. Не использовать Pro Boolean - с ним текстуры накладываются совсем не так как надо и в итоге потом модель черного цвета.
  6. Сохранять каждую модель, с которой возможно взаимодействовать, в отдельный файл с сохранением координат. Т.е. скрываем все, кроме одной двери, экспортируем, скрываем эту дверь, показываем другую, экспортируем и т.п. Остальную сцену можно сохранить целиком. Тут возможен другой вариант - сохранять все в нулевых координатах и расставлять движком - но это будет дольше для разработчика.
  7. Использовать размеры текстуры, кратные двум. Можно просто изменить размер (не обрезать, а “resize” обычный). Т.е. если текстура 1000х1000, то ресайзим в 512х512. Если 1025 на 1023, то ресайзим в 1024х512. Если этого не сделаете вы, то это сделает three.js в рунтайме - и это будет заметно.
  8. Для физических материалов настраивать металл (metalness) и шероховатости (roughness), чтобы блики от света были более реалистичными.
  9. Запекать текстуры (texture baking) необходимо в 3dsmax, A-Frame на сегодняшний день не сделает красивых теней.

Также учитывайте, что стоит экспортировать отдельно все объекты, с которыми необходимо взаимодействовать, исключая их из основной сцены, т.к. один подгруженный объект не предполагает наложить на него разные шейдеры, назначить разные действия и т.п. Думаю, что это возможно, но не столь удобно, как различные объекты. В итоге у меня получилось следующее - все двери и объекты с которыми может взаимодействовать пользователь, находится в тех же координатах, как и на основной сцене, но сохранены отдельно. А общая сцена сохранена без этих дверей и объектов целиком в один файл.

a-frame webgl

Ошибка при сборке билда игры на Unity под iOS

Пример ошибки

/Users/user/Library/Developer/Xcode/DerivedData/Unity-iPhone-dpiwnljjsxiubxbjbdnsqncxpxfn/Build/Intermediates.noindex/Unity-iPhone.build/Release-iphoneos/Unity-iPhone.build/Script-033966F41B18B03000ECD701.sh: line 2: /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh: Permission denied
Command PhaseScriptExecution failed with a nonzero exit code

Решение:

1. Выставить права запуска на файл /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh:

chmod +x /Users/user/Game_iOS_1.9_XCODE/MapFileParser.sh

2. Заменить #!/bin/sh на #!/bin/bash в этом файле (первая строка в любом редакторе)

3. После этого сделать Clean и можно повторно собрать приложение - все должно быть ок.

bash unity

Как подружить Django и React

Подготовка

1. Создание нового проекта Django

$ django-admin startproject app
$ cd app
$ virtualenv -p python3.6 venv
$ source venv/bin/activate
$ pip install django
$ python manage.py migrate

2. Создание React-приложения

$ mkdir frontend
$ cd frontend
$ npm init -y

Дружим

3. Измените содержимое ключа scripts в файле frontend/package.json

"scripts": {
  "build": "webpack --config webpack.config.js --progress --colors",
  "watch": "webpack --config webpack.config.js --watch --mode development"
},

4. Установите необходимые библиотеки

$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react
$ npm install --save react react-dom

5. Создайте файл frontend/webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  context: __dirname,

  entry: './src/index',

  output: {
      path: path.resolve('./build/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new CleanWebpackPlugin(),
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

6. Создайте файл frontend/.babelrc со следующим содержимым

{
    "presets": ["@babel/preset-env", "@babel/react"]
}

7. Создайте индексный файл для реакта frontend/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="world" />;
ReactDOM.render(
  element,
  document.getElementById('react')
);

8. Установить модуль django-webpack-loader в Django

pip install django-webpack-loader

9. Добавить его в INSTALLED_APPS и настроить

INSTALLED_APPS = (
    # ...
    'webpack_loader',
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'build/',  # это префикс для урла - /media/build/
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),  # путь до файла webpack-stats.json
    }
}

10. Создать индексный файл в темплейтах Django

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div id="react"></div>
        {% render_bundle 'main' %}
    </body>
</html>

Разработка

Запустить React

cd frontend && npm run watch

И запустить Django

source venv/bin/activate && python manage.py runserver

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


Источник, переведенный и дополненный (исправлены ошибки): https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396

django react