Yiru@Studio

專案架構建議如下

my-website/
├── app/                     # 放 Next.js 程式碼
├── Dockerfile               # Node 應用的建置
├── docker-compose.yml       # 整合 MySQL + phpMyAdmin + app

 

 

建立 Dockerfile

在 my-website/ 根目錄下建立 Dockerfile：

# 使用 Node 環境
FROM node:18

# 設定容器內的工作目錄為你的 Next.js 應用程式根目錄
# 這邊的 /app 會對應到你主機的 C:\Yiru\Code\my-website\app
WORKDIR /app

# 1. 複製 Next.js 應用程式的 package.json 和 lockfiles
# 這些檔案位於主機的 C:\Yiru\Code\my-website\app
# 注意這裡的來源路徑是 app/，因為 Dockerfile 的上下文是 my-website/
COPY app/package*.json ./

# 2. 安裝 Next.js 應用程式的相依套件
# 這會在容器的 /app/node_modules 下安裝所有依賴，包括 @prisma/client 和所有 Query Engines
RUN npm install

# 3. 複製 Next.js 應用程式的所有程式碼和相關檔案
# 這裡會複製包括 src/、prisma/ 等所有在 C:\Yiru\Code\my-website\app 裡的內容
# 注意這裡的來源路徑也是 app/
COPY app/. .

# 4. 編譯 Next.js 專案
# 因為 WORKDIR 現在是 /app，所以 npm run build 會在正確的位置找到 package.json
RUN npm run build

# 創建用於圖片上傳的目錄並設置權限
# 假設你的上傳目錄在 /app/public/uploads/news (容器內路徑)
# 或者只是 /app/uploads/news (如果不在 public 下)
# 請根據你實際程式碼中上傳的路徑來調整
RUN mkdir -p /app/public/uploads/news && chown -R node:node /app/public/uploads && chmod -R 755 /app/public/uploads

# 開放 3000 port
EXPOSE 3000

# 啟動應用程式
CMD ["npm", "start"]

建立 docker-compose.yml

version: "3.9"
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=mysql://yiru:123456@db:3306/mywebsite
      - JWT_SECRET=${JWT_SECRET}
    depends_on:
      - db
    # 添加 Volumes 配置
    volumes:
     - ./app/public/uploads:/app/public/uploads

  db:
    image: mysql:8.0
    restart: always
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_USER: yiru
      MYSQL_PASSWORD: 123456
      MYSQL_DATABASE: mywebsite
    volumes:
      - db_data:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - "8080:80"
    environment:
      PMA_HOST: db
      PMA_USER: yiru
      PMA_PASSWORD: 123456
      PMA_ARBITRARY: 1

volumes:
  db_data:

.env 檔案內容（與 docker-compose 對應）

DATABASE_URL="mysql://yiru:123456@db:3306/mywebsite"
JWT_SECRET=隨便一串長 token

開始執行

在 my-website 根目錄中執行：

docker-compose up -d --build
 

你的 Next.js 專案 → http://localhost:3000

phpMyAdmin → http://localhost:8080

設定資料庫帳號

docker-compose exec db mysql -u root -pYOUR_PASSWORD
範例（假設你的密碼是 123456）：
docker-compose exec db mysql -u root -p123456

登入mysql後，設定權限

GRANT ALL PRIVILEGES ON *.* TO 'yiru'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

這樣 yiru 就有權限建立 shadow DB。

然後再跑：

docker-compose exec app npx prisma migrate dev

專案中的資料表成功建立於mysql

 

Yiru@Studio - 關於我 - 意如