コンテンツにスキップ
Twin:te 勉強会 2026

2. 自分の PC で Twin:te を動かそう

最初のゴールは、手元のブラウザの http://localhost:4000 で、Twin:te が動くことです。

勉強会の環境構築などですでにやったことがある人は、動くことをもう一度確認して、後半の「何が動いているのか」から読んでください。

事前に必要なもの

  • Git と GitHub アカウント: リポジトリの clone に使います。
  • Docker Desktop(Windows) / OrbStack(macOS): コンテナをまとめて動かすためのツールです。

Twin:te を立ち上げる

まず、 以下のコマンドでTwin:te のリポジトリをクローンします。

Terminal window
$ git clone https://github.com/twin-te/twin-te.git

クローンできたら、 twin-te ディレクトリをVSCodeで開き、 twin-te/twin-te の docs/README.md「開発環境の構築方法(Docker)」 に従って作業を進めてください。

このREADMEに書かれている手順は、大まかには以下のような流れになります。

  1. Docker イメージをビルドする(docker compose build ...)
  2. 環境変数(back/.env.local)を設定する ← 共有 env が必要。下記参照
  3. DB のマイグレーションをする
  4. KdB から講義情報を取得して DB に入れる
  5. docker compose --profile docker up で立ち上げる

このページの残りは共有 env の受け取り方と、詰まりどころ集です。README を進めながら、困ったら以下を読むか、TAに聞いてください。

共有 env(環境変数)の受け取り方

README の手順3で、back/.env.local に Google OAuth の設定値(OAUTH_GOOGLE_CLIENT_ID / OAUTH_GOOGLE_CLIENT_SECRET)を書く必要があります。これは Google ログインを動かすための秘密の値で、 GitHub には書いてありません。

Twin:te チームのメンバーには、チームで共有している開発用の値を配布します。

受け取った値は秘密情報です。スクリーンショットに写したり、リポジトリにコミットしたりしないでください(.env.local は .gitignore 済みなので、指定の場所に書く限りは安全です)。

よくある詰まりどころ Q&A

Q. docker compose up したら「port is already allocated」と怒られた

A. 必要なポート(4000, 8080, 5432 など)を別のプロセスが使っています。ありがちなのは以前に起動した別プロジェクトのコンテナが同じポートを使っているなどです。docker ps で動いているコンテナを確認して docker stop <名前> するか、TAに聞いてください。

Q. 起動はしたけど、アクセスするとエラーが出る(relation … does not exist など)

A. DB のマイグレーション(README の手順4)を飛ばしていませんか?マイグレーションは「DB にテーブルの枠組みを作る」作業で、これをやらないと back がテーブルを見つけられずにエラーになります。コマンドが2行(DB_URL と TEST_DB_URL)あるのは、開発用とテスト用の2つの DB があるからです。両方実行しましょう。

Q. 動いてはいるけど、授業検索しても何も出てこない

A. KdB からの講義情報の取り込み(README の手順5)を飛ばしていませんか?テーブルは空のまま作られるので、parser でデータを取ってきて投入するまで検索結果はゼロ件になります。

Q. Google ログインができない・ログイン後に変な画面に飛ぶ

A. back/.env.local の OAuth の値が正しく設定されているか確認してください(コピペ時に前後の空白や引用符が紛れ込むのもよくあるミスです)。また、アクセスは必ず http://localhost:4000 からにしてください。別の URL からだと、認証後のコールバックURLが合わずにログインが壊れます。

動作を検証してみよう

ブラウザで http://localhost:4000 を開いて、Twin:te の画面が表示されたら成功です!Google ログインをして、授業を検索して、自分の時間割に追加してみてください。

なお本番環境( https://app.twinte.net/ )とはデータを共有していないため、同じGoogle アカウントでログインしても時間割は同期されません。あくまで手元の PC の中だけで動いています。

何が動いているのか

起動した状態で、VSCodeで次のコマンドを実行してみてください。

Terminal window
$ docker compose ps

いくつものコンテナが並んでいるはずです。主要な登場人物はこの4人です。

  • proxy (nginx): localhost:4000 で全部のリクエストを受け付ける玄関。URL のパスを見て、/api や /auth なら back に、それ以外は front に振り分けます(リバースプロキシと呼ばれます)。
  • front (Vue): ブラウザに表示される画面
  • back (Go): API サーバ。ログインや時間割の処理をする。
  • db (PostgreSQL): ユーザーや授業のデータの置き場所

「proxyが front と back に振り分けて、back が db と通信する」という構図は、このあとサーバに引っ越しても、そして本番環境でも、同じになります。

どこからでも使えるようにするには

いま動いている Twin:te は、あなたの PC の中にしかありません。PC のふたを閉じれば止まりますし、隣の人がアクセスすることもできません。

本物の Twin:te がそうであるように、24時間動き続けて、インターネットのどこからでも使えるようにするには、どこか別の場所（サーバ）で動かす必要があります。

というわけで、次はあなたのサーバを用意しに行きましょう。サーバを用意しようへ!