VirtualBox+ubuntu18.4+php7.2でattendizeを使ったチケット販売サイトを作ってみた

#趣味の公演のチケットを売りたい・・・
チケット販売サイトって手数料が５％以上かかる・・・。じゃあ自分で作っちゃおうということで、知識０から始めてみました。備忘録として残しておきます。
最終的にはstripeの手数料3.6%は取られてしまうんですけどね。

目標はattendizeを自分のドメインで動作させること。
attendizeはチケット販売のOSSです。詳細は[こちら](http://attendize.com/index.html)
日本語の資料がなかったので苦戦しました。

こんな流れでいきます。投稿は何回かに分けるかも。ちなみにホスト端末はWIN10です。
１．VirtualBoxのインストール
２．ubuntu18.4のインストール
３．php7.2のインストール
４．mariaDBのインストール
５．nginxのインストール
６．attendizeのインストール
７．attendizeの設定
８．ドメイン取得とネットワーク設定
９．https化
１０．stripeの設定

#VirtualBoxのインストール
よいサイトがありました。[エンジニアの入り口](https://eng-entrance.com/virtualbox-install)
BIOSのVirtualization Technologyをtrueにするのがポイント。trueにしないと、VirtualBoxで64bitOSが選択できなくなってしまうのだ。

#ubuntu18.4のインストールと設定
###インストール
まず日本語版のイメージファイルをダウンロードします。[ubuntu Japanese Team](https://www.ubuntulinux.jp/download/ja-remix)
私は**ubuntu-ja-18.04.1-desktop-amd64.iso（ISOイメージ）**を選択しました。
インストール方法についてはこちらを参考にしました。[NCR](https://lab.ncrs.jp/virtual-box%E3%81%AE%E4%BB%AE%E6%83%B3%E3%83%9E%E3%82%B7%E3%83%B3%E3%81%B8ubuntu-18-04%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E3%81%8A%E8%A9%B1%E3%80%90/)
私の持っているしょぼいパソコンでは次のような設定でインストールしました。
■メモリーサイズ：2GB
■ファイルサイズ：20GB
###Guest Additionsのインストール
コピペができない・・・マウスがなんか変。と思っているところですがこのソフトをインストールすると解消します。ちなみにホストPCとゲストPCのマウス切り替えは**右Ctrlキー**を押すとできます。
インストール方法はこちらを参考にしました。[一馬力のメモ帳](https://ichibariki.hatenablog.com/entry/2018/05/13/173056)

インストール後、仮想マシン＞設定＞一般＞高度から次のように設定します。（くそ画質すみません）
■クリップボードの共有：双方向
■ドラッグ＆ドロップ：双方向
![コピーペースト.jpg](https://qiita-image-store.s3.amazonaws.com/0/314078/63b6520b-5340-a074-8d44-b65cef681130.jpeg)

###ネットワーク設定
おまちかねです。VirtualBoxにはネットワークの構成の仕方が何種類もあって大変ですよね。
私はいろいろ試した結果、**ブリッジアダプター**一択でした。

仮想マシン＞設定＞ネットワークより
■ネットワークアダプターを有効化にチェック
■ブリッジアダプターを選択
■名前は適当にワイヤレスを選択

ではホストーゲスト間の通信をチェックしましょう。
まず、ゲストPC(ubuntu)で右クリック＞端末を起動します。
最初はネットワークコマンドがインストールされていないので、
インストールしてから、ネットワーク情報を調べます。

```linex
sudo apt install net-tools 
sudo ifconfig

enp0s3: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.100.111  netmask 255.255.255.0  broadcast 192.168.100.255
        inet6 fe80::72e4:9277:6908:b37c  prefixlen 64  scopeid 0x20<link>
        ether 08:00:27:cb:1c:cd  txqueuelen 1000  (イーサネット)
        RX packets 7840  bytes 8088587 (8.0 MB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 2495  bytes 357500 (357.5 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        inet6 ::1  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1000  (ローカルループバック)
        RX packets 104  bytes 8274 (8.2 KB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 104  bytes 8274 (8.2 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

```
ゲストPCのIPは***192.168.100.111***ということがわかりました。

続いてホストPCは検索バーに***cmd***と入力してコマンドプロンプトを起動します。

```windows
ipcondig


イーサネット アダプター イーサネット:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fe80::6df7:27ad:7353:b952%15
   IPv4 アドレス . . . . . . . . . . . .: 192.168.100.110
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: fe80::2254:faff:fe8a:84b1%15
                                          192.168.100.1
```

ホストPCのIPは***192.168.100.110***ということがわかりました。
続いてホストPCから

```windows
ping　192.168.100.111

192.168.100.111 に ping を送信しています 32 バイトのデータ:
192.168.100.111 からの応答: バイト数 =32 時間 <1ms TTL=64
192.168.100.111 からの応答: バイト数 =32 時間 <1ms TTL=64
192.168.100.111 からの応答: バイト数 =32 時間 <1ms TTL=64
192.168.100.111 からの応答: バイト数 =32 時間 <1ms TTL=64

192.168.100.111 の ping 統計:
    パケット数: 送信 = 4、受信 = 4、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
    最小 = 0ms、最大 = 0ms、平均 = 0ms
```

損失が０であることを確認しましょう。
さらにゲストPCから

```linux
ping 192.168.100.110

PING 192.168.100.110 (192.168.100.110) 56(84) bytes of data.
64 bytes from 192.168.100.110: icmp_seq=1 ttl=128 time=0.598 ms
64 bytes from 192.168.100.110: icmp_seq=2 ttl=128 time=0.643 ms
64 bytes from 192.168.100.110: icmp_seq=3 ttl=128 time=0.491 ms
64 bytes from 192.168.100.110: icmp_seq=4 ttl=128 time=0.635 ms
64 bytes from 192.168.100.110: icmp_seq=5 ttl=128 time=0.618 ms
64 bytes from 192.168.100.110: icmp_seq=6 ttl=128 time=0.633 ms
^C
--- 192.168.100.110 ping statistics ---
6 packets transmitted, 6 received, 0% packet loss, time 5107ms
rtt min/avg/max/mdev = 0.491/0.603/0.643/0.052 ms
```
0% packet lossであることを確認しましょう。こちらの動作は自動で止まらないので、***左Ctrl+C***で止めましょう。





#PHP7.2のインストール
PHP7.2とattendizeで使うエクステンションをインストールします。
ゲストPC(ubuntu)で、右クリック＞端末を選択し起動します。
ここからは[Computingforgeeks](https://computingforgeeks.com/how-to-install-attendize-on-ubuntu-18-04-open-source-ticket-selling-and-event-management-platform/)を参考にしました。

```linux
sudo apt install php7.2 php7.2-fpm php7.2-mysql php7.2-pdo php7.2-cli php7.2-fpm php7.2-mysql php7.2-zip php7.2-gd php7.2-mbstring php7.2-curl php7.2-xml php-pear php7.2-bcmath
```
途中何度か選択肢がありますが、すべて***y***としてください。

#mariaDBのインストール
ここからはこちらを参考にしました。[Computingforgeeks](https://computingforgeeks.com/install-mariadb-10-on-ubuntu-18-04-and-centos-7/)
途中apache2が自動でインストールされるのですが、不要なのでリンク先の工程が終わったらアンインストールしましょう。

```linux
sudo apt autoremove apache2
```
###attendize用データベースの作成
参考はこちらに戻ります。[Computingforgeeks](https://computingforgeeks.com/how-to-install-attendize-on-ubuntu-18-04-open-source-ticket-selling-and-event-management-platform/)
Step 2: Install MariaDB database serverを実行してください。
ここで設定した***"StrongPassword"***パスワードは後で使うので控えておいてください。

#nginxのインストール
[Computingforgeeks](https://computingforgeeks.com/how-to-install-attendize-on-ubuntu-18-04-open-source-ticket-selling-and-event-management-platform/)のStep 2: Install and configure Nginx web serverを実行してください。
***/etc/nginx/conf.d/attendize.conf***上の***server_name***はローカルで確認する際にはあまり関係ないので、適当で構いません。独自ドメインを取得してから変更しましょう。

#attendizeのインストール
[Computingforgeeks](https://computingforgeeks.com/how-to-install-attendize-on-ubuntu-18-04-open-source-ticket-selling-and-event-management-platform/)のstep3を実行しますが詳細をこちらでも書いていきます。

ドキュメントルートは***{attendizeのインストールディレクトリ}/public***になります。それを考慮してインストールするディレクトリを決めてください。

まずはgitのインストールから

```linux
sudo apt-get install git
```

続いてattendizeのインストール

```linux
git clone https://github.com/Attendize/Attendize  /srv/attendize
```

環境ファイルを作成するので、コピーを作ります。

```linux
cd /srv/attendize/
cp .env.example .env
```

作った環境ファイルを編集します。
viエディタの使い方はこちらを参考にしてください。[VIエディタの使い方](https://prev.net-newbie.com/linux/commands/vi.html)

```linux
sudo　vi　/srv/attendize/.env

DB_TYPE=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=attendize
DB_USERNAME=attendize
DB_PASSWORD=StrongPassword　　//attendize用データベースの作成で設定したパスワード

MAIL_DRIVER=smtp　　　　　　　//gmailの場合のメール設定　各提供元の設定を参考にしてください。
MAIL_PORT=587
MAIL_ENCRYPTION=TLS
MAIL_HOST=smtp.gmail.com
MAIL_FROM_ADDRESS={メールアドレス}
MAIL_FROM_NAME="{送信者名}"
MAIL_PASSWORD={メールのパスワード}
MAIL_USERNAME={メールアドレス}
```

ライブラリの依存関係を処理してくれるPHP　composerをインストールします。インストール先はattendizeのインストール先である***/srv/attendize***がよいでしょう。

```linux
cd /srv/attendize
sudo php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
sudo php -r "if (hash_file('SHA384', 'composer-setup.php') === '93b54496392c062774670ac18b134c3b3a95e5a5e5c8f1a9f115f203b75bf9a129d5daa8ba6a13e2cc8a1da0806388a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
sudo php composer-setup.php
sudo php -r "unlink('composer-setup.php');"
```

composerを使って種々のライブラリをインストールします。

```linux
php composer.phar install
```

どのディレクトリからでも***composer install***が使えるようにするため、移動させます。

```linux
sudo mv composer.phar /usr/local/bin/composer
```

それでは次のディレクトリでも```sudo composer install```しましょう。
■/srv/attendize/vendor/omnipay/stripe
■/srv/attendize/vendor/omnipay/stripe/vendor/stripe/stripe-php
私はやっていませんが```find /srv/attendize -name "*composer.json*"```すると、無数のcomposer.jsonが出てきます。本当はすべてのディレクトリで```sudo composer install```したほうがいいのかもしれませんね。
※実はcomposerはsuperuserで使わないほうがいいそうです。

Laravel frameworkのアプリケーションキーを生成します。composerの処理がうまくいってないとエラーが出ます。

```linux
cd /srv/attendize
sudo php artisan key:generate
```

フォルダのパーミッションをnginxが使えるように変更します。***www-data***の部分はnginxの実行ユーザです。デフォルトから変えている場合は変更してください。

```linux
sudo chown -R www-data storage/app
sudo chown -R www-data storage/framework
sudo chown -R www-data storage/logs
sudo chown -R www-data storage/cache
sudo chown -R www-data bootstrap/cache
sudo chown -R www-data .env
sudo chown -R www-data: /srv/attendize/public

sudo chmod -R a+w storage/app
sudo chmod -R a+w storage/framework
sudo chmod -R a+w storage/logs
sudo chmod -R a+w storage/cache
sudo chmod -R a+w bootstrap/cache
sudo chmod -R a+w .env
```

ではattendizeのインストーラーを走らせてみましょう。
表示が出れば成功です。管理者の設定をしましょう。

```linux
php artisan attendize:install

--------------------
Attempting to install Attendize v1.0.0
--------------------
Generating app key
Migrating database.
Database successfully migrated.
Seeding DB data
Data successfully seeded
--------------------
Please create an admin user.
--------------------
```

#attendizeの設定
###nginxまわりの設定
設定ファイルをバックアップしてから変更します。
今回の設定とは関係ありませんが、nginxの設定ファイルの構成について良いものがみつかりました。参考にしてください。[こちら](https://yoshinorin.net/2018/04/01/nginx-virtualhost-usingby-sitesavailable/)

```linux
sudo cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bak  //デフォルトの設定のバックアップを取ります。
sudo vim /etc/nginx/conf.d/default.conf


server {

    listen       443 ssl;　　　　//https化の予定なので、sslで書いています。

    server_name {ドメインネーム};

    root /srv/attendize/public;　//ドキュメントルートの設定
    index index.php;　　　　　　　//自動で読み込むファイルの設定


    ssl_certificate     {証明書ファイルのパス}　　//後述
    ssl_certificate_key {証明書ファイルのパス}



    location / {
	    try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri =404;

        fastcgi_pass   unix:/run/php/php7.2-fpm.sock;　//ここが書かれていることが重要。phpのバージョンを合わせること。
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}
```
修正が終わったらエラーチェックします。

```linux
sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

```

***test is successful***と表示されればokです。
設定を反映させるためにnginxを再起動します。

```linux
systemctl restart nginx
systemctl enable nginx　　　　//nginxの自動起動有効化
systemctl enable php7.2-fpm　//fpmの自動起動有効化
```

ではホストPCのブラウザでattendizeを開いてみましょう。アドレスバーに***ゲストPCのIPアドレス***を打ち込みます。login画面が表示されたら完了です。あらかじめ登録しておいた管理者の情報でloginします。
![installed.png](https://qiita-image-store.s3.amazonaws.com/0/314078/aa6642ef-e234-eed7-9149-3bde67c99992.png)


###attendizeを使ってみよう
次にattendizeでeventを作成し、無料のチケットを買ってみましょう。ちなみに私はソースをいじって一部日本語にしています。attendizeに設定した管理者でログインしましょう。
次の画面が表示されるはずです。
![テスト.png](https://qiita-image-store.s3.amazonaws.com/0/314078/0af33454-1765-091d-475c-741c013bfe42.png)
管理者の設定をします。右上の管理者の名前をクリックし、***Account Settings***をクリックします。


![テスト３.png](https://qiita-image-store.s3.amazonaws.com/0/314078/0d6f2ec9-779a-8210-4102-6024633a938b.png)
続いてこのように設定します。
![テスト4.png](https://qiita-image-store.s3.amazonaws.com/0/314078/8da07a27-dd90-70b3-d78d-0c336df136ee.png)

timezoneの設定は、ブラウザ上からだとうまくいかないので、ゲストPCに戻って書き換えましょう。

```linux
sudo vim /srv/attendize/config/app.php

'timezone' => 'Asia/Tokyo', //env('TIMEZONE', 'UTC'),
```


左側の***EVENT***をクリックし、***CREATE EVENT***をクリックします。すべて適当に入力します。入力したら***CREATE EVENT***をクリックします。ちなみに未来の日付を設定してください。チケットが買えなくなってしまいます。
![テスト2.png](https://qiita-image-store.s3.amazonaws.com/0/314078/7d541e9f-b8bc-a152-3d76-f8619726bef4.png)
続いて、ページが遷移したので***CREATE TICKET***をクリックします。まだ支払い方法の設定をしてないので、0円のチケットを作ります。
![テスト５.png](https://qiita-image-store.s3.amazonaws.com/0/314078/bac4d162-6b97-0e0d-7e39-1daa4e0a50df.png)
では作ったチケットを買ってみましょう。中央やや左上にある***Event Page***をクリックしてイベントページに進みます。チケットを購入してメールが届くかチェックしましょう。
![テスト６.png](https://qiita-image-store.s3.amazonaws.com/0/314078/729420e5-eaca-b727-e9ba-bd64272e7337.png)

これで一般的なattendizeの設定は終わりです。疲れたので今回はここまで。
もしうまく動かないところがあったらフィードバック欲しいです・・・