Skip to main content

Dockerize React App

Add a .dockerignore File​

  • 在根目錄增加一個.dockerignore檔
/node_modules

Add a Dockerfile​

  • 在根目錄增加一個Dockerfile檔
#Stage 1
FROM node:18-alpine
WORKDIR /xuan
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD npm start

Add a docker-compose.yml​

  • 在根目錄建立一個docker-compose.yml檔
version: "3.8"
services:
  app:
    container_name: xuan
    image: xuan
    build:
      context: .
    ports:
      3000:3000

Build Docker Image​

建立Image同時給標籤

$ docker build . -t weili0505/xuan
$ docker images

Push to Docker Hub​

  • 在Docker Hub 建立一個私人的repo
$ docker login
$ docker push weili0505/xuan