# Membuat dockerfile dan docker compose di Docker

Untuk memperbaiki Dockerfile sesuai dengan struktur proyek Anda dan memastikan bahwa frontend dan backend dikonfigurasi dengan benar, kita perlu menyesuaikan Dockerfile untuk setiap layanan.

#### Struktur Folder

```
todo-frontend/
├── public
│   └── index.html
├── src
│   ├── App.js
│   ├── index.js
│   ├── components
│   │   └── ProductList.js
├── Dockerfile
├── package.json
└── .env

todo-backend/
├── main.go
├── go.mod
├── go.sum
├── Dockerfile
└── database
    └── connection.go

docker-compose.yml
```

#### Dockerfile untuk Backend (`todo-backend/Dockerfile`)

Dockerfile untuk backend harus menggunakan image Go, bukan Node.js. Berikut adalah Dockerfile yang diperbarui untuk backend:

```dockerfile
# Dockerfile untuk Backend
FROM golang:1.16-alpine

# Set working directory
WORKDIR /app

# Copy go.mod and go.sum files
COPY go.mod go.sum ./

# Download dependencies
RUN go mod download

# Copy the source code
COPY . .

# Build the application
RUN go build -o main .

# Expose the port the application runs on
EXPOSE 3000

# Run the executable
CMD ["./main"]
```

#### Dockerfile untuk Frontend (`todo-frontend/Dockerfile`)

Dockerfile untuk frontend harus menggunakan Node.js untuk membangun aplikasi React dan kemudian Nginx untuk menyajikannya. Berikut adalah Dockerfile yang diperbarui untuk frontend:

```dockerfile
# Build stage
FROM node:14 AS build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package.json package-lock.json ./

# Install dependencies
RUN npm install

# Copy the source code
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy build output to Nginx's default public directory
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Run Nginx
CMD ["nginx", "-g", "daemon off;"]
```

#### Docker Compose File (`docker-compose.yml`)

Berikut adalah file Docker Compose yang diperbarui untuk mengatur frontend, backend, dan PostgreSQL:

```yaml
version: '3.8'

services:
  frontend:
    build:
      context: ./todo-frontend
    ports:
      - "3001:80"
    depends_on:
      - backend

  backend:
    build:
      context: ./todo-backend
    ports:
      - "3000:3000"
    environment:
      DB_HOST: db
      DB_PORT: 5432
      DB_USER: postgres
      DB_PASSWORD: root
      DB_DATABASE: marketplace
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: marketplace
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: root
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  postgres-data:
```

#### Penjelasan Konsep Dockerfile

Dockerfile adalah skrip yang berisi serangkaian perintah untuk membuat sebuah image Docker. Konsep utama dari Dockerfile meliputi:

1. **Base Image**: Setiap Dockerfile dimulai dengan sebuah base image. Misalnya, `FROM node:14 AS build` atau `FROM golang:1.16-alpine`.
2. **Working Directory**: `WORKDIR` digunakan untuk mengatur direktori kerja di dalam container.
3. **Copy Files**: `COPY` digunakan untuk menyalin file dari sistem host ke image Docker.
4. **Run Commands**: `RUN` digunakan untuk menjalankan perintah di dalam image Docker, seperti menginstal dependensi atau membangun aplikasi.
5. **Expose Ports**: `EXPOSE` digunakan untuk memberitahu Docker bahwa container mendengarkan pada port tertentu.
6. **Command**: `CMD` digunakan untuk menentukan perintah apa yang akan dijalankan saat container dimulai.

#### Sumber Referensi

* [Docker Documentation - Dockerfile reference](https://docs.docker.com/engine/reference/builder/)
* [Docker Documentation - Compose file version 3 reference](https://docs.docker.com/compose/compose-file/compose-versioning/)

Dengan Dockerfile dan Docker Compose yang diperbarui, Anda seharusnya dapat membangun dan menjalankan aplikasi frontend dan backend Anda menggunakan Docker. Pastikan untuk menjalankan `docker-compose up --build` untuk membangun kembali image Docker setelah melakukan perubahan pada Dockerfile.

{% embed url="<https://github.com/zakimaliki/fullstack-docker>" %}