LoginSignup
1
1

More than 5 years have passed since last update.

@hippy0722(ぴろ子)

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

Posted at

前回のまとめ

VirtualBoxを使ってubuntu18.4OS上に、チケット販売OSSであるattendizeをインストールして使ってみました。今回は作ったサイトをWEBに公開し、支払い可能にするところまでやっていこうと思います。前回の投稿はこちら。

独自ドメインの取得

無料でドメインを取得できるサイトはいっぱいあるのですが、私はMyDNSを選択しました。固定IPアドレスでなくても使えるダイナミックDNSであるところ、レスポンスが早いところが気に入って使っています。
新規登録はページ上部のJOIN USから行うことができます。JOINUS
簡単なので説明は省略しますね。

ネットワーク設定

ホームページを公開するには、世界で一つだけのIPアドレスであるグローバルIPが必要になってきます。現状ホストPCとゲストPCに設定されているのはローカルIPです。ではお家の中でどこにグローバルIPが設定されているでしょう？実はルーターに設定されているんです。

ということで、ルーター宛にきた情報をゲストPCに転送する仕組みが必要になります。ではやっていきましょう。

ルーターの設定

私の環境ではWIMAXのポケットWifiがルーターになります。WIMAXではそれぞれの端末にグローバルIPを割り当てているわけではないので、別途グローバルIPオプションが必要になります。グローバルIPオプションは申し込み不要で設定を変更するだけで適用できます。月100円かかります。
設定方法はリンク先を確認してください。WIMAXのHP

ルーターの設定はポートマッピングとDMZの二種類です。
ポートマッピングの方からやっていきます。
ホストPCのブラウザのアドレスバーにルーターのIPアドレスを入力し、ログインします。機器によって設定が違うのでIPについては取扱説明書を読みましょう。
ログインしたら、設定＞ファイヤーウォール設定＞ポートマッピングを選択します。
ルータ１.png
■WANポート：80
■LANIPアドレス：ゲストPCのアドレス
■LANポート：80
■プロトコル:TCP
■ステータス：オン
※現在https化しているため、画像ではポートが443になっています。

次はDMZです。設定＞ファイヤーウォール設定＞DMZ設定に移動し、ゲストPCのアドレスを設定します。WEBから見える位置にゲストPCを置くイメージですね。
ルータ２.png

neginxの設定

独自ドメインが取得できたので、nginxの設定を変更しましょう。
ゲストPCで操作します。

sudo vi /etc/nginx/nginx.conf

