へっぽこが1週間でwebサービスを開発する #2 ドメインサーチ


ドメインサーチ

ドメインサーチは以下の機能を提供するサービスです。
ドメインサーチ

  • tld検索:対象のtldの提供有無と価格を検索できます。
  • キーワード検索:対象ドメインが任意のキーワードでのランキングを検索できます。
  • WHOIS検索:対象ドメインのWHOISドメインを検索できます。
  • DNSレコード検索:対象ドメインのDNSレコードを検索できます。
  • ドメイン年齢:対象ドメインの運用期間を検索できます。

僕のスペック

・へっぽこエンジニア
・開発歴:3年
・個人開発歴:10ヶ月目(2020.01に今年は個人開発をやる!と決めた。)
・開発言語:python
・今回の開発でようやくvueを使ってみました!!
・ノーコーディングに割と興味がでてきたり。

開発経緯

今回も前回同様、だらさんのweb1weekにて開発しました。

始まる直前にUdemyでVue講座のお勉強をしていたので早速Vueに挑戦するぞ!って事でVue CLIで開発しました。

なんか、NuxtJsが今のVue開発の主流的な記事(Nuxtで始めろ的な記事)をどっかで目にしていたのですが、今回は初めてなので、大人しくVue CLIで開発!

vue自体もそうですが何よりVue CLIすご!って思いました。

使用技術

  • 言語:Vue
  • フレームワーク:Vue CLI
  • デザイン:Vutify (これまたすご!って思いました。)
  • デプロイ環境:netlify (これもまた すご!すご!って思いました。)
  • バックエンド:lambda (AWS)

今回は特にすご!便利!って思いながら開発できたので楽しかったです!!

あと、今回はバックエンドで各サイトのドメイン価格等を取得するためにpythonでスクレイピングしてます。

そのバックエンド処理をlambdaに置いています。
AWSのlambdaは今回初めて使いましたがこれも、すご!って思いました!

本番環境


今回はNetlifyを初めて利用しました。
カスタムドメインまで無料で設定できるのでありがたいサービスです。

Lambda

Lambdaも今回初めて利用しました。
サーバレス構成のアプリケーションにはとても相性の良いサービスでした。

似たようなサービスでGoogleのCloudFunctionsを当初、利用しようとしていましたが、後述するchromedriverの参照がどうしてもうまくいかず諦めました。

Lambdaはpythonを利用していましたが、Lambdaでpythonのモジュールを参照するためにはレイヤーと呼ばれる箇所に対象のモジュールファイルをアップロードする必要があります。

レイヤーへのモジュールアップロード

今回はseleniumのモジュールをレイヤーにアップロードする方法を記載します。

 mkdir python #まずはルートフォルダpythonを作成します。
 cd python
 pip install selenium -t #カレントディレクトリにseleniumモジュールをダウンロード
 cd ../
 zip -r selenium.zip ./* #最後にpythonフォルダごとzip化

上記で作成したzipファイルをレイヤーにアップロードすることでseleniumをLambdaから参照できるようになり、importで読み込むことができるようになります。

モジュールファイルだけでなく、ドライバ等のpythonファイル以外でも同様の方法で参照することができますが、lambdaを利用するのであれば、他のファイルはS3に置いて参照する方がスマートかとおもいます。

私自身も、今回スクレイピングで必要になったchromedriverはS3に置いてそれを参照させています。

その他

動的にタイトルやdescriptionを変更する

今回、VueCLIを使っており、意図せず、SPA(シングルページアプリケーション)になりました。。
VueRouterを利用して、擬似的に複数ページになるような構成にしたものの、どうやって、タイトル等を変更するんだろう。。ってところに躓きました。

以下のサイトを参考にすることで見事、動的にタイトル等を変更することができるようになりました!!
参考ページ

ドメインサーチ