HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた②-1〜Lambda開発環境の準備〜

HUGOの記事をPV順で表示できるようにしてみました。その時の手順を解説します。

Ishiguro Suguru

前回の記事の続きです。

HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた①〜Google Analytics APIの利用設定〜

今回はLambdaでGoogleアナリティクスのAPIを呼び出しWebサイトのアクセス情報を集計するAPIを作成する手順を紹介します。

長くなるためまずは開発環境の準備についてです。

  1. Google Analytics APIの利用設定
  2. Lambda + API GatewayでGoogleアナリティクスの情報を取得するAPI作成
  3. HUGOでAPIを実行するパーツ作成

開発環境

開発環境は以下のとおりです。

  • macOS Catalina 10.15.6
  • aws-cli/1.16.305
  • SAM CLI, version 1.1.0
  • Docker version 19.03.12
  • Python 3.8.1
  • PyCharm

Lambdaの言語はPythonを使用しています。

また今まで使ったことはなかったのですがServerless Application Model(以下AWS SAM)を使用してAWSにデプロイしてみました。

Serverless Application Model(SAM)とは

LambdaのAPI作成の前にAWS SAMについて少し説明します。

AWS SAMはサーバレスサービスのLambda, API Gateway, Dynamo DBを構築することができるフレームワークです。

AWS SAMを使用すればローカル環境でテストしてデプロイを行うことができます。

そのため上記以外のCloudFrontなどのサービス作成を自動化したい場合はCloudFormationを利用することになります。

開発環境の準備

①AWS SAM CLIとDockerインストール

AWS SAMを利用するにあたってAWS SAM CLIのインストールが必要になります。

まずは以下のコマンドを実行してインストールしましょう。

# インストール
brew tap aws/tap
brew install aws-sam-cli
# バージョン確認
sam --version

またAWS SAMはDockerを使用してローカルにLambda実行環境を構築します。

公式サイトからダウンロードしてインストールしましょう。

Dockerは仮想マシンに似た環境をローカルに構築することができるプラットフォームです。 詳細は割愛しますが以下のサイトなどで解説されているため興味ある方は呼んでみてください。

Docker入門(第一回)~Dockerとは何か、何が良いのか~

またデバックするためには共有ドライブ設定が必要になりますがとりあえずローカルで動かすだけであれば不要です。 今回手順は省略しますが以下のサイトに詳細があるため設定してみてください。

Docker Desktop for Mac user manual > file-sharing

その他にAWS CLIも必要になります。 インストール方法は過去記事をご覧ください。

開発環境の準備(AWS CLI)

②Pythonの開発環境

PythonのIDE(統合開発環境)はPyCharmを使っています。

Pythonで開発する場合にオススメのツールでAWS Toolkitをインストールするとツール内でLambdaのテストやデプロイができます。 これからPythonで開発する方は公式サイトでダウンロードしてインストールしてみてください。(結構重たいですが…)

私はPyCharmを日本語化しています。 日本語化したい方は以下のサイトの記事を参考にしてみてください。

PyCharmインストール手順<macOS向け>

以下最初の設定手順について紹介します。

まずはPyCharm起動後に"構成"をクリックします。

“プラグイン"をクリックします。

マーケットプレイスからAWS Toolkitをダウンロードします。 検索ボックスに"AWS"と入力すると候補に出てくるためダウンロードしましょう。

ダウンロード後に新規プロジェクトを作っていきます。 PyCharm初期画面で新規プロジェクトをクリックすると新規プロジェクト作成画面に移ります。

先ほどインストールしたAWS Toolkitを入れると"AWS Serverless Application"が選択できるようになります。 ランタイムなどはそれぞれの開発環境にあわせて選んでください。

SAM Templateは他にDynamo DBも選べますが今回はLambdaとAPI Gatewayを使用するためこのままで進めます

私はPythonのバージョン管理にpyenvを使用していました。 そのためpyenvで使用しているPythonのパスをベース・インタープリターのパスに設定しています。

pyenvのパスは/Users/<ユーザー名>/.pyenv/versions/3.8.1/bin/pythonになります。

新規プロジェクトを作成すると以下のポップアップが表示されます。

新規作成時にサンプルファイルなしで空のまま作るか聞かれているため”いいえ”を選択します。

しばらくするとプロジェクトが作成されます。 以下のようにサンプル用のフォルダやファイル"events, hello_world, tests, template.yaml"が含まれた状態になっています。

このサンプルプログラムはLambdaで”hellow world”を出力する単純なものです。 はじめて動かす方はこの段階でテストしてみるとよいです。

新規プロジェクトを作成した状態ではLambdaプログラムを配置するフォルダ名が”hello_world”になっています。

このフォルダ名を変更する場合は”フォルダを右クリック>リファクタリング>名前変更”をクリックします。

変更後の名前を入力して”リファクタリング”をクリックします。 ここでは"src"としています。

プロジェクト内で変更した場合に影響のあるファイルが表示されます。 “リファクタリング実行"をクリックするとまとめて変更されます。

次にAWS接続設定を行います。 PyCharm(AWS SAM)からAWSに接続してテストしたりデプロイするために必要になります。

少しわかりづらいですがPyCharmの一番下のほうに接続設定を行う箇所があります。 以下の画像は設定済みのものになりますが利用するAWSのリージョンとプロファイルを指定します。

プロファイルはAWS CLIでプロファイル設定しているものが候補で出てきます。

※プロファイルはaws configureコマンドで設定している情報です。

長くなりましたが以上でPyCharmの初期設定は完了です。

Python用Google APIクライアントライブラリのインストール

ようやくGoogle Analytics APIの開発入ります。 まずはGoogle Analytics APIを使用するためのPythonライブラリをインストールしましょう。

使用するライブラリは以下のとおりです。

  • google-api-python-client(v1.10.0)
  • oauth2client(v4.1.3)

これらのライブラリを利用するためrequirements.txtに以下のように記述しておきましょう。

※ファイルは先ほど"hello_world -> src"に変更したフォルダにあります

  • requirements.txt
requests
google-api-python-client==1.10.0
oauth2client==4.1.3

requirements.txtに必要なライブラリを記述しておくとビルド時Lambda実行環境にライブラリがインストールされます。

補足:PyCharm仮想環境(venv)へのライブラリインストール方法

Lambdaのローカル環境でテストのみ実施する場合は必要ないですが、PyCharm仮想環境(venv)へのライブラリインストール方法について補足しておきます。

PyCharmで作成した仮想環境(venv)にライブラリをインストールする場合、”メニューのファイル>新規プロジェクトの設定>新規プロジェクトの設定”をクリックします。

設定画面のサイドメニュー”デフォルト・プロジェクト>Pythonインタープリター”を選択します。

現在のプロジェクトで使用しているPythonインタープリターを選択して「+」アイコンをクリックします。

検索ボックスにインストールするライブラリ名を入力して”パッケージのインストール”をクリックします。

  • google-api-python-client
  • oauth2client

インストールが完了すると設定画面で追加したライブラリが表示されます。

最後に

以上でGoogle AnalyticsのAPIを利用したプログラムを書ける状態になります。

次回はAWSのLambdaでPythonを動かしGoogle Analytics APIを操作するコードを紹介します!

comments powered by Disqus