LoginSignup
2
2

More than 5 years have passed since last update.

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

Posted at

趣味の公演のチケットを売りたい・・・

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

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

こんな流れでいきます。投稿は何回かに分けるかも。ちなみにホスト端末はWIN10です。
1.VirtualBoxのインストール
2.ubuntu18.4のインストール
3.php7.2のインストール
4.mariaDBのインストール
5.nginxのインストール
6.attendizeのインストール
7.attendizeの設定
8.ドメイン取得とネットワーク設定
9.https化
10.stripeの設定

VirtualBoxのインストール

よいサイトがありました。エンジニアの入り口
BIOSのVirtualization Technologyをtrueにするのがポイント。trueにしないと、VirtualBoxで64bitOSが選択できなくなってしまうのだ。

ubuntu18.4のインストールと設定

インストール

まず日本語版のイメージファイルをダウンロードします。ubuntu Japanese Team
私はubuntu-ja-18.04.1-desktop-amd64.iso(ISOイメージ)を選択しました。
インストール方法についてはこちらを参考にしました。NCR
私の持っているしょぼいパソコンでは次のような設定でインストールしました。
■メモリーサイズ:2GB
■ファイルサイズ:20GB

Guest Additionsのインストール

コピペができない・・・マウスがなんか変。と思っているところですがこのソフトをインストールすると解消します。ちなみにホストPCとゲストPCのマウス切り替えは右Ctrlキーを押すとできます。
インストール方法はこちらを参考にしました。一馬力のメモ帳

インストール後、仮想マシン>設定>一般>高度から次のように設定します。(くそ画質すみません)
■クリップボードの共有:双方向
■ドラッグ&ドロップ:双方向
コピーペースト.jpg

ネットワーク設定

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

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

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

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と入力してコマンドプロンプトを起動します。

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から

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

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

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を参考にしました。

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
途中apache2が自動でインストールされるのですが、不要なのでリンク先の工程が終わったらアンインストールしましょう。

sudo apt autoremove apache2

attendize用データベースの作成

参考はこちらに戻ります。Computingforgeeks
Step 2: Install MariaDB database serverを実行してください。
ここで設定した"StrongPassword"パスワードは後で使うので控えておいてください。

nginxのインストール

ComputingforgeeksのStep 2: Install and configure Nginx web serverを実行してください。
/etc/nginx/conf.d/attendize.conf上のserver_nameはローカルで確認する際にはあまり関係ないので、適当で構いません。独自ドメインを取得してから変更しましょう。

attendizeのインストール

Computingforgeeksのstep3を実行しますが詳細をこちらでも書いていきます。

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

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

sudo apt-get install git

続いてattendizeのインストール

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

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

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

作った環境ファイルを編集します。
viエディタの使い方はこちらを参考にしてください。VIエディタの使い方

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がよいでしょう。

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を使って種々のライブラリをインストールします。

php composer.phar install

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

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の処理がうまくいってないとエラーが出ます。

cd /srv/attendize
sudo php artisan key:generate

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

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のインストーラーを走らせてみましょう。
表示が出れば成功です。管理者の設定をしましょう。

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の設定ファイルの構成について良いものがみつかりました。参考にしてください。こちら

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;
    }
}

修正が終わったらエラーチェックします。

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を再起動します。

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

ではホストPCのブラウザでattendizeを開いてみましょう。アドレスバーにゲストPCのIPアドレスを打ち込みます。login画面が表示されたら完了です。あらかじめ登録しておいた管理者の情報でloginします。
installed.png

attendizeを使ってみよう

次にattendizeでeventを作成し、無料のチケットを買ってみましょう。ちなみに私はソースをいじって一部日本語にしています。attendizeに設定した管理者でログインしましょう。
次の画面が表示されるはずです。
テスト.png
管理者の設定をします。右上の管理者の名前をクリックし、Account Settingsをクリックします。

テスト3.png
続いてこのように設定します。
テスト4.png

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

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

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

左側のEVENTをクリックし、CREATE EVENTをクリックします。すべて適当に入力します。入力したらCREATE EVENTをクリックします。ちなみに未来の日付を設定してください。チケットが買えなくなってしまいます。
テスト2.png
続いて、ページが遷移したのでCREATE TICKETをクリックします。まだ支払い方法の設定をしてないので、0円のチケットを作ります。
テスト5.png
では作ったチケットを買ってみましょう。中央やや左上にあるEvent Pageをクリックしてイベントページに進みます。チケットを購入してメールが届くかチェックしましょう。
テスト6.png

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2