修改Dockerfile,添加nginx.conf

Dockerfile

@@ -1,7 +1,29 @@
-# https://lipanski.com/posts/smallest-docker-image-static-website
+# 使用官方 Node.js 运行时作为父镜像
-# https://github.com/lipanski/docker-static-website
+FROM node:18-alpine AS build-stage
-FROM wcjiang/docker-static-website:latest
 
-# Copy the static website
+# 设置工作目录
-# Use the .dockerignore file to control what ends up inside the image!
+WORKDIR /app
-COPY ./dist .
+
+# 将应用的源代码复制到容器中
+COPY . .
+
+# 安装 Yarn
+RUN npm install -g yarn --force && yarn install --force && yarn build
+
+# 使用Nginx作为基础镜像
+FROM nginx:alpine as builder
+
+# 删除默认的 Nginx 网站
+RUN rm -rf /usr/share/nginx/html/*
+
+# 将本地Nginx配置文件复制到容器中
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 将Vue.js应用的构建产物复制到Nginx的默认目录
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# 暴露Nginx端口
+EXPOSE 80
+
+# 启动Nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}