server {
    listen 80;　　　　　　　　　　　　//ポートを開放するのに必要です。
    server_name {取得したドメイン};

    root /srv/attendize/public;
    index index.php;

もう一つ設定を変更しましょう。

sudo vi /etc/nginx/conf.d/default.conf

server {
    listen 80;                       //ポート開放するのに必要です。
    server_name {取得したドメイン};

    root /srv/attendize/public;
    index index.php;

設定確認

それでは、ちゃんと設定できたかCMANで確認しましょう。
ポート開放をクリックします。
nginx１.png
■チェックポート番号：80
Portチェック実行をクリック

次のように表示されれば設定は完了です。エラーになる場合はWindowsファイヤーウォールでポート80を許可をしてみてください。参考PC設定のカルマ

ホスト：{グローバルIP}
ポート：80
にアクセスできました

次にWifiの接続を切ったスマホで、ホームページを表示させてみましょう。ブラウザのアドレスバーに{独自ドメイン}を入力します。ちなみにホストPCでは、ルーターの制約のためドメインネームでホームページにアクセスすることができません。
ホームページが表示出来たら設定完了です。

https化（SSL暗号化方式の導入）

証明書の取得

httpsにするためには、証明書を取得する必要があります。今回は無料のSSL/TLSサーバ証明書認証局Let's Encryptを使いました。

証明書を生成してくれるcertbotをインストールして証明書を取得します。

sudo apt-get install letsencrypt

sudo systemctl stop nginx　　　//certbotのためにポート80をフリーにします。

sudo certbot certonly --standalone -d {取得したドメイン}
sudo systemctl start nginx     //設定が終わったらnginxを起動します。

証明書は/etc/letsencrypt/live/{取得したドメイン}に保存されます。

nginxの設定

それではnginxの設定を行いましょう。

sudo vi /etc/nginx/conf.d/default.conf


server {

    listen       443 ssl; //ポートを443に変更

    server_name {取得したドメイン};

    root /srv/attendize/public;
    index index.php;


    ssl_certificate     /etc/letsencrypt/live/{取得したドメイン}/fullchain.pem;　//証明書のパスを書く
    ssl_certificate_key /etc/letsencrypt/live/{取得したドメイン}/privkey.pem;　//証明書のパスを書く



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

ルータの設定

上のルータの設定のポートマッピングの設定を次のように変更する。
■WANポート：443
■LANポート：443

設定の確認

ちゃんと設定できたかCMANで確認しましょう。
ポート開放をクリックします。
■チェックポート番号：443
Portチェック実行をクリック

ホスト：{グローバルIP}
ポート：443
にアクセスできました

Wifiの接続を切ったスマホから{取得したドメイン}にアクセスしてみましょう。
表示ができて、アドレスがhttps://～となっていたら完了です。

証明書の期限は90日で切れるので以下のコマンドで定期的に更新しましょう。

sudo certbot renew

stripeの設定

stripeはオンライン決済サービスを提供していて、少しコードを埋め込むだけでクレジットカード払いが実装できます。attendizeではstripeとPaypalを支払方法として選択できますが、お客様が面倒な登録することなく使えるstripeを選択しました。
初期費用・月額費用が無料で手数料は決済ごとにかかる3.6%だけでいいのが魅力ですね。stripe

アカウントの登録

stripeに確認したところ、会社法人でなくとも個人で支払いを受けることができるそうなので、安心して登録してください。
登録方法はcamaradeを参考にしましょう。

atenndizeの設定

まずはstripeからAPIキーを入手しましょう。ログインして開発者＞APIキーを選択。
公開可能とシークレットキーの両方を控えておきます。
stripe1.png

次にホストPCのブラウザからゲストPCのアドレスにアクセスします。Account settingsをクリックします。
テスト３.png

PAYMENTタブに設定をします。
stripe1.png
■STRIPE SECRET KEY：シークレットキーを入力
■STRIPE PUBLISHABLE KET：公開可能を入力

実はこれだけではattendizeは動いてくれないので、ゲストPCで設定を追加します。
公開可能はこのファイルに設定します。

cd /srv/attendize/vendor/omnipay/stripe
sudo composer require stripe/stripe-php
sudo vim /srv/attendize/resources/views/Public/ViewEvent/Partials/EventCreateOrderSection.blade.php



            </div>
            <div class="help-block">
                {!! @trans("Public_ViewEvent.time", ["time"=>"<span id='countdown'></span>"]) !!}
            </div>
        </div>
        <div class="col-md-8 col-md-pull-4">
            <div class="event_order_form">
                {!! Form::open(['url' => route('postCreateOrder', ['event_id' => $event->id]), 'class' => ($order_requires_payment && @$payment_gateway->is_on_site) ? 'ajax payment-form' : 'ajax', 'data-stripe-pub-key' => isset($account_payment_gateway->config['publishableKey']) ? $account_payment_gateway->config['publishableKey'] : '{公開可能を入力}']) !!}

シークレットキーはこのファイルに設定します。

sudo vim /srv/attendize/vendor/omnipay/stripe/src/Gateway.php



    /**
     * Get the gateway parameters.
     *
     * @return array
     */
    public function getDefaultParameters()
    {
            return array(
// default ''
            'apiKey' => '{シークレットキーを入力}',
        );

確認

ここまでできたら、Wifiの接続を切ったスマホで取得したドメインにアクセスし、有料チケットを買ってみましょう。
実際に課金されるのが嫌な場合は、stripeのダッシュボードのテストデータを表示するをクリックして、テスト用の公開可能とシークレットキーを入手してください。この場合はテスト用のクレジットカード番号で購入してください。
stripe2.png

支払いができたか確認します。
stripeのダッシュボードにログインし、開発者＞イベントを表示します。
支払いが成功していれば完了です。
stripe3.png

終わりに

知識０で始めたのでかなり苦労しました。
これからチケット販売OOSを使ってみたいという方のお役に立てれば嬉しいです。
この後メールやサイトの一部を日本語化しています・・・気が向いたら投稿します。
設定で詰まったらコメントください。できるだけ返信します。

1
1
2

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
Sign upLogin
1
1