View on GitHub

フロントエンドのデプロイ

Home

フロントエンドのデプロイ

クライアント側

本番運用環境用 設定ファイル

src/frontend/.env.production

NEXT_PUBLIC_API_BASE_URL=https://recsys-full.recsyslab.org/api/

yarn run build のテスト

下記を実行し、エラーがないことを確認してください。

frontend$ yarn run build
yarn run v1.22.22
$ next build
▲ Next.js 16.3.3 (Turbopack)
- Environments: .env.local, .env.production
✓ Running next.config.ts took 442ms

  Creating an optimized production build ...
✓ Compiled successfully in 7.1s
✓ Finished TypeScript in 3.3s
✓ Collecting page data using 1 worker in 593ms
✓ Generating static pages using 1 worker (9/9) in 300ms
✓ Finalizing page optimization in 16ms

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ƒ /movies/[movie_id]
├ ○ /myaccount
├ ○ /mypage
├ ○ /signin
└ ○ /signup


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

Done in 14.38s.

リポジトリのプッシュ

$
 cd ~/dev/recsys-full/
 git add *
 git add .*
 git commit -m "deploy frontend"
 git push
 git status

フロントエンドサーバ側

デプロイ

  1. Vercel にログインする。
    1. Add New > Projectを開く。
    2. Import Git Repositoryからrecsys-fullのImportボタンをクリックする。
    3. 下記を設定する。
      • Vercel Team:
      • Project Name: recsys-full
      • Root Directory: src/frontend
    4. 上記のRoot Directoryを設定した後、下記が自動設定されることを確認する。
      • Application Preset: Next.js
      • 先にApplication Presetを設定すると、Root Directoryを設定した後、Application Presetが選択できなくなる不具合が発生することがある。
    5. Deployボタンをクリックする。
      • デプロイが成功すれば、プレビューが表示される。
      • 失敗した場合は、yarn run buildの実行結果を確認する。
    6. Continue to Dashboardボタンをクリックする。

プレビュー画面をクリックするか、下記 URL にアクセスしてください。

環境変数の設定

  1. Environment Variablesを開く。
    1. Add Environment Variableボタンをクリックする。
    2. .env.productionの内容を下記のとおりKey - Valueとして登録する。
      • Key: NEXT_PUBLIC_API_BASE_URL
      • Value: https://recsys-full.recsyslab.org/api/
      • Type: Config
    3. Saveボタンをクリックする。
    4. 「Added Environment Variable successfully. A new deployment is needed for changes to take effect.」というメッセージが表示されるので、Redeployボタンをクリックする。
    5. Redeployボタンをクリックする。
  2. Logsを開き、「[31m[auth][error] MissingSecret: Please define a secret. Read more at https://errors.authjs.dev#missingsecret」が出ないことを確認する。
  3. View Deploymentボタンをクリックし、デプロイが完了するまで待つ。

実行確認

下記 URL にアクセスしてください。

下記の動作をテストしてください。