docker-compose.yml:
services:
backend:
build:
context: .
dockerfile: Dockerfile # Dockerfile for FastAPI app
networks:
- restonet
ports:
- "443:443" # Changed to use port 8443 for development
volumes:
- ./:/app # Volume for hot-reload during development
# environment:
# - PYTHONUNBUFFERED=1
container_name: fastapi-backend
image: fastapi-backend-img
restart: "no"
frontend:
build:
context: ./src
dockerfile: Dockerfile # Dockerfile for Vue.js app
networks:
- restonet
ports:
- "5174:5174" # Changed to match the Vite development port
volumes:
- ./src:/app # Volume for hot-reload during development
depends_on:
- backend
container_name: vue-frontend
image: vue-frontend-img
restart: "no"
networks:
restonet:
driver: bridge # Let Docker Compose create an internal network
Dockerfile:
FROM node:20
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5174
# Command to run the Vite development server
CMD npm run dev -- --port 5174 --host 0.0.0.0
输出:
2024-10-13 20:18:39
2024-10-13 20:18:39 > [email protected] dev
2024-10-13 20:18:39 > vite --port 5174 --host 0.0.0.0
2024-10-13 20:18:39
2024-10-13 20:18:39 /app/node_modules/rollup/dist/native.js:59
2024-10-13 20:18:39 throw new Error(
2024-10-13 20:18:39 ^
2024-10-13 20:18:39
2024-10-13 20:18:39 Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
2024-10-13 20:18:39 at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:59:9)
2024-10-13 20:18:39 at Object.<anonymous> (/app/node_modules/rollup/dist/native.js:68:76)
2024-10-13 20:18:39 ... 3 lines matching cause stack trace ...
2024-10-13 20:18:39 at Module._load (node:internal/modules/cjs/loader:1104:12)
2024-10-13 20:18:39 at cjsLoader (node:internal/modules/esm/translators:346:17)
2024-10-13 20:18:39 at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
2024-10-13 20:18:39 at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
2024-10-13 20:18:39 at async ModuleLoader.import (node:internal/modules/esm/loader:473:24) {
2024-10-13 20:18:39 [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu'
2024-10-13 20:18:39 Require stack:
2024-10-13 20:18:39 - /app/node_modules/rollup/dist/native.js
2024-10-13 20:18:39 at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
2024-10-13 20:18:39 at Module._load (node:internal/modules/cjs/loader:1051:27)
2024-10-13 20:18:39 at Module.require (node:internal/modules/cjs/loader:1311:19)
2024-10-13 20:18:39 at require (node:internal/modules/helpers:179:18)
2024-10-13 20:18:39 at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:41:10)
2024-10-13 20:18:39 at Object.<anonymous> (/app/node_modules/rollup/dist/native.js:68:76)
2024-10-13 20:18:39 at Module._compile (node:internal/modules/cjs/loader:1469:14)
2024-10-13 20:18:39 at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
2024-10-13 20:18:39 at Module.load (node:internal/modules/cjs/loader:1288:32)
2024-10-13 20:18:39 at Module._load (node:internal/modules/cjs/loader:1104:12) {
2024-10-13 20:18:39 code: 'MODULE_NOT_FOUND',
2024-10-13 20:18:39 requireStack: [ '/app/node_modules/rollup/dist/native.js' ]
2024-10-13 20:18:39 }
2024-10-13 20:18:39 }
2024-10-13 20:18:39
2024-10-13 20:18:39 Node.js v20.18.0
但是,使用 docker 命令:
(.venv) PS D:\Dev\RestoR\saas-backend\src> docker build -t vue-frontend-img .
[+] Building 5.2s (10/10) FINISHED docker:desktop-linux
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 360B 0.0s
=> [internal] load metadata for docker.io/library/node:20 1.4s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 75B 0.0s
=> [1/4] FROM docker.io/library/node:20@sha256:fffa89e023a3351904c04284029105d9e2ac7020886d683775a298569591e5bb 0.0s
=> [internal] load build context 1.4s
=> => transferring context: 39.36MB 1.4s
=> CACHED [2/4] WORKDIR /app 0.0s
=> [3/4] COPY . . 0.2s
=> [4/4] RUN npm install 1.8s
=> exporting to image 0.3s
=> => exporting layers 0.2s
=> => writing image sha256:912e0d118e0caf3b9448fa60c15373b271219286c4af40080c52b2a6bccfee88 0.0s
=> => naming to docker.io/library/vue-frontend-img 0.0s
1 warning found (use --debug to expand):
- JSONArgsRecommended: JSON arguments recommended for CMD to prevent unintended behavior related to OS signals (line 16)
View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/x0ufxchcnkox43jjyqdo3eyge
(.venv) PS D:\Dev\RestoR\saas-backend\src> docker run -it --volume "./src:/app" -p "5174:5174" --restart "no" --rm vue-frontend-img /bin/bash
root@9d8b8bd6bdf8:/app# npm run dev -- --port 5174 --host 0.0.0.0
> [email protected] dev
> vite --port 5174 --host 0.0.0.0
VITE v5.4.8 ready in 282 ms
➜ Local: http://localhost:5174/
➜ Network: http://172.17.0.2:5174/
➜ press h + enter to show help
为什么会发生这种情况,以及如何使 docker-compose 工作?
对 docker-compose 文件进行一点更改解决了这个问题:
services:
backend:
build:
context: .
dockerfile: Dockerfile # Dockerfile for FastAPI app
networks:
- restonet
ports:
- "443:443" # Changed to use port 8443 for development
volumes:
- ./:/app # Volume for hot-reload during development
# environment:
# - PYTHONUNBUFFERED=1
container_name: fastapi-backend
image: fastapi-backend-img
restart: "no"
frontend:
build:
context: ./src
dockerfile: Dockerfile # Dockerfile for Vue.js app
networks:
- restonet
ports:
- "5174:5174" # Changed to match the Vite development port
volumes:
- ./src:/app # Volume for hot-reload during development
+ - /app/node_modules # Prevents overwriting node_modules with the host volume
depends_on:
- backend
container_name: vue-frontend
image: vue-frontend-img
restart: "no"
networks:
restonet:
driver: bridge # Let Docker Compose create an internal network