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

#前回のまとめ
VirtualBoxを使ってubuntu18.4OS上に、チケット販売OSSであるattendizeをインストールして使ってみました。今回は作ったサイトをWEBに公開し、支払い可能にするところまでやっていこうと思います。前回の投稿は[こちら。](https://qiita.com/hippy0722/items/12f3ca9eed8f23f595c1)

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

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

ということで、ルーター宛にきた情報をゲストPCに転送する仕組みが必要になります。ではやっていきましょう。
###ルーターの設定
私の環境ではWIMAXのポケットWifiがルーターになります。WIMAXではそれぞれの端末にグローバルIPを割り当てているわけではないので、別途***グローバルIPオプション***が必要になります。グローバルIPオプションは申し込み不要で設定を変更するだけで適用できます。月100円かかります。
設定方法はリンク先を確認してください。[WIMAXのHP](https://www.uqwimax.jp/plan/wimax/option/global_ip/)

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


次はDMZです。設定＞ファイヤーウォール設定＞DMZ設定に移動し、ゲストPCのアドレスを設定します。WEBから見える位置にゲストPCを置くイメージですね。
![ルータ２.png](https://qiita-image-store.s3.amazonaws.com/0/314078/7bb549f7-0abf-4dc3-def1-bbba02027cc0.png)

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

```linux
sudo vi /etc/nginx/nginx.conf

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

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

```

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

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

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

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

###設定確認
それでは、ちゃんと設定できたか[CMAN](https://www.cman.jp/network/support/go_access.cgi)で確認しましょう。
***ポート開放***をクリックします。
![nginx１.png](https://qiita-image-store.s3.amazonaws.com/0/314078/b52d4ff8-7b72-67c6-c1fd-fd5f6fa6af7c.png)
■チェックポート番号：80
***Portチェック実行***をクリック

次のように表示されれば設定は完了です。エラーになる場合はWindowsファイヤーウォールでポート80を許可をしてみてください。参考[PC設定のカルマ](https://pc-karuma.net/windows-10-firewall-open-port/)

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

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


#https化（SSL暗号化方式の導入）
###証明書の取得
httpsにするためには、証明書を取得する必要があります。今回は無料のSSL/TLSサーバ証明書認証局[Let's Encrypt](https://letsencrypt.jp/)を使いました。

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

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

###ルータの設定
[上のルータの設定](https://qiita.com/drafts/c4c73d82841e2211caab/edit#%E3%83%AB%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A)のポートマッピングの設定を次のように変更する。
■WANポート：443
■LANポート：443

###設定の確認
ちゃんと設定できたか[CMAN](https://www.cman.jp/network/support/go_access.cgi)で確認しましょう。
***ポート開放***をクリックします。
■チェックポート番号：443
***Portチェック実行***をクリック

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

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

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

```
sudo certbot renew
```

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

###アカウントの登録
stripeに確認したところ、会社法人でなくとも個人で支払いを受けることができるそうなので、安心して登録してください。
登録方法は[camarade](https://hp-renew.jp/blog/business-99302753/)を参考にしましょう。

###atenndizeの設定
まずはstripeからAPIキーを入手しましょう。ログインして開発者＞APIキーを選択。
公開可能とシークレットキーの両方を控えておきます。
![stripe1.png](https://qiita-image-store.s3.amazonaws.com/0/314078/52384f67-d31b-d336-d07f-a82b6f250030.png)

次にホストPCのブラウザからゲストPCのアドレスにアクセスします。***Account settings***をクリックします。
![テスト３.png](https://qiita-image-store.s3.amazonaws.com/0/314078/5691ebcb-7322-891d-5a60-456d6a60dbec.png)

***PAYMENT***タブに設定をします。
![stripe1.png](https://qiita-image-store.s3.amazonaws.com/0/314078/68654ae5-092a-4d9a-663c-3342343ff920.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のダッシュボードの***テストデータを表示する***をクリックして、テスト用の公開可能とシークレットキーを入手してください。この場合はテスト用の[クレジットカード番号](https://stripe.com/docs/testing#cards)で購入してください。
![stripe2.png](https://qiita-image-store.s3.amazonaws.com/0/314078/6dcb5d79-3c15-ce6a-f87b-666a5c2c922d.png)

支払いができたか確認します。
stripeのダッシュボードにログインし、開発者＞イベントを表示します。
支払いが成功していれば完了です。
![stripe3.png](https://qiita-image-store.s3.amazonaws.com/0/314078/33f9d545-4d3f-f7da-e653-8f368529649e.png)

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