diff --git a/Qpid-UI/Dockerfile b/Qpid-UI/Dockerfile
new file mode 100644
index 0000000..16d7a28
--- /dev/null
+++ b/Qpid-UI/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY . .
+
+RUN npm ci && npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/Qpid-UI/src/components/Likes.vue b/Qpid-UI/src/components/Likes.vue
index 0db9d06..5135140 100644
--- a/Qpid-UI/src/components/Likes.vue
+++ b/Qpid-UI/src/components/Likes.vue
@@ -1,72 +1,43 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-
-//注意：色とかはまだ何も決めていません。全部仮です。
+import { ref, computed, onMounted } from 'vue'
 
 // タブの切り替え状態を管理 ('liked' = Likeした人, 'likedBy' = Likeされた人)
 const activeTab = ref<'liked' | 'likedBy'>('liked')
 
-// Likeした人一覧のダミーデータ
-const dummyLikedUsers = [
-  { 
-    id: 1, 
-    name: 'n3', 
-    bio: '明日晴れますよ(断定）\nうにお願いします。（注文）' 
-  },
-  { 
-    id: 2, 
-    name: 'Jiro', 
-    bio: 'バックエンドエンジニアです。\nGo言語が好きです。' 
-  },
-  { 
-    id: 3, 
-    name: 'Saburo', 
-    bio: 'デザイナー兼フロントエンド。\nUI/UXにこだわりがあります!' 
-  },
-  { 
-    id: 4, 
-    name: 'Shiro', 
-    bio: 'AIに興味があります。\nよろしくお願いします。' 
-  },
-  { 
-    id: 5, 
-    name: 'Goro', 
-    bio: 'これは自己紹介文のサンプルです、パイソンはいいぞよりも長くこのままだとタブ一覧からはみ出すかもしれないので、先ほどのCSSでしっかり「...」になるかテストするための長い文章です。' 
-  },
-  { 
-    id: 6, 
-    name: 'Rokuro', 
-    bio: 'プログラミング初心者です！\n楽しく開発したいです。' 
-  }
-]
-
-// Likeされた人一覧のダミーデータ（こちらも4人に設定）
-const dummyLikedByUsers = [
-  { 
-    id: 101, 
-    name: 'Hanako', 
-    bio: 'React派ですがVueも触ってみてます!\n仲良くしてください。' 
-  },
-  { 
-    id: 102, 
-    name: 'Keiko', 
-    bio: '趣味はカフェ巡りです。\n休日はもくもく会によく行きます。' 
-  },
-  { 
-    id: 103, 
-    name: 'Mari', 
-    bio: 'TypeScript最高!\n型がないと不安になります。' 
-  },
-  { 
-    id: 104, 
-    name: 'Yumi', 
-    bio: 'インフラエンジニア。\nAWSメインで触ってます。' 
+// バックエンドの UserSummary 型の定義
+interface UserSummary {
+  username: string
+  displayName?: string
+  bio?: string
+}
+
+// 本物のデータを入れるための空っぽの箱
+const likedUsers = ref<UserSummary[]>([])
+const likedByUsers = ref<UserSummary[]>([])
+
+// 画面が開いた瞬間に、ブラウザ標準の機能（fetch）でバックエンドからデータを取ってくる
+onMounted(async () => {
+  try {
+    // 1. LIKEした人をバックエンドから取得
+    const resLikes = await fetch('http://localhost:8080/api/me/likes')
+    if (resLikes.ok) {
+      likedUsers.value = await resLikes.json()
+    }
+
+    // 2. 自分をLIKEした人をバックエンドから取得
+    const resLikedBy = await fetch('http://localhost:8080/api/me/liked-by')
+    if (resLikedBy.ok) {
+      likedByUsers.value = await resLikedBy.json()
+    }
+
+  } catch (error) {
+    console.error('APIの取得に失敗しました。サーバーが起動していないか、ログインしていない可能性があります:', error)
   }
-]
+})
 
 // 現在選択されているタブに応じて、表示する配列を切り替える
 const displayUsers = computed(() => {
-  return activeTab.value === 'liked' ? dummyLikedUsers : dummyLikedByUsers
+  return activeTab.value === 'liked' ? likedUsers.value : likedByUsers.value
 })
 </script>
 
@@ -89,11 +60,15 @@ const displayUsers = computed(() => {
       </button>
     </div>
 
-    <div class="cards-grid">
-      <div v-for="user in displayUsers" :key="user.id" class="card">
+    <div v-if="displayUsers.length === 0" class="no-users">
+      まだユーザーがいません。
+    </div>
+
+    <div v-else class="cards-grid">
+      <div v-for="user in displayUsers" :key="user.username" class="card">
         <div class="icon-placeholder"></div>
-        <p class="user-name">{{ user.name }}</p>
-        <p class="user-bio">{{ user.bio }}</p>
+        <p class="user-name">{{ user.displayName || user.username }}</p>
+        <p class="user-bio">{{ user.bio || '自己紹介文はまだありません。' }}</p>
       </div>
     </div>
   </div>
@@ -102,12 +77,20 @@ const displayUsers = computed(() => {
 <style scoped>
 /* ページ全体を画面の横幅いっぱいまで広げる */
 .likes-page {
-  padding: 40px 5%; /* 左右に少し余白を取りつつ、画面幅いっぱいに広げる */
-  max-width: 100%; /* ★ここを100%にすることで右端まで伸びます */
+  padding: 40px 5%;
+  max-width: 100%;
   margin: 0 auto;
 }
 
-/* タブのスタイル（変更なし） */
+/* データがないときのメッセージ */
+.no-users {
+  font-size: 1.5rem;
+  color: #777;
+  text-align: center;
+  margin-top: 50px;
+}
+
+/* タブのスタイル */
 .tab-container {
   display: flex;
   margin-bottom: 40px;
@@ -138,8 +121,8 @@ const displayUsers = computed(() => {
 /* 4列で画面いっぱいに均等に広がるようにする */
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* 画面幅をきっちり4等分して広げる */
-  gap: 40px; /* カード同士の間隔 */
+  grid-template-columns: repeat(4, 1fr);
+  gap: 40px;
 }
 
 /* カードの比率を維持したまま拡大 */
@@ -147,37 +130,35 @@ const displayUsers = computed(() => {
   background-color: #f0f0f0;
   border: 1px solid #aaa;
   border-radius: 20px;
-  padding: 10%; /* ★固定のpxではなく%にすることで、カード拡大に合わせて内側の余白も広がる */
+  padding: 10%;
   display: flex;
   flex-direction: column;
-  aspect-ratio: 2 / 3; /* ★ここで縦横の比率を固定（横2：縦3） */
+  aspect-ratio: 2 / 3;
 }
 
 /* アイコンの比率も維持 */
 .icon-placeholder {
-  width: 50%; /* ★カード幅の50%の大きさに設定 */
-  aspect-ratio: 1 / 1; /* ★常に正方形を維持する */
+  width: 50%;
+  aspect-ratio: 1 / 1;
   border: 1px solid #555;
   background-color: #fff;
   margin-bottom: 20px;
 }
 
 .user-name {
-  font-size: 1.8rem; /* カードが大きくなるのに合わせて文字も少し大きく */
+  font-size: 1.8rem;
   margin: 0 0 15px 0;
   color: #333;
 }
 
 .user-bio {
-  font-size: 1.3rem; /* こちらも少し大きく */
+  font-size: 1.3rem;
   white-space: pre-wrap;
   margin: 0;
   color: #555;
   line-height: 1.6;
-  
-  /* 紹介文が省略のための設定 */
   display: -webkit-box;
-  -webkit-line-clamp: 4; /* カードが縦に長くなった分、4行まで表示させる */
+  -webkit-line-clamp: 4;
   line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
diff --git a/Qpid/env/env.go b/Qpid/env/env.go
new file mode 100644
index 0000000..7f3b9ff
--- /dev/null
+++ b/Qpid/env/env.go
@@ -0,0 +1,33 @@
+package env
+
+import (
+	"cmp"
+	"os"
+)
+
+type Env struct {
+	Environment string
+}
+
+const (
+	EnvironmentLocal      = "local"
+	EnvironmentProduction = "production"
+)
+
+func (e *Env) IsLocal() bool {
+	return e.Environment == EnvironmentLocal
+}
+
+func (e *Env) IsProduction() bool {
+	return e.Environment == EnvironmentProduction
+}
+
+func GetEnv() Env {
+	environment := cmp.Or(os.Getenv("ENVIRONMENT"), EnvironmentLocal)
+	if environment != EnvironmentLocal && environment != EnvironmentProduction {
+		environment = EnvironmentLocal
+	}
+	return Env{
+		Environment: environment,
+	}
+}
diff --git a/Qpid/go.mod b/Qpid/go.mod
index d65c2f6..b35b829 100644
--- a/Qpid/go.mod
+++ b/Qpid/go.mod
@@ -23,4 +23,5 @@ require (
 	golang.org/x/net v0.56.0 // indirect
 	golang.org/x/sys v0.46.0 // indirect
 	golang.org/x/text v0.38.0 // indirect
+	golang.org/x/time v0.15.0 // indirect
 )
diff --git a/Qpid/go.sum b/Qpid/go.sum
index eee8ab5..9665220 100644
--- a/Qpid/go.sum
+++ b/Qpid/go.sum
@@ -44,5 +44,7 @@ golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
 golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 golang.org/x/text v0.38.0 h1:sXmwo9DwP3OK9EZ7PqAdaooSGozfl/3a6/xJcbzPRhE=
 golang.org/x/text v0.38.0/go.mod h1:YXZt3QhHUKYT53r2lLKFIVi6Ao1jdzrTR/KQ09qyxF4=
+golang.org/x/time v0.15.0 h1:bbrp8t3bGUeFOx08pvsMYRTCVSMk89u4tKbNOZbp88U=
+golang.org/x/time v0.15.0/go.mod h1:Y4YMaQmXwGQZoFaVFk4YpCt4FLQMYKZe9oeV/f4MSno=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/Qpid/handler/auth.go b/Qpid/handler/auth.go
index 6bb8a60..f9e2031 100644
--- a/Qpid/handler/auth.go
+++ b/Qpid/handler/auth.go
@@ -2,22 +2,7 @@ package handler
 
 import "github.com/labstack/echo/v4"
 
-// GET /api/login
-func (h *handler) startLogin(c echo.Context) error {
-	return notImplemented(c)
-}
-
-// POST /api/login/callback
-func (h *handler) loginCallback(c echo.Context) error {
-	return notImplemented(c)
-}
-
 // POST /api/signup
 func (h *handler) signup(c echo.Context) error {
 	return notImplemented(c)
 }
-
-// POST /api/logout
-func (h *handler) logout(c echo.Context) error {
-	return notImplemented(c)
-}
diff --git a/Qpid/handler/handler.go b/Qpid/handler/handler.go
index 35579f5..2479b2e 100644
--- a/Qpid/handler/handler.go
+++ b/Qpid/handler/handler.go
@@ -6,36 +6,36 @@ import (
 
 	"github.com/gorilla/sessions"
 	"github.com/labstack/echo/v4"
-	"github.com/traP-jp/hackathon26spring_05/Qpid/domain"
+	echoMiddleware "github.com/labstack/echo/v4/middleware"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/env"
 	"github.com/traP-jp/hackathon26spring_05/Qpid/handler/middleware"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/infrastructure"
 	"github.com/traP-jp/hackathon26spring_05/Qpid/repository"
 	"github.com/traP-jp/hackathon26spring_05/Qpid/repository/mock"
 )
 
 type handler struct {
+	env        env.Env
 	repository repository.Repository
 	sessions   sessions.Store
-	// middlewares
-	loginUserRetriever domain.LoginUserRetriever
 }
 
 func Serve() {
 	e := echo.New()
 
-	// _, err := infrastructure.NewDB()
-	// if err != nil {
-	// 	e.Logger.Fatal(err)
-	// 	return
-	// }
-
+	_, err := infrastructure.NewDB()
+	if err != nil {
+		e.Logger.Fatal(err)
+		return
+	}
 	repo := mock.NewMockRepository()
 
 	h := &handler{
+		env:        env.GetEnv(),
 		repository: repo,
 		sessions: sessions.NewCookieStore([]byte(
 			cmp.Or(os.Getenv("SESSION_SECRET"), "secret"),
 		)),
-		loginUserRetriever: middleware.GetLoginUserRetriever(),
 	}
 
 	h.mapRoutes(e)
@@ -43,28 +43,29 @@ func Serve() {
 }
 
 func (h *handler) mapRoutes(e *echo.Echo) {
-	api := e.Group("/api")
+	api := e.Group("/api",
+		echoMiddleware.RequestLogger(),
+		echoMiddleware.Recover())
 	{
-		login := api.Group("/login")
-		{
-			login.GET("", h.startLogin)
-			login.POST("/callback", h.loginCallback)
-		}
 		api.POST("/signup", h.signup)
-		api.POST("/logout", h.logout)
-		me := api.Group("/me")
-		{
-			me.GET("", h.getMe)
-			me.PUT("", h.updateMe)
-			me.GET("/likes", h.listMyLikes)
-			me.POST("/likes", h.likeUser)
-			me.GET("/liked-by", h.listUsersWhoLikedMe)
-			me.POST("/nopes", h.nopeUser)
-		}
-		users := api.Group("/users")
+
+		// 認証が必要な API 群
+		authenticated := api.Group("", middleware.AuthenticationMiddleware(&h.env, h.repository))
 		{
-			users.GET("/:id", h.getUser)
+			me := authenticated.Group("/me")
+			{
+				me.GET("", h.getMe)
+				me.PUT("", h.updateMe)
+				me.GET("/likes", h.listMyLikes)
+				me.POST("/likes", h.likeUser)
+				me.GET("/liked-by", h.listUsersWhoLikedMe)
+				me.POST("/nopes", h.nopeUser)
+			}
+			users := authenticated.Group("/users")
+			{
+				users.GET("/:id", h.getUser)
+			}
+			authenticated.GET("/suggestions", h.listSuggestions)
 		}
-		api.GET("/suggestions", h.listSuggestions)
 	}
 }
diff --git a/Qpid/handler/me.go b/Qpid/handler/me.go
index b59ee51..964ad85 100644
--- a/Qpid/handler/me.go
+++ b/Qpid/handler/me.go
@@ -5,6 +5,7 @@ import (
 
 	"github.com/labstack/echo/v4"
 	"github.com/traP-jp/hackathon26spring_05/Qpid/domain"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/handler/middleware"
 )
 
 type tag struct {
@@ -25,11 +26,13 @@ type meResponse struct {
 
 // GET /api/me
 func (h *handler) getMe(c echo.Context) error {
-	if !h.loginUserRetriever.IsUserLoggedIn() {
+	loginUserRetriever := middleware.GetLoginUserRetriever(c)
+
+	if !loginUserRetriever.IsUserLoggedIn() {
 		return unauthorized(c)
 	}
 
-	username, err := h.loginUserRetriever.GetLoginUser()
+	username, err := loginUserRetriever.GetLoginUser()
 	if err != nil {
 		return c.JSON(http.StatusInternalServerError, errorResponse{Message: "failed to get login user"})
 	}
@@ -45,7 +48,7 @@ func (h *handler) getMe(c echo.Context) error {
 	return c.JSON(http.StatusOK, toMeResponse(*user))
 }
 
-func toMeResponse(user domain.User) meResponse { //FindByUsernameで取得したデータをuserをjsonにして返す用
+func toMeResponse(user domain.User) *meResponse { //FindByUsernameで取得したデータをuserをjsonにして返す用
 	tags := make(map[string]tag, len(user.Tags))
 	for name, userTag := range user.Tags {
 		tags[name] = tag{
@@ -55,7 +58,7 @@ func toMeResponse(user domain.User) meResponse { //FindByUsernameで取得した
 		}
 	}
 
-	return meResponse{
+	return &meResponse{
 		Username:     user.Username,
 		IconFileID:   user.IconFileID,
 		Major:        user.Major,
@@ -77,11 +80,13 @@ type userSummaryResponse struct {
 
 // GET /api/me/likes
 func (h *handler) listMyLikes(c echo.Context) error {
-	if !h.loginUserRetriever.IsUserLoggedIn() {
+	loginUserRetriever := middleware.GetLoginUserRetriever(c)
+
+	if !loginUserRetriever.IsUserLoggedIn() {
 		return unauthorized(c)
 	}
 
-	username, err := h.loginUserRetriever.GetLoginUser()
+	username, err := loginUserRetriever.GetLoginUser()
 	if err != nil {
 		return c.JSON(http.StatusInternalServerError, errorResponse{Message: "failed to get login user"})
 	}
@@ -99,9 +104,48 @@ func (h *handler) listMyLikes(c echo.Context) error {
 	return c.JSON(http.StatusOK, result)
 }
 
+type userActionRequest struct {
+	Username string `json:"username"`
+}
+
 // POST /api/me/likes
 func (h *handler) likeUser(c echo.Context) error {
-	return unauthorized(c)
+	loginUserRetriever := middleware.GetLoginUserRetriever(c)
+
+	if !loginUserRetriever.IsUserLoggedIn() {
+		return unauthorized(c)
+	}
+
+	username, err := loginUserRetriever.GetLoginUser()
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, errorResponse{Message: "failed to get login user"})
+	}
+
+	toUser := &userActionRequest{}
+	if err := c.Bind(toUser); err != nil {
+		return c.JSON(http.StatusBadRequest, errorResponse{Message: "invalid request body"})
+	}
+
+	if toUser.Username == "" {
+		return c.JSON(http.StatusBadRequest, errorResponse{Message: "username is required"})
+	}
+	if toUser.Username == username {
+		return c.JSON(http.StatusBadRequest, errorResponse{Message: "cannot like yourself"})
+	}
+
+	isExist, err := h.repository.Exists(toUser.Username)
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, errorResponse{Message: "failed to check user existence"})
+	}
+	if !isExist {
+		return c.JSON(http.StatusBadRequest, errorResponse{Message: "user does not exist"})
+	}
+
+	if err = h.repository.Like(username, toUser.Username); err != nil {
+		return c.JSON(http.StatusInternalServerError, errorResponse{Message: "failed to like user"})
+	}
+
+	return c.NoContent(http.StatusNoContent)
 }
 
 // GET /api/me/liked-by
diff --git a/Qpid/handler/middleware/auth.go b/Qpid/handler/middleware/auth.go
index 514256a..9b3e3ad 100644
--- a/Qpid/handler/middleware/auth.go
+++ b/Qpid/handler/middleware/auth.go
@@ -1,17 +1,66 @@
 package middleware
 
-import "github.com/traP-jp/hackathon26spring_05/Qpid/domain"
+import (
+	"github.com/labstack/echo/v4"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/domain"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/env"
+	"github.com/traP-jp/hackathon26spring_05/Qpid/repository"
+)
 
-type loginUserRetrieverImpl struct{}
+func AuthenticationMiddleware(env *env.Env, repo repository.Repository) echo.MiddlewareFunc {
+	if env == nil {
+		panic("env is nil")
+	}
+	if repo == nil {
+		panic("repo is nil")
+	}
+	return func(next echo.HandlerFunc) echo.HandlerFunc {
+		return func(c echo.Context) error {
+			if env.IsProduction() {
+				username := c.Request().Header.Get("X-Forwarded-User")
+				if username == "" {
+					return echo.ErrUnauthorized
+				}
+
+				exists, err := repo.Exists(username)
+				if err != nil {
+					return echo.ErrInternalServerError
+				}
+				if !exists {
+					return echo.ErrUnauthorized
+				}
+
+				setLoginUserRetriever(c, &loginUserRetrieverImpl{username: username})
+				return next(c)
+			}
+			// ローカル環境では常にログイン済みユーザーとして扱う
+			setLoginUserRetriever(c, &loginUserRetrieverImpl{username: "test-user"})
+			return next(c)
+		}
+	}
+}
+
+type loginUserRetrieverImpl struct {
+	username string
+}
 
 func (r *loginUserRetrieverImpl) IsUserLoggedIn() bool {
-	return true
+	return r.username != ""
 }
 
 func (r *loginUserRetrieverImpl) GetLoginUser() (string, error) {
-	return "test-user", nil
+	return r.username, nil
+}
+
+func setLoginUserRetriever(ctx echo.Context, retriever domain.LoginUserRetriever) {
+	ctx.Set("loginUserRetriever", retriever)
 }
 
-func GetLoginUserRetriever() domain.LoginUserRetriever {
+func GetLoginUserRetriever(ctx echo.Context) domain.LoginUserRetriever {
+	v := ctx.Get("loginUserRetriever")
+	if retriever, ok := v.(domain.LoginUserRetriever); ok && retriever != nil {
+		return retriever
+	}
+	// Middleware 未適用などの場合は未ログイン扱いにする
 	return &loginUserRetrieverImpl{}
 }
diff --git a/openapi.yml b/openapi.yml
index bec9b5a..1d4bbde 100644
--- a/openapi.yml
+++ b/openapi.yml
@@ -5,7 +5,7 @@ info:
 servers:
   - url: http://localhost:8080/api
 security:
-  - cookieAuth: []
+  - forwardedUserAuth: []
 tags:
   - name: auth
     description: Authentication and account lifecycle
@@ -16,40 +16,6 @@ tags:
   - name: suggestions
     description: Recommended users
 paths:
-  /login:
-    get:
-      security: []
-      tags:
-        - auth
-      summary: ログイン開始
-      operationId: startLogin
-      responses:
-        '302':
-          description: OAuth2 providerへリダイレクトする
-          headers:
-            Location:
-              description: OAuth2 authorization URL
-              schema:
-                type: string
-                format: uri
-  /login/callback:
-    post:
-      security: []
-      tags:
-        - auth
-      summary: OAuth2 コールバック
-      operationId: loginCallback
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/OAuth2CallbackRequest'
-      responses:
-        '204':
-          description: ログイン成功
-        '400':
-          $ref: '#/components/responses/BadRequest'
   /signup:
     post:
       security: []
@@ -72,16 +38,6 @@ paths:
                 $ref: '#/components/schemas/User'
         '400':
           $ref: '#/components/responses/BadRequest'
-  /logout:
-    post:
-      security: []
-      tags:
-        - auth
-      summary: ログアウト
-      operationId: logout
-      responses:
-        '204':
-          description: ログアウト成功
   /me:
     get:
       tags:
@@ -234,25 +190,12 @@ paths:
           $ref: '#/components/responses/Unauthorized'
 components:
   securitySchemes:
-    cookieAuth:
+    forwardedUserAuth:
       type: apiKey
-      in: cookie
-      name: session
-      description: 認証用セッションCookie
+      in: header
+      name: X-Forwarded-User
+      description: 認証済みユーザー名を表すリバースプロキシ由来のヘッダー
   schemas:
-    OAuth2CallbackRequest:
-      type: object
-      required:
-        - code
-        - state
-      properties:
-        code:
-          type: string
-          description: OAuth2 authorization code
-        state:
-          type: string
-          description: CSRF対策用state
-      additionalProperties: false
     SignupRequest:
       type: object
       required: