Skip to content

海外で売れているものがわかるリサーチサイト「EKKYO」を作成しました。

Last updated on 2020年3月14日

最初に

最近生活に一区切りついたことに加え、以前からプログラミング技術を生かして何か制作物を作りたいと思っていたので、年末年始のまとまった時間でEKKYOというサイトを作りました。

 

EKKYO-海外で売れるもの-

この記事では、EKKYOの説明を少しして、あとはガッツリ技術的な話をします。

あと、淡々と書いていますが、応用情報技術者程度の基礎知識があった上で、ほぼ丸1ヶ月の空き時間をすべて費やすぐらい時間と手間がかかりました(^o^;)笑

 

 

EKKYOとは?

eBayの各カテゴリのウォッチリスト数が多い順に100商品が表示されます。
カテゴリ数は2万弱あります。

ウォッチリストが多い=海外の方たちが欲しいと思っている商品なので、eBay輸出や海外に販路が欲しいメーカーの方たちのリサーチサイトとして役立つと思います。

 

 

制作ストーリー

 

アーキテクチャ

使用技術:

  • フロントエンド:JavaScript
  • バックエンド:Python3
  • サーバー:AWS各種サービス

Webアプリのデプロイは常に未知のエラーが発生する&サーバー代もかかるのでうんざりしていました。

そこで、今回はデプロイが容易でランニングコストが易そうなサーバーレス構成で制作しました。

 

各サービスの動作説明

メイン処理(赤枠内)

①アクセス

クライアントが独自ドメイン(sake481.net)にアクセス

②IP紐付け

Route53にて独自ドメインとIPアドレスの名前解決を行い、S3内のファイルにアクセス

③GET通信

S3内の静的ファイルに書かれたJavaScriptにて、API GatewayにGET通信を発生

④クエリ

カテゴリIDをキーとしてDynamoDBよりデータを取得

⑤データ表示

S3内の静的ファイルに、上記データを動的に挿入してクライアントブラウザに表示

更新処理(青枠内)

(1) 48h毎に実行

CouldWatchにて48時間毎に以下Lambda関数を実行します。

(2) データ取得

LambdaにおいたPythonスクリプトを実行。eBayAPIを通してeBayよりデータを取得

(3) 更新

取得したデータでDynamoDBのデータを更新します。

 

 

制作する上で苦労したポイントとその解決方法

 

1.そもそもAWSって何!?

そもそもAWSのサービスが膨大すぎて理解するのが大変でした。

色々調べた結果、「外部ライブラリの集合体」と理解するのが一番腑に落ちました。

 

プログラムは「自分で作ったプログラム」と「他人が作ったプログラム」を組み合わせて作ります。

サーバーやDBやルーティング機能を自前で用意しようとしたらとても大変なので、そこをAWSのサービスより拝借させてもらっています。

Pythonでいう、外部ライブラリをimportする事の、スケールが大きい版です。

ただこの理解にたどり着くまで数冊ほどAWSに関する書籍を読みました(^_^;)

 

今までもAWSの理解を深めようと何度か挑戦したのですが、その時はEC2を中心に学んでたため理解ができませんでした。

ただ今回、Lambda発信で学ぶことでAWSの全体像が理解できました。

 

2.Lambda上でeBaysdkが実行できない

ここからはガッツリAWS関連のお話です。

(念の為ことわっておくと、LambdaはAWSの1サービス名であって、PythonのLambda関数のことではありません汗

Lamdba上でeBayAPIと通信するためにeBaysdkライブラリを使う必要があったのですが、同ライブラリ内で使われているlxmlのetreeモジュールが動かず、困りました。

以下ページを参考に、eBaysdkライブラリ内のlxmlを上書きし、実行環境をPython3.6にすることで動作させることができました。

参考:
LambdaでPythonのlxmlを使うhttp://shinriyo.hateblo.jp/entry/2018/07/09/Lambda%E3%81%A7Python%E3%81%AElxml%E3%82%92%E4%BD%BF%E3%81%86

 

3.Lambda Layerとは?

Lambda Layerを腑に落とすのがちょっと難しかったです。
最終的に、外部ライブラリのグローバル化という理解で落ち着きました。
外部ライブラリをPythonという名前のフォルダにZIPでまとめ、それをレイヤーとして登録しておくことで、Lambda内の全ての関数から2-3クリックで外部ライブラリが実行できる環境が整います。

これをやらないと、関数ごとに外部ライブラリをアップロードすることになり、すごく手間がかかります(^_^;)

 

4.Gateway経由のLambdaからのレスポンスデータが表示できない

結構設定項目があって、一筋縄ではいきませんでした。

具体的には、
1.レスポンス形式を規定通りにする(Lambda)

2.CROS有効化(APIGateway)

3.レスポンスヘッダーを設定する(Lambda)

参考:
API Gateway + AWS Lambda で CORS 対応した
https://mikazuki.hatenablog.jp/entry/2018/09/22/185841

 

5.DynamoDBからのレスポンスデータ型Decimalのjson化

DynamoDBに格納しているデータがstr型かと思ったら、何やら特殊なDecimal型とかいうものらしく、それを扱いやすくjson化するのに苦労しました。

結果的に、jsonライブラリではなく、simplejsonライブラリを使用することで解決しました。

参考:
“Object of type ‘Decimal’ is not JSON serializable”が発生したときの対処法 #Python3 #AWS #dynamodb
https://www.yokoyan.net/entry/2018/06/15/181500

 

6.S3でのBootstrap静的ホスティング

パブリックアクセス許可の他に、バケットポリシーを設定しないとCSS/JSなどの外部ファイルが読み込めませんでしたので、バケットポリシーを設定。

参考:
AWS S3で静的Webページをホスティングする
https://qiita.com/dogwood008/items/a92abae789f4b0466f38

 

7.独自ドメインの利用

ここは参考サイトの手順そのままに行いました。正直、なんとなくでしか理解できていません(汗)

とりあえず大事なポイントは、以下2点だと思います。

・S3のバケット名はドメイン同名

・ドメイン購入元のネームバーサーをRoute53から発行されたものに変更

参考:
Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)
https://casualdevelopers.com/tech-tips/how-to-host-a-static-website-on-amazon-s3/#i-7

AWS S3バケットに独自ドメインを割り当てる。
https://qiita.com/kooohei/items/bdfe8ce3c3ef2af510ad

 

 

最後に

 

やってよかったこと:

  • 全て自分で作り上げたことでWebアプリの全体像がつかめた
  • S3とRoute53を利用することで気軽にWebアプリが作れることが知れた
  • JavaScriptの手軽さと便利さが知れた

今後の課題:

JavaScriptにすごい可能性を感じるので、今後はJSの習得に時間を割く!

Webアプリについて:

  • 検索フォームを設定し、キーワード検索できるようにしたい
  • Ajax通信を用いて検索キーワード候補がでるようにしたい
  • ログイン機能を設け、会員と非会員でサービスの切り替えを行いたい
  • メール配信機能を設けたい
  • SSL化 (2020/01/17完了)

ドメインはバリュードメインで取得しました。

以下サイトの手順を参考にさせていただき、迷うこと無くできました。
Amazon S3の静的サイトをAWS無料SSLとCludFrontでHTTPS化して爆速表示させる
https://blog.s0014.com/posts/2018-12-03-s3-https/

*特にバリュードメイン側での設定をいじることはありませんでした。

 

Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください