2021年4月27日火曜日

さくらインターネットVPS設定

前提条件

webルートディレクトリ
/var/www/html

設定手順
1. OSバージョン確認
# cat /etc/redhat-release

2. packages update
# yum update

3. 作業用ユーザー作成とPW設定
# useradd user1
# passwd user1

4.  sudoが使えるようにwheelグループに追加
# usermod -G wheel user1

5. セキュリティ向上のため、sshポートを22以外(12345)に変更
# vi /etc/ssh/sshd_config
# systemctl restart sshd
さくらのコントロールパネルにて「パケットフィルタ」のポート12345を開放します

以降、下記のコマンドでssh loginします
ssh user1@ipadress -p 12345

6. install php7.4
# yum install -y https://rpms.remirepo.net/enterprise/remi-release-7.rpm
# yum install -y --enablerepo=remi-php74 php php-fpm which

php version確認
# php -v


7. php実行メモリ上限変更(デフォルトは128M)
# vi /etc/php.ini

memorylimit = 4096M

8. install composer
# curl -sS https://getcomposer.org/installer | php
# mv composer.phar /usr/local/bin/composer

9. install nginx、起動、有効化、バージョン確認
# vi /etc/yum.repos.d/nginx.repo
以下の内容を入れる
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

# yum install nginx
# systemctl start nginx
# systemctl enable nginx
# nginx -V

参考:http://nginx.org/en/linux_packages.html#RHEL-CentOS
安定バージョンをインストールのため、下記コマンドを実行しないこと
yum-config-manager --enable nginx-mainline

10. nginx install確認
ブラウザでIPにアクセスする
http://xxx.xxx.xxx.xxx/

11. webサービスユーザー www を作成(user1ユーザー作成参考、sudo設定しない)

