我正在使用 React + vite 和 tailwindcss 创建一个 Web 应用程序。我想将其docker化。
这是我的dockerfile：
# Stage 1
FROM node:lts AS builder
WORKDIR /app
COPY . .
RUN npm i -f && npm audit fix
RUN cp .env.production .env
RUN npm run build
# Stage 2
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
# Expose port 80
EXPOSE 80
# Start Nginx
CMD ["nginx", "-g", "daemon off;"]
和我的 nginx.conf：
events{
worker_connections 1024;
}
http{
server {
listen 80;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
location ~ \.js$ {
types { application/javascript js; }
add_header Content-Type application/javascript;
}
location /api/ {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}
vite.config.js：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: ''
})
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo_white.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
</head>
<body>
<div id="root"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
当我对此进行 dockerize 时，CSS 将不会应用于网页 我检查了一下，样式表在 docker 容器上可用。这是文件结构。
我做错了什么？欢迎有关该过程任何部分的任何建议，因为这是我第一次这样做。
现在
npm run devnpm run buildnpm run preview通过添加
.csstext/css