增加前端docker配置文件 nginx.conf Dockerfile

Dockerfile

@@ -0,0 +1,20 @@
+# 第一阶段：node镜像打包
+FROM node:latest AS frontend-builder
+WORKDIR /build-app
+COPY . .
+RUN npm install
+RUN npm run build:prod
+
+# 第二阶段：nginx打包
+FROM nginx:latest
+EXPOSE 80
+WORKDIR /app
+# 替换nginx配置
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+# 将第一阶段的静态文件复制到nginx中
+RUN rm -rf /usr/share/nginx/html
+RUN mkdir /usr/share/nginx/html
+COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html
+
+# 运行
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+
+        # 新增下面这句，其他是默认nginx配置
+        # 解决部分前端框架的路由问题，在浏览器刷新报错404
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}