無料のLiveChat（LiveHelperChat）をEC2で動かしてみる

[こちらの内容はブログに公開しています。](https://ksysnote.com/tool/livehelperchat-install/)

LiveChatを導入を検討したときに、有料版もいくつかあったのですがなるべくコストをかけたくなかったので無料版がないか探してみたら<a href="https://livehelperchat.com/">LiveHelperChat</a>というものをみつけました。

<a href="https://livehelperchat.com/demo-12c.html">demo</a>を見てもLiveChatで必要そうな機能は一通り用意されているようなので実際にEC2を使って導入をしてみました。
<p id="aOAdvBd"><img class="alignnone size-full wp-image-195 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcac5400029.png" alt="" /></p>

<h2>EC２の環境を構築</h2>
<h3>環境構築</h3>
<h4>EC2のインスタンスを作成して、パッケージを最新にする</h4>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo yum update -y</pre>
<h4>日付をJSTに設定する</h4>
日付を確認するとUTCとなっているので、JSTに変更します
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ date
2018年  9月 19日 水曜日 02:27:42 UTC</pre>
タイムゾーンの設定
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo cp /etc/localtime /etc/localtime.org
$ sudo ln -sf  /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
$ sudo cp /etc/sysconfig/clock /etc/sysconfig/clock.org
</pre>
再起動で戻らないように設定する
<pre class="EnlighterJSRAW" data-enlighter-language="null"># sudo vi /etc/sysconfig/clock
ZONE="Asia/Tokyo"
UTC=false</pre>
確認するとJSTに変わっています。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ date
Tue Oct 31 11:56:35 JST 2017
$ strings /etc/localtime
TZif2
TZif2
JST-9</pre>
・反映をさせるためにrebootします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo reboot</pre>
<h4>・swapの設定</h4>
laravelインストール時にt2-minerだとメモリ不足でエラーになりますのでswapを設定していきます。

確認するとswapがないようです。（EC2はswapが設定されていません）
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ grep Mem /proc/meminfo
MemTotal:        1009420 kB
MemFree:          847152 kB
MemAvailable:     836316 kB

$ grep Swap /proc/meminfo
SwapCached:            0 kB
SwapTotal:             0 kB
SwapFree:              0 kB

$ free
             total       used       free     shared    buffers     cached
Mem:       1009420     161640     847780         60       8656      98424
-/+ buffers/cache:      54560     954860
Swap:            0          0          0
</pre>
512MBのスワップを作成していきます
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo dd if=/dev/zero of=/swapfile1 bs=1M count=512
512+0 レコード入力
512+0 レコード出力
536870912 バイト (537 MB) コピーされました、 5.02482 秒、 107 MB/秒</pre>
・確認
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ ll /swapfile1
-rw-r--r-- 1 root root 536870912  9月 18 11:56 /swapfile1</pre>
・スワップファイルの権限を変更し、フォーマットをする
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo chmod 600 /swapfile1
$ sudo mkswap /swapfile1
スワップ空間バージョン1を設定します、サイズ = 524284 KiB
ラベルはありません, UUID=9b98d845-40f9-4944-a07b-88dd082a2439</pre>
・swapファイルを有効化
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo swapon /swapfile1
$ sudo swapon -s
Filename				Type		Size	Used	Priority
/swapfile1                             	file	524284	0	-2</pre>
・システムリブートでswapファイルが反映するように設定
<pre class="EnlighterJSRAW" data-enlighter-language="null"># sudo cp -p /etc/fstab /etc/fstab.org
# sudo sh -c "echo '/swapfile1 swap swap defaults 0 0' &gt;&gt; /etc/fstab"
# cat /etc/fstab
#
LABEL=/     /           ext4    defaults,noatime  1   1
tmpfs       /dev/shm    tmpfs   defaults        0   0
devpts      /dev/pts    devpts  gid=5,mode=620  0   0
sysfs       /sys        sysfs   defaults        0   0
proc        /proc       proc    defaults        0   0
/swapfile1  swap        swap    defaults        0   0
</pre>
swapが設定できたことを確認します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ grep Mem /proc/meminfo
MemTotal:        1009432 kB
MemFree:          307224 kB
MemAvailable:     828360 kB
$ grep Swap /proc/meminfo
SwapCached:            0 kB
SwapTotal:        524284 kB
SwapFree:         524284 kB
$ free
             total       used       free     shared    buffers     cached
Mem:       1009432     702208     307224         60       9164     625360
-/+ buffers/cache:      67684     941748
Swap:       524284          0     524284</pre>
<h3>Apache、PHP、MySQLのインストール</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="null">sudo yum install -y httpd24 php72 mysql57-server php72-mbstring php72-pdo php72-mysqlnd</pre>
<h4>ドキュメントルートの権限を設定</h4>
apacheのドキュメントルート（/var/www）はrootが所有しているためec2-userで使用できるように設定をします。

apacheグループにec2-userを追加します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo usermod -a -G apache ec2-user
$ exit</pre>
一度ログアウトをして反映させます。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ exit</pre>
再ログインして、apacheグループが設定されているかを確認します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ groups
ec2-user wheel apache</pre>
/var/www/のグループ所有権をapacheグループに変更する
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo chown -R ec2-user:apache /var/www</pre>
グループの書き込み権限を追加とサブディレクトリにグループIDを設定する
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo chmod 2775 /var/www
$ find /var/www -type d -exec sudo chmod 2775 {} \;
$ find /var/www -type f -exec sudo chmod 0664 {} \;</pre>
<h3>composerのインストール</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ cd ~
$ curl -sS https://getcomposer.org/installer | sudo php
All settings correct for using Composer
Downloading...

Composer (version 1.7.3) successfully installed to: /home/ec2-user/composer.phar
Use it: php composer.phar

$ sudo cp composer.phar /usr/local/bin/composer
$ sudo ln -s /usr/local/bin/composer /usr/bin/composer

$ composer -V
Composer version 1.7.3 2018-11-01 10:05:06</pre>
<h3>MySQL実行する</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo service mysqld start
Starting mysqld:                                           [  OK  ]</pre>
・MySQLサーバーの設定
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo mysql_secure_installation

Securing the MySQL server deployment.

Connecting to MySQL using a blank password.

VALIDATE PASSWORD PLUGIN can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD plugin?

Press y|Y for Yes, any other key for No:</pre>
rootのパスーワード入力しますが、デフォルトでは設定されていないので『Enter』を押します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">Please set the password for root here.

New password:

Re-enter new password:</pre>
新しいパスワードを設定します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.

Remove anonymous users? (Press y|Y for Yes, any other key for No) :</pre>
「Y」を入力して匿名ユーザアカウントを削除します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.

Disallow root login remotely? (Press y|Y for Yes, any other key for No) :</pre>
「Y」を入力してリモートログインを無効にします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.


Remove test database and access to it? (Press y|Y for Yes, any other key for No) :</pre>
「Y」と入力してテストデータベースを削除します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.

Reload privilege tables now? (Press y|Y for Yes, any other key for No) :</pre>
「Y」と入力してリロードします。

システムrebootしてもMySQLを起動するように設定をする
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo chkconfig mysqld on</pre>
<h2>Live Helper Chat</h2>
<h3>Live Helper Chatのインストール</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ cd /var/www/html
$ mkdir livechat
$ cd livechat

$ wget https://github.com/remdex/livehelperchat/archive/master.zip
$ unzip master.zip
$ mv livehelperchat-master/* ./

$ rm master.zip
$ rm -r livehelperchat-master/
$ ls
composer.json  lhc_web  README.md
$ cd lhc_web

$ chmod 777 -R cache</pre>
<h3>インストール</h3>
http://xxx.xxx.xxx.xxx/livechat/lhc_web/にブラウザでアクセスしてインストール画面を表示する
<p id="BDWZBlI"><img class="alignnone size-full wp-image-198 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcd6dca4805.png" alt="" /></p>

<h3>ライブラリのインストール</h3>
インストール画面でNoになっている箇所を対処していきます。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ sudo yum install -y php72-gd


$ sudo service httpd restart</pre>
<h3>データベースの作成</h3>
コマンドからデータベースを作成する
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ mysql -h localhost -uroot -p

mysql&gt; create database livechat;
Query OK, 1 row affected (0.00 sec)

mysql&gt; show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| livechat           |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)</pre>
<h3>データベースの設定</h3>
先ほど作成したデータベースの項目を設定する
<ul>
 	<li>username</li>
 	<li>password</li>
 	<li>host</li>
 	<li>port</li>
 	<li>database name</li>
</ul>
<p id="fRVoZSy"><img class="alignnone size-full wp-image-199 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcd9e23c44d.png" alt="" /></p>

<h3>管理者の設定</h3>
<ul>
 	<li>Admin username</li>
 	<li>Admin password</li>
 	<li>E-mail</li>
 	<li>Your name</li>
 	<li>Your surname</li>
 	<li>Default department</li>
</ul>
<p id="cXmofAz"><img class="alignnone size-full wp-image-200 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcdac0aa837.png" alt="" /></p>

<h3>インストール完了</h3>
Login here からログインしてみる
<p id="dSTwoYX"><img class="alignnone size-full wp-image-201 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcdb28f21ae.png" alt="" /></p>
<p id="lSIUXSk"><img class="alignnone size-full wp-image-202 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcdb800a221.png" alt="" /></p>
&nbsp;
<h2>日本語に変更</h2>
デフォルトだと日本語表示ができないので、<a href="https://livehelperchat.com/how-to-install-new-language-38a.html">こちらのページ</a>を参考に日本語を追加します。
<h3>翻訳ファイルのダウンロード</h3>
<a href="https://www.transifex.com/remigijus-kiminas/live-helper-chat/">transifex</a>でLiveHelperChatの翻訳が行われているようです。こちらで無料でアカウントが作成できるのでログインをしてファイルをダウンロードします。

サイドメニューの「言語」を選択して検索項目にJapaneseと入力をすると２つのリソースが表示されます。

下に表示されている方が翻訳されているようなので、そちらを選択します。
<p id="zzsRalt"><img class="alignnone size-full wp-image-205 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfce62127665.png" alt="" /></p>
desktopとwebの2つが表示されますが、今回はwebを利用します
<p id="SmlcEed"><img class="alignnone size-full wp-image-206 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfce6e98610d.png" alt="" /></p>
ダウンロードします。

「for_use_live-helper-chat_translation_webts_ja_JP.ts」ファイルがダウンロードされます。
<h3>EC2にファイル設定します</h3>
scpでファイルをアップロードします
<pre class="EnlighterJSRAW" data-enlighter-language="null">scp -i ~/.ssh/AWS認証キー ~/Downloads/for_use_live-helper-chat_translation_webts_ja_JP.ts ec2-user@xxx.xxx.xxx.xxx:~/</pre>
「/var/www/html/livechat/lhc_web/translations」に各言語の翻訳ファイルがあるので、ja_JPというディレクトリを作成して<span class="marker">translation.ts</span>という名前でファイルを設置します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ cd /var/www/html/livechat/lhc_web/translations/

$ ls
ar_EG  cs_CS  el_EL  fi_FI  hr_HR  ka_KA  no_NO  ro_RO  sv_SV  vi_VN
bg_BG  da_DA  es_MX  fr_FR  id_ID  lt_LT  pl_PL  ru_RU  th_TH  zh_ZH
ca_ES  de_DE  fa_FA  he_HE  it_IT  nl_NL  pt_BR  sq_AL  tr_TR

$ mkdir ja_JP
$ mv ~/for_use_live-helper-chat_translation_webts_ja_JP.ts /var/www/html/livechat/lhc_web/translations/ja_JP/translation.ts</pre>
<h3>設定ファイルの変更</h3>
「/var/www/html/livechat/lhc_web/settings」にある<span class="marker">settings.ini.php</span>を編集していきます。

編集の前にファイルのオーナーを変更しておきます。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ cd /var/www/html/livechat/lhc_web/settings
$ sudo chown -R ec2-user:apache settings.ini.php
$ vi settings.ini.php</pre>
'available_site_access'という項目があるので、'ja'を追加します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">        29 =&gt; 'cat',
        30 =&gt; 'site_admin',
↓
        29 =&gt; 'cat',
        30 =&gt; 'ja',
        31 =&gt; 'site_admin',</pre>
'site_access_options'の項目を探すと各言語ごとに設定がありますので、jaも追加します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">'ja' =&gt;
array (
  'locale' =&gt; 'ja_jp',
  'content_language' =&gt; 'ja',
  'dir_language' =&gt; 'rtl',
  'title' =&gt; '',
  'description' =&gt; '',
  'theme' =&gt;
  array (
    0 =&gt; 'customtheme',
    1 =&gt; 'defaulttheme',
  ),
  'default_url' =&gt;
  array (
    'module' =&gt; 'chat',
    'view' =&gt; 'startchat',
  ),
),</pre>
'site_admin'の設定をjaに変更します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">'site_admin' =&gt;
array (
  'locale' =&gt; 'ja_JP',
  'content_language' =&gt; 'ja',
  'dir_language' =&gt; 'ltr',
  'theme' =&gt;
  array (
    0 =&gt; 'customtheme',
    1 =&gt; 'defaulttheme',
  ),
  'login_pagelayout' =&gt; 'login',
  'default_url' =&gt;
  array (
    'module' =&gt; 'front',
    'view' =&gt; 'default',
  ),
),</pre>
<h3>画面から日本語に設定</h3>
サイドメニューのSettingsからLanguages configurationを選択します。
<p id="zBlnTfp"><img class="alignnone size-full wp-image-208 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcefea3ddf2.png" alt="" /></p>
「ja_JP」選択すると日本語に変換されます。
<p id="RdkaLbs"><img class="alignnone size-full wp-image-209 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcf04ad7aaf.png" alt="" /></p>

<h3>埋め込みタグ</h3>
設定の「組込コード」から各種のコードが取得できます。

サイトに埋め込みだけでLiveChat以外にもFAQなども実装できるようです。
<p id="XAfXVBf"><img class="alignnone size-full wp-image-210 " src="https://ksysnote.com/wp-content/uploads/2018/11/img_5bfcf0eeea123.png" alt="" /></p>