Access deployed app in DigitalOcean droplet

Question

I have a Rails API and React frontend app that I want to deploy in DigitalOcean.

The structure looks like this:

|- api/
|- front/
|- docker-compose.yml

So when I run docker compose up all the containers are built. My docker-compose.yml looks like this:

version: "3.8"

services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: ${POSTGRES_USER:-user}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}

  api:
    build:
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapp-api/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"
    volumes:
      - ./api:/myapp-api
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: ${RAILS_ENV:-development}
      DEVISE_JWT_SECRET_KEY: ${DEVISE_JWT_SECRET_KEY}
      GMAIL_SMTP_USER: ${GMAIL_SMTP_USER}
      GMAIL_SMTP_PASSWORD: ${GMAIL_SMTP_PASSWORD}
      APP_NAME: ${APP_NAME}
      REDIS_URL: ${REDIS_URL}
      SHOP_FRONTEND_URL: ${SHOP_FRONTEND_URL}
      API_DATABASE_PASSWORD: ${API_DATABASE_PASSWORD}
    depends_on:
      - db
      - redis

  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    command: sh -c "cd myapp-front && npm install && npm start"
    ports:
      - "3001:3000"
    volumes:
      - ./front:/usr/src/app
    environment:
      REACT_APP_API_URL: ${REACT_APP_API_URL}

  redis:
    image: redis
    command: redis-server
    ports:
      - "6379:6379"

  sidekiq:
    build:
      context: ./api/
      dockerfile: Dockerfile
    command: bundle exec sidekiq
    volumes:
      - ./api:/myapp-api
    environment:
      REDIS_URL: ${REDIS_URL}
      GMAIL_SMTP_USER: ${GMAIL_SMTP_USER}
      GMAIL_SMTP_PASSWORD: ${GMAIL_SMTP_PASSWORD}
      APP_NAME: ${APP_NAME}
      SHOP_FRONTEND_URL: ${SHOP_FRONTEND_URL}
      SHOP_API_URL: ${SHOP_API_URL}
    depends_on:
      - db
      - redis

It works great locally when accessing http://localhost:3001 in both dev and prod environment.

Now, I deployed the app in a droplet in DigitalOcean. The url would look now like this:

http://<public ipv4 of droplet>:3001

So I updated the .env file accordingly.

I also updated the firewall. It looks like this:

Status: active

To                         Action      From
--                         ------      ----
22/tcp                     LIMIT       Anywhere                  
2375/tcp                   ALLOW       Anywhere                  
2376/tcp                   ALLOW       Anywhere                  
3000/tcp                   ALLOW       Anywhere                  
80/tcp                     ALLOW       Anywhere                  
3001/tcp                   ALLOW       Anywhere                  
22/tcp (v6)                LIMIT       Anywhere (v6)             
2375/tcp (v6)              ALLOW       Anywhere (v6)             
2376/tcp (v6)              ALLOW       Anywhere (v6)             
3000/tcp (v6)              ALLOW       Anywhere (v6)             
80/tcp (v6)                ALLOW       Anywhere (v6)             
3001/tcp (v6)              ALLOW       Anywhere (v6)   

But, when I try to access it in the browser like:

http://<public ipv4 of droplet>:3001

It does not work. What am I doing wrong?

NOTE:

I can access sidekiq though:

http://<public ipv4 of droplet>:3000/sidekiq

Thank you!