diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..da592f8
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+dist
diff --git a/.gitignore b/.gitignore
index fd4f2b0..da592f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 .DS_Store
+dist
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..460b928
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+ARG VUE_APP_API_URL
+RUN pnpm run build
+ 
+FROM base AS app
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/dist /app/dist
+RUN pnpm install -g serve
+EXPOSE 3000
+EXPOSE 3001
+CMD [ "serve", "-s", "dist" ]
diff --git a/src/config.js b/src/config.js
index 3489b33..53492b2 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,4 @@
 export const CONFIG = {
-  // api_url: "http://localhost:3000",
-  api_url: "http://178.128.18.156:3000",
-
+  // api_url: "http://178.128.18.156:3000",
+  api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
 };
diff --git a/src/router/index.js b/src/router/index.js
index 644f220..6c22073 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import CheckSurvey from "@/views/CheckSurvey.vue";
 import QuestionList from "@/views/QuestionList.vue";
 import RegisterForm from "@/views/RegisterForm.vue";
 import SearchUser from "@/views/SearchUser.vue";
+import UploadImage from "@/views/UploadImage.vue";
 const routes = [
   {
     path: "/",
@@ -26,6 +27,10 @@ const routes = [
     path: "/search",
     component: SearchUser,
   },
+  {
+    path: "/upload",
+    component: UploadImage,
+  },
 ];
 
 const router = createRouter({
@@ -33,4 +38,5 @@ const router = createRouter({
   routes,
 });
 
-export default router;
\ No newline at end of file
+export default router;
+
diff --git a/src/utils/fileUpload.js b/src/utils/fileUpload.js
new file mode 100644
index 0000000..7cf36cd
--- /dev/null
+++ b/src/utils/fileUpload.js
@@ -0,0 +1,8 @@
+export function createFormData(request, file) {
+  const formData = new FormData();
+  Object.entries(request.formData).forEach(([key, value]) => {
+    formData.append(key, value);
+  });
+  formData.append("file", file, file.name);
+  return formData;
+}
diff --git a/src/utils/trpc.js b/src/utils/trpc.js
index eaac7d2..e3df304 100644
--- a/src/utils/trpc.js
+++ b/src/utils/trpc.js
@@ -5,6 +5,12 @@ export const client = createTRPCProxyClient({
   links: [
     httpBatchLink({
       url: CONFIG.api_url,
+      headers: () => {
+        let token = localStorage.getItem("token");
+        return {
+          Authorization: token ? `Bearer ${token}` : "",
+        };
+      },
     }),
   ],
 });
diff --git a/src/views/UploadImage.vue b/src/views/UploadImage.vue
new file mode 100644
index 0000000..7c870e3
--- /dev/null
+++ b/src/views/UploadImage.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input
+      type="file"
+      @change="onFileChanged($event)"
+      accept="image/*"
+      capture
+    />
+    <button @click="uploadImage()">Upload</button>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+import { createFormData } from "@/utils/fileUpload";
+export default {
+  data: () => ({
+    file: null,
+  }),
+  methods: {
+    onFileChanged(event) {
+      const file = event.target.files[0];
+      this.file = file;
+    },
+
+    async uploadImage() {
+      if (!this.file) {
+        return;
+      }
+      let request = await client.user.requestChangeImage.mutate({
+        imageName: this.file.name,
+        contentType: this.file.type,
+      });
+      let formData = createFormData(request, this.file);
+      await fetch(request.postURL, {
+        method: "POST",
+        body: formData,
+      }).then(() => {
+        client.user.confirmChangeImage.mutate();
+      });
+      console.log("done");
+    },
+  },
+};
+</script>
+<style></style>