フロント – ページ 9 – 今日という日は贈り物

span の text をlinkにする

linkにする要素のidを設定します
link先のURLを設定します
spanのDOMオプジェクトを取得します
spanのtext部分を取得します
aタグのエレメントオプジェクとをaTagとして生成します
aTagオブジェクトにhref要素を追加します
aTagオブジェクトにtarget要素を追加します
aTagのドキュメントに取得したlinkのテキストを追加します
spanをaに置き換えます

<html><body>
<script>
window.onload = function(){
  var id = "test";
  var url = "http://yosshi.snowdrop.asia/";
  var baseTag = document.getElementById(id);
  var link = baseTag.firstChild.nodeValue;
  var aTag = document.createElement("a");
  aTag.href = url;
  aTag.target = "_blank";
  aTag.appendChild(document.createTextNode(link));
  baseTag.replaceChild(aTag, baseTag.firstChild);
}
</script>
<span id="test">test</span>
</body></html>

window.onload = function(){

var id = "test";

var url = "http://yosshi.snowdrop.asia/";

var baseTag = document.getElementById(id);

var link = baseTag.firstChild.nodeValue;

var aTag = document.createElement("a");

aTag.href = url;

aTag.target = "_blank";

aTag.appendChild(document.createTextNode(link));

baseTag.replaceChild(aTag, baseTag.firstChild);

}

</script>

</body></html>

span に image を付加して link にする

<html><body>
<script>
window.onload = function(){
  var id = "test";
  var url = "http://yosshi.snowdrop.asia/";
  var baseTag = document.getElementById(id);
  var aTag = document.createElement("a");
  aTag.href = url;
  aTag.target = "_blank";
  var DOM_img = document.createElement("img");
  DOM_img.src = "http://snowdrop.asia/wp-content/uploads/2015/09/frontend-300x142.png";
  aTag.appendChild(DOM_img);
  baseTag.replaceChild(aTag, baseTag.firstChild);
}
</script>
<span id="test">test</span>
</body></html>

window.onload = function(){

var id = "test";

var url = "http://yosshi.snowdrop.asia/";

var baseTag = document.getElementById(id);

var aTag = document.createElement("a");

aTag.href = url;

aTag.target = "_blank";

var DOM_img = document.createElement("img");

DOM_img.src = "http://snowdrop.asia/wp-content/uploads/2015/09/frontend-300x142.png";

aTag.appendChild(DOM_img);

baseTag.replaceChild(aTag, baseTag.firstChild);

}

</script>

</body></html>

※<span></span> の間に何も無いと表示されません。nodeValueが空っぽだと表示されません。。。
textの例のaTagオブジェクトに imgオブジェクトを生成して、追加するだけです。

504のエラーが出た場合

client—①—nginx—②—php5-fpm—③—mysql

504 gateway time-out

1	504 gateway time-out

上記の構成として、この場合、②においてnginx—>php5-fpmでphp5の処理が遅くnginxが切断してしまった。
という事なので、nginxのfastcgiのtimeout値を伸ばしてあげる必要があります。

例えば、以下のようなファイルを作成して、nginxを再起動します。

% sudo vi /etc/nginx/conf.d/fastcgi.conf
---
fastcgi_intercept_errors on;
fastcgi_ignore_client_abort off;
fastcgi_connect_timeout 60;
fastcgi_send_timeout 300;     < --- ココ
fastcgi_read_timeout 300;      <--- ココ
fastcgi_buffer_size 128k;
fastcgi_buffers 4 256k;
fastcgi_busy_buffers_size 256k;
fastcgi_temp_file_write_size 256k;
---

% sudo /etc/init.d/nginx restart

% sudo vi /etc/nginx/conf.d/fastcgi.conf

---

fastcgi_intercept_errors on;

fastcgi_ignore_client_abort off;

fastcgi_connect_timeout 60;

fastcgi_send_timeout 300; < --- ココ

fastcgi_read_timeout 300; <--- ココ

fastcgi_buffer_size 128k;

fastcgi_buffers 4 256k;

fastcgi_busy_buffers_size 256k;

fastcgi_temp_file_write_size 256k;

---

% sudo /etc/init.d/nginx restart

※reloadでも良いかもしれません

104のエラーが出た場合

client—①—nginx—②—php5-fpm—③—mysql

recv() failed (104: Connection reset by peer) while reading response header from upstream, client:

1	recv() failed (104: Connection reset by peer) while reading response header from upstream, client:

において、php5が処理時間がかかってしまって、nginx—>php5-fpmにクエリは投げられたけど、nginx< ---php5-fpmに返す際に、php5-fpmがコネクションを切っちゃったケース。

% sudo vi /etc/php5/fpm/pool.d/www.conf
---
;pm.process_idle_timeout = 10s;
   ↓
pm.process_idle_timeout = 30s;
---

% sudo vi /etc/php5/php.ini
---
max_execution_time = 30   ←  60などに増やす
---

% sudo /etc/init.d/php5-fpm restart



それでも改善しない場合は、phpの動作を確認します。
<pre>
% sudo vi /etc/php5/fpm/pool.d/www.conf
---
;pm.status_path = /status
   ↓
pm.status_path = /status

;php_admin_value[error_log] = /var/log/fpm-php.www.log
   ↓
php_admin_value[error_log] = /var/log/fpm-php.www.log
---

% sudo /etc/init.d/php5-fpm restart

% sudo vi /etc/php5/fpm/pool.d/www.conf

---

;pm.process_idle_timeout = 10s;

↓

pm.process_idle_timeout = 30s;

---

% sudo vi /etc/php5/php.ini

---

max_execution_time = 30 ← 60などに増やす

---

% sudo /etc/init.d/php5-fpm restart

それでも改善しない場合は、phpの動作を確認します。

<pre>

% sudo vi /etc/php5/fpm/pool.d/www.conf

---

;pm.status_path = /status

↓

pm.status_path = /status

;php_admin_value[error_log] = /var/log/fpm-php.www.log

↓

php_admin_value[error_log] = /var/log/fpm-php.www.log

---

% sudo /etc/init.d/php5-fpm restart

php5-fpmのプロセスが足りない場合
→ /etc/php5/fpm/pool.d/www.conf : pm.max_children = 5 や、pm.max_spare_servers = 3を増やす
※ pm = dynamicを確認

mysqlの接続数も増やす 5×3=15だったのを増やした分だけ接続できるように！

s sudo vi /etc/mysql/my.cnf
---
max_connections=128    < --- pm.max_children x pm.max_spare_servers以上にする
---

s sudo vi /etc/mysql/my.cnf

---

max_connections=128 < --- pm.max_children x pm.max_spare_servers以上にする

---

ここにイイカンジでまとまってました。

カテゴリー: フロント

javascriptでDOMを操作してspanをlinkにする方法

span の text をlinkにする

span に image を付加して link にする

nginx+php5-fpmで504や104のエラーが出たら・・・

504のエラーが出た場合

104のエラーが出た場合