
### はじめに

ブログの回遊性を上げるために検索機能を実装しようと思い立ちました。`algolia`か`elastic search`のどちらを使うか迷いましたが、[Medium の記事](https://medium.com/@matayoshi.mariano/elasticsearch-vs-algolia-96364f5567a3) を参考に、algolia を選択しました。
ざっくり、Record 数や Operation 数（API 利用など）が膨大になると予想される場合は、実装難易度が上がるが、`elastic search`の方が価格の面で良いみたいです。

今回は個人ブログ用途でレコード数はそんなに多くならないので、`algolia`を使用することにしました。

### 実装

[algolia サイト](https://www.algolia.com/users/sign_up)でユーザー登録をしたのち、ダッシュボードから index を作成します。

クライアント側では、 `npm install algoliasearch` でライブラリをインストールします。
ライブラリインストール後は、index の定義を行い、search 機能を実装していきます。

```typescript
const client = algolia(
  process.env.AG_ID as string,
  process.env.AG_KEY as string
);
export const index = client.initIndex(process.env.AG_IDX as string);
```

まずは上記のように、使用する index を初期化しておきます。
コンポーネント側は以下のような実装にしました。

インクリメンタルサーチにしたければ、input の onChange で query を投げてあげれば OK です。Operation 数に制限があるようなので、今回は検索ボタンクのリックで Query を投げる仕様としました。

```tsx
const Header: React.FC = () => {
  const [searchModal, setSearchModal] = useState(false);
  const [contents, setContents] = useState([] as any);
  const [query, setQuery] = useState("");

  const search = async () => {
    const { hits } = await agIdx.search(query);

    setContents(hits);
  };

  return (
    <>
      <Wrapper>
        <LogoWrapper>
          <Link href="/">ロゴ考えてます</Link>
        </LogoWrapper>
        <SearchIconWrapper>
          <Image
            src="/icons/search.png"
            onClick={() => setSearchModal(!searchModal)}
            width={30}
            height={30}
            alt=""
          />
        </SearchIconWrapper>
      </Wrapper>
      {searchModal ? (
        <ModalOverlay onClick={() => setSearchModal(!searchModal)}>
          <SearchModal onClick={(e) => e.stopPropagation()}>
            <Input
              type="text"
              onKeyPress={(event) => {
                if (event.key === "Enter") {
                  event.preventDefault();
                  search();
                }
              }}
              onChange={(event) => setQuery(event?.target.value)}
            />
            <button onClick={() => search()}>検索する</button>
            <SearchResultBox>
              {contents.length > 0 ? (
                contents.map((c: any, i: number) => (
                  <SearchResult key={i}>
                    <Link
                      href={`/articles/${encodeURIComponent(c.slug)}`}
                      passHref
                    >
                      <a onClick={() => setSearchModal(false)}>
                        {i + 1}.{c.title}
                      </a>
                    </Link>
                  </SearchResult>
                ))
              ) : (
                <SearchResultBox>検索結果がありません。</SearchResultBox>
              )}
            </SearchResultBox>
          </SearchModal>
        </ModalOverlay>
      ) : (
        ""
      )}
    </>
  );
};
```

### Record 登録

上記でサーチは実装できましたが、今後記事の追加をした時に毎回 GUI からぽちぽちレコードを追加するのは嫌なので自動化しましょう。
pages/index.tsx の `getStaticProps`で全てのブログコンテンツを取得しているので、production ビルドの時のみ、ついでにレコードも登録します。

```typescript
// create algolia index in production build
if (process.env.NODE_ENV == "production") {
  const idxObj: Array<IndexObject> = [];
  contents.forEach((c) => {
    const obj = {
      ...c.meta,
      content: c.content,
      objectID: c.meta.id,
    } as IndexObject;
    idxObj.push(obj);
  });
  await agIdx.partialUpdateObjects(idxObj);
}
```

`partialUpdateObjects`は既存の Record の部分更新を行ってくれます。ただし、ネストされたデータは更新されないようなので注意が必要です。

ネストされたデータを更新したい場合は、 `saveObjects` を使う必要があります。

> You can’t individually update nested attributes. Specifying a nested attribute treats it as a replacement of its first-level ancestor.To change nested attributes, you need to use the saveObjects method.

[algolia API docs](https://www.algolia.com/doc/api-reference/api-methods/partial-update-objects/#about-this-method)

### まとめ

以上で検索機能の実装と、レコードの自動作成が終わりました！記事を書いて、git push すれば algolia のレコード作成まで自動でやってくれます！
UI 適当ですが、このサイト右上の検索アイコンから検索機能使えるのでぜひ試してみてください。速いです！

以上お疲れ様でした。



### はじめに

Web サービスで最適化を行う際、データベースからデータをとってきて、最適化を実行しその結果をフィードバックするというような一連のサイクルを考慮する必要があります。

今回は最適化を行うにあたり、ざっと以下のような要件がありました。

1. 最適化実行のトリガーはクライアントでの操作
1. データベースとの接続（CRUD）
1. 処理時間が長いため、バックグランドでのタスク実行
1. 結果の通知
1. 非同期処理

今回はこれら要件を踏まえた上で扱いやすそうな `FastAPI` を使用することにしました。
FastAPI を用いた API の実装は別の記事にするとして、今回は構築した API の `Docker 化`から `Cloud Run` へのデプロイと `CI/CDパイプライン` までやります。

盛りだくさん！！

### Docker 化

まずはサービスを Docker 化していきます。
今回は python のパッケージ管理に pip ではなく、`poetry` を使用したのでそこが一番詰まりました。
<br>
処理の流れはシンプルです。

1. 使用する PORT を開放
1. ソースをコンテナ内にコピー
1. コンテナ内で poetry の環境構築
1. python の Path を通す
1. uvicorn サーバーを実行

以下のような Dockerfile に落ち着きました。

```dockerfile
FROM tiangolo/uvicorn-gunicorn-fastapi:python3.8

ENV PYTHONDONTWRITEBYTECODE 1
EXPOSE 8080

COPY ./src /src
COPY ./src/pyproject.toml ./src/poetry.lock*

WORKDIR /src/

RUN curl -sSL https://install.python-poetry.org | POETRY_HOME=/opt/poetry python3 - && \
  cd /usr/local/bin && \
  ln -s /opt/poetry/bin/poetry && \
  poetry config virtualenvs.create false

ARG INSTALL_DEV=false
RUN bash -c "if [ $INSTALL_DEV == 'true' ] ; then poetry install --no-root ; else poetry install --no-root --no-dev ; fi"

ARG INSTALL_JUPYTER=false
RUN bash -c "if [ $INSTALL_JUPYTER == 'true' ] ; then pip install jupyterlab ; fi"

ENV PYTHONPATH=/src



CMD [ "uvicorn", "app.main:app", "--reload","--host", "0.0.0.0", "--port", "8080"]
```

また同じディレクトリ内に、run.sh を作成し、ローカルで簡単に Docker プロセスを実行できるようにしています。
optimize_service というコンテナが local になければビルド後実行し、あればそのまま実行するというスクリプトです。

```shell
#!/bin/bash
NAME='optimize_service'
trap "docker stop $NAME" SIGINT
if [ "$(docker ps -q -a -f name=$NAME)" ];then
  echo 'run local docker container'
  docker start $NAME && docker logs -f $NAME
exit 1
else
  docker build -t $NAME .
  docker run --log-opt max-size=10m --log-opt max-file=3 --name $NAME -v ${PWD}/src/:/src -p 8008:8080 $NAME
fi
```

### デプロイ

Docker 化が終わったので、早速デプロイをしていきます。
GCP のコンテナ管理は Container Registry を拡張した`Aritifact Registry` を使用します。
ざっくり全体の流れは以下です。

1. gcp で使用するサービスの開放（今回は Artifact Registry と Cloud Run です）
1. サービスの IAM で必要な権限を持ったユーザーを作成する
1. 作成したアカウントの service-account.json をダウンロード
1. 作成したアカウントを認証する
1. build して Artifact Registry へプッシュ
1. Artifact Registry から Cloud Run へ Deploy
   gccloud build を使って、ローカルのイメージを Aritifact Registry 上に配置します。その後、gccloud deploy で Artifact Registry 上のイメージを Cloud Run にデプロイします。

1,2,3 は GCP の管理画面をぽちぽちします。そのほかは `gcloud`コマンドを使います。具体的なコマンドは下記 gitlab CI のスクリプトを参考にしてみてください。
ここまでやってしまえば、あとはローカルで実行したコマンドをベースに CI/CD のためのスクリプトを書けば OK です。

### gitlab CI を使って、自動デプロイ設定

下記のような ci スクリプトを作成しました。やっていることは各種環境変数の設定と上記ローカルでデプロイした一つ一つの処理の記述です。

```yaml
image: google/cloud-sdk

stages:
  - deploy

deploy-prot:
  stage: deploy
  services:
    - name: docker:19.03.8-dind
  variables:
    DOCKER_HOST: tcp://docker:2375
    DOCKER_TLS_CERTDIR: ""
  environment:
    name: prot
  only:
    - develop
  script:
    - echo GMAP_KEY=$GMAP_KEY > .env
    - echo SLACK_URL=$DEV_SLACK_URL >> .env
    - echo CLIENT_URL=$DEV_CLIENT_URL >> .env
    - echo $DEV_SERVICE_ACCOUNT > service-account.json
    - cp service-account.json src
    - cp .env src
    - gcloud auth activate-service-account --key-file service-account.json
    - gcloud config set project $PROJECT_NAME
    - gcloud auth configure-docker $REGION_URL
    - docker build -t $IMAGE_PATH .
    - docker push $IMAGE_PATH
    - gcloud run deploy $CLOUD_RUN_SERVICE_NAME --image $IMAGE_PATH --region $REGION --allow-unauthenticated --timeout 3000s --memory 4Gi --cpu 4
```

必要に応じて、ブランチによる環境切り替えやテストの実行などを記述すれば、それなりの CI/CD パイプラインが組めてしまいます！

[参考になった qiita 記事](https://qiita.com/wqwq/items/d50792a826499a7db861)

### まとめ

トライ＆エラーをたくさんしましたが、CI スクリプトは一度書いてしまえば開発体験はめちゃめちゃ上がるので早めに書いておいた方がいいですね！
また Serverless といえば、AWS Lambda や Cloud Functions ばかり使ってましたが、最適化のような処理時間がネックになるようなケースでは Cloud Run という選択肢はとても良い気がします。
以上、お疲れ様でした！


【技術】NextjsのブログにAlogliaを導入する

【技術】Fast APIをDockerコンテナ化しCloudrunに継続的デプロイする

カテゴリー

アーカイブ

たつまる