12. nginxのユーザー変更
# vi /etc/nginx/nginx.conf
変更:user  www;
最後に追加:
include /etc/nginx/sites-enabled/*.conf;

web rootのownerをwwwに変更
# chown www:www /var/www/html

13. install mysql5.7
# rpm -ivh http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm
# yum install --enablerepo=mysql57-community mysql-community-server

# mysqld --version
# systemctl start mysqld.service
# systemctl enable mysqld.service
# systemctl list-unit-files -t service

14. MySQL初期設定

MySQL初期パスワードを確認
# cat /var/log/mysqld.log | grep password

セキュリティ設定
新しいPWを設定、すべてYesで
# mysql_secure_installation

データベース作成
MySQLにログイン
# mysql -u root -p

mysqlでDB作成、照合順序変更
mysql> CREATE DATABASE dbname;
mysql> ALTER DATABASE dbname CHARACTER SET utf8 COLLATE utf8_general_ci;

laravel用DBのuser,pw設定
mysql> GRANT ALL PRIVILEGES ON dbname.* TO dbuser@'localhost' IDENTIFIED BY 'yourPassword';

15. git更新
centos7に入っているgitのバージョンが低いため更新する

# yum install https://repo.ius.io/ius-release-el7.rpm https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
# yum remove git
# yum install git224-2.24.4-1.el7.ius.x86_64
# git --version

16. git clone project
ユーザーwwwでログイン
# cd /var/www/html
# git clone -b develop https://xxx/source.git

17. php package install
# cd /var/www/html/source
# composer install
※上記コマンドでエラーとなり、phpのzip extendをインストールして、再度実施
# yum install -y --enablerepo=remi-php74 php-pecl-zip

18. cloneしたlaravel projectの初期設定

envファイル作成とLaravelキー生成
# cp .env.example .env
# php artisan key:generate

envファイル編集
変更:
APP_NAME=appname
mysqlの接続情報更新
DB_DATABASE=dbname
DB_USERNAME=dbuser
DB_PASSWORD=パスワードを入れる

laravelマイグレーション
# php artisan migrate --seed

public data準備
# php artisan storage:link

19. nginx設定
# cd /etc/nginx
# mkdir sites-available
# mkdir sites-enabled
# cd sites-available
# vi xxx.com.conf

server {
    listen 8000; # とりあえず ip:8000 でにアクセスを設定(あとでドメインアクセスを設定)
    #listen 443 ssl;
    server_name xxx.com;
    access_log /var/log/nginx/xxx.com-access.log main;
    error_log /var/log/nginx/xxx.com-error.log;

    root /var/www/html/source/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/xxx.com.conf .

20. nginx用php-fpm設定
# vi /etc/php-fpm.d/www.conf
変更:
user = www
group = www
listen = /var/run/php-fpm/php-fpm.sock

# chown www /var/run/php-fpm/php-fpm.sock
# systemctl start php-fpm
# systemctl enable php-fpm
# systemctl restart nginx

21. Base認証かける
# mkdir /etc/htpasswd
# htpasswd -c /etc/htpasswd/.htpasswd baseuser<-- (baseuserはユーザー名、コマンドを実行すると、パスワードを入力)

# vi /etc/nginx/sites-available/xxx.com.conf

location / {
        auth_basic "Restricted"; #追加
        auth_basic_user_file /etc/htpasswd/.htpasswd; # 追加

# systemctl restart nginx

参考:mysqlのdocker化
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
yum install docker-ce docker-ce-cli containerd.io
systemctl start docker
systemctl enable docker
docker pull centos/mysql-57-centos7:5.7
// 開発サーバーのport 13306はdocker mysqlの3306を反映
docker run --name dockermysql -v mysqlData:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=root -p 13306:3306 -d centos/mysql-57-centos7:5.7

// docker側のmysqlに入るhostを127.0.0.1を指定しないと(localhost)エラー
# mysql -u root -P 13306 -h 127.0.0.1 -p

// 任意のipからアクセスできるように%を指定
GRANT ALL PRIVILEGES ON dbname.* TO dbuser@'%' IDENTIFIED BY 'yourPassword';

2021年3月2日火曜日

fancy product designerにおけるSVGファイルにlinearGradient情報なくなる対応

 linearGradient情報含まれるSVGファイルをfancy product designerに取り込むと、その情報がなくなった。原因はSVG各objectのfillを処理する際のバグ?か

ソースコードの6018行目あたり、objectのfillは、色のHexかtransparentとなるが、linearGradientの場合、fillがobjectになっている。

var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

params.colors.push(color);


対応するには、下記のように変更

if(typeof(objects[i].fill) !== "object") {

  var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

  params.colors.push(color);

} else {

  params.colors.push('');

}


さらに、6070行目あたり

//if no default colors are set, use the initial path colors

else if(!fabricParams.fill && !fabricParams.svgFill) {

  if(objects) {

    params.colors = [];

    for(var i=0; i < objects.length; ++i) {

      if(typeof(objects[i].fill) !== "object") {

        var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

params.colors.push(color);

      } else {

params.colors.push('');

      }

    }

    params.svgFill = params.colors;

  }

  fabricParams.svgFill = params.svgFill;

}


最後、7540行目あたり

//path groups (svg)

else if(element.type == FPDPathGroupName && typeof hex == 'object') {

  for(var i=0; i < hex.length; ++i) {

    if(element.getObjects()[i] && hex[i] !== '') {

      element.getObjects()[i].set('fill', hex[i]);

    }

  }

fancy product designerの内容をdownload時SVG対応

 fancy product designerの内容をsvgとしてdownload際、画像のsrcがリンクの場合、リンク形式で保存され、AIで開くと参照ファイルがないため、表示できない。

fancy product designerが使うfabricjsのメソッドをoverwriteする必要ある。画像のsrcがbase64形式の場合そのまま、リンクの場合DataURLとして保存する


fabric.Image.prototype.getSvgSrc = function() {

   return this.toDataURLforSVG();

};


fabric.Image.prototype.toDataURLforSVG = function(options) {

   var src = this._element.src;

   var imageParts = src.split('.');

   //base64 encodedかどうか

   if(imageParts.length == 1) {

      return imageParts[0];

    }

    // base64ではない場合、リンクの場合、base64を返す

    var el = fabric.util.createCanvasElement();

        el.width  = this._element.naturalWidth || this._element.width;

        el.height = this._element.naturalHeight || this._element.height;

     el.getContext("2d").drawImage(this._element, 0, 0);

     var data = el.toDataURL(options);

     return data;

 };

fancy product designerローカルSVG画像使用時正しく表示されない対応

fancy product designer(https://fancyproductdesigner.com/) jqueryバージョンの最新有料版を使っていますが、ローカルSVGをdesignerに入れると、正しく表示されない。

ソースには、ローカル画像をstageに入れる場合、FileReaderを使用する。

reader.readAsDataURL(file);

ここで、SVGでもDataURL形式で読み込まれる。

addElement functionで、読み込まれた結果をSVGかどうかの判断がありますが、DataURL形式のため、ただしく認識できない。

if(source.search('<svg') !== -1) 


解決するには、SVGから変換されたDataURL形式なら、もとのテキストファイルに戻す。

ソースコードの5937行の後に下記追加

if(source.search(/data:image\/svg\+xml;base64,/) >= 0) {

    source = atob(source.replace(/^data:image\/svg\+xml;base64,/, ''));

}