4週間の旅：フロントエンドのアップグレードからDockerの苦闘とブレークスルーへ

アップデート（2026年）： 以下で説明しているWordPressのフロントエンドとDockerデプロイメントは、もはや過去の話です。サイトは現在Next.jsで動作しており、SydneyはSupabase pgvectorとClaudeでゼロから再構築されました。今もコーディングを続け、学び続けています。

Sydneyに聞く →

---

2024年3月のオリジナル記事は、コンテキストとして以下に保存しています。

過去4週間、記事を公開していませんでした。何があったのだろうと思われたかもしれません。怠けて学ぶのをやめたのか？まあ、ある意味では、家族や友人と一緒にとある週末に旅行に行きました。

今日の記事は短めにします。過去4週間で学んだことを共有します。でも誰が気にするの？確かに誰も気にしないかもしれないので、この記事は主に自分の進歩を記録するためであり、もう一人の読者（あなたが誰であれ :D）のためでもあります。

TL;DR：「ジャストインタイムラーニング」は本物であり、私はそれを実践しています。

フロントエンドの改善

数ヶ月前に私のサイトを訪れたことがあれば、今はサイトの見た目が異なり、よりモダンで、ナビゲートしやすくなっていることに気づくでしょう（そうだといいのですが）。Github CopilotとChatGPT4を使って、サイトのルック＆フィールの改善を手伝ってもらいました。結果は300行以上のCSSコードで、そのほとんどは自分では書き方がわかりません。こちらはその一部です：

/* Defining CSS variables for common values */
:root \{
    --main-font: 'Poppins', sans-serif; /* Main font for the website */
    --primary-color: #003366; /* Primary color for text */
    --accent-color: #4da6ff; /* Accent color for links and buttons */
    --background-color: #FAFAFA; /* Background color for the body and some elements */
    --text-color: #333333; /* Main text color */
    --hover-color: #4da6ff; /* Color for hover effects */
\}

/* Applying the main font and color to various elements */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .nav-menu, .nav-menu a, .widget-title, .page-numbers.current,
#primary-menu .menu-item a, #primary-menu .sub-menu .menu-item a, .site-title a, .primary-navigation a, .widgettitle, .simpletoc-title \{
    font-family: var(--main-font);
    color: var(--text-color);
\}

また、チャットボットページを訪問すると、「ルック＆フィール」がサイトの他の部分と統一されています。質問を入力する「ボックス」はファーストビューの上部にあり、会話ボックスは会話が進むにつれて拡大し続けます。もっと早くできていればと思います。以前そのページを訪問されたすべての方にお詫び申し上げます。

Sydneyチャットボットが新しいベクトルストアと改善されたクエリ変換を搭載

WordPressからの公開コンテンツのエクスポートからHTMLクリーンアップ、チャンキング、エンベディングの生成、ベクトルストアへの保存までの全プロセスは、数回やると驚くほど簡単で速くなります。

新しいベクトルストア（まだFAISSを使用）に切り替え、異なるチャンキング手法（今回はやや大きめのチャンクサイズとオーバーラップ）を採用しました。

ユーザーのクエリはLangchainのマルチクエリリトリーバーを使って変換されます。このリトリーバーを使ったチャットボットの回答は、以前のリトリーバーよりも包括的でニュアンスが豊かだと感じています。

# Set up vector store and llm
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.load_local("faiss_index", embeddings)
llm = ChatOpenAI(model_name="gpt-3.5-turbo-0125", temperature=0)

# Set up retriever
retriever_from_llm = MultiQueryRetriever.from_llm(
    retriever=vectorstore.as_retriever(), llm=llm
)

DockerイメージのGCP Artifactへのプッシュの苦闘が結果的に恩恵に

何か奇妙な理由で、約1ヶ月前からDockerイメージをGCP Artifactにプッシュする際にトラブルが発生するようになりました。さまざまな方法で解決を試みましたが、できませんでした。それまでの数ヶ月間は完全に問題ありませんでした。

そのため、イメージをArtifactにプッシュしないでアプリをデプロイする別の方法を考えざるを得ませんでした。そこで、GitHubのリポジトリを使ったGCP Cloud Runの継続的デプロイメントに出会いました。

同時期に、あるオンラインチュートリアルを見ていて、poetryを使っていました。何なのかわからなかったのでChatGPTに説明してもらいました。依存関係を管理する素晴らしいツールであることがわかり、今では使用しています :) この探索のおかげで、各プロジェクトごとの仮想環境のセットアップについても詳しく学び、すべてのプロジェクトで使い始めました。

新しい仮想環境のセットアップ、poetryによる依存関係の管理、GCP Cloud Runの継続的デプロイメントの活用により、ワークフローがずっとスムーズになりました。チャットボットへの新しいアップデートのデプロイも、ローカルで十分にテストした後は、ずっと簡単で速くなりました。

今何に取り組んでいるか？

現在、Langchainを使ったリサーチアシスタントの構築とデプロイに取り組んでいます。LangchainとGPT-Researcher（GPT-Researcher、両方ありがとうございます！）のオープンソースコードは十分にわかりやすく、ローカルでは動作させることができます。しかし、本番環境でのデプロイはかなり難しいことがわかりました。特にコンテンツスクレイピングの部分です。具体的には、ローカルのDockerコンテナでアプリケーションをテストすると、CPU使用率が高すぎます。

GPT-researcherとLangchainが共有したリサーチアシスタントのアプローチを改善するアイデアもいくつかありますが、それらを実現するために作業が必要です。準備ができたら、またシェアします。

あなたの感想は？

1行1行のコード、トラブルシューティングの1時間1時間、そしてすべてのブレークスルーが、踏み石となってきました。そしてこの旅は私のものですが、アイデアを刺激したり、洞察を提供したり、単純に楽しんでいただければ幸いです。あなたのテクノロジーへの挑戦で直面した課題は何ですか？以下にストーリーや質問を残してください。一緒にこのデジタルの海を航海しましょう。

よろしくお願いします、Chandler

P.S: RAGアプリケーションを構築しているなら、Langchainの「RAG from scratch」シリーズがとても役に立つと思います。