405 Method not allowed when signing in

[tcherokee]

Hello there,

I am trying to set up Swetrix on GCP compute engine. I followed the selfhosting guide, set up docker on the compute engine and got Swetrix running and everything seems to be working, I can see the Swetrix login page on my browser. The problem starts when I try and log into Swetrix. I keep getting the following error

POST https://analytics.example.com 405 method not allowed.

I am not exactly sure where the issue is coming from and I am hoping someone can point me in the right direction

[Blaumaus]

Hi @tcherokee, taking a look at this issue..

[tcherokee]

Hi Blaumaus, Thanks for looking into this for me.

[tcherokee]

Hello @Blaumaus, I was just wondering if you made any headway?

[Blaumaus]

@tcherokee still testing it, can't reproduce the error. I'll check again and let you know tomorrow

[Blaumaus]

So I tested Swetrix Selfhosted again (on a Digital Ocean droplet) - it seems to work as intended, I'm able to log in and add a site. I also checked the code - we do not send 405 Method Not Allowed anywhere on our API codebase (except for 1 unrelated endpoint), I think it might be an issue with the GCP itself

[tcherokee]

Quick question, which I am hoping might solve the issue. Do we need to update the following env variable REACT_APP_AIAPI_URL. It is not really referenced in the documentation.

So at the moment, I have the site where I want to access swetrix as the API_URL (https://analytics.example.com) and REACT_APP_AIAPI_URL is currently the default value of https://aiapi.swetrix.com/.

Just wanted to make sure that is accurate.

[Blaumaus]

Hi, sorry for a delayed reply. I don't think the AI API is related to the issue, as it's used as a traffic forecasting tool within the analytics dashboard only

[Blaumaus]

Did you manage to find a solution for that bug?

[WebKenth]

You need to set the API url correctly:

swetrix needs to be able to communicate with swetrix-api

swetrix runs in this example on localhost:8081 swetrix-api runs in this example on localhost:8080

[tcherokee]

Ok, I am definitely doing something wrong. I just tried setting it up on digital ocean and got the same 405 method error. I promise am usually good at this sort of stuff.

So here were my steps

1. Set up docker and docker compose

Update the docker compose file to this.

version: '3.9'
services:
  # This is the frontend, you can remove it if you want
  swetrix:
    image: swetrix/swetrix-fe:v2.1.0
    restart: always
    depends_on:
      - swetrix-api
    ports:
      - '80:80'
    environment:
      - API_URL=http://analytics.example.com/
      - REACT_APP_AIAPI_URL=https://aiapi.swetrix.com/
      - REACT_APP_SELFHOSTED=true

  # This is the analytics API
  swetrix-api:
    image: swetrix/swetrix-api:v2.1.2
    restart: always
    container_name: swetrix-api
    ports:
      - '8080:5005'
    environment:
      - JWT_ACCESS_TOKEN_SECRET=KoxmE8D5yXPChdHphJpzBDs24WKk4Gm9xVqsK6TPoP2zT3xqnikkbvcXVqNn
      - JWT_REFRESH_TOKEN_SECRET=X2wcdSiors2NihbJCu9w8dyYa7kspimL2K54kCFj2yojyf5qcq9cHJNdsepG
      - REDIS_HOST=redis
      - CLICKHOUSE_HOST=http://clickhouse
      - API_ORIGINS=
      - EMAIL=tcherokee@example.com
      - PASSWORD=MySuperSecurePassword
    links:
      - 'redis'
      - 'clickhouse'
    depends_on:
      - 'redis'
      - 'clickhouse'
  redis:
    image: redis:7.0.11-alpine
    restart: always
    environment:
      - REDIS_PORT=6379
      - REDIS_USER=default
      - REDIS_PASSWORD=
    # ports:
    #   - 6379:6379
  #   volumes:
  #     - '/opt/redis-volume:/data'
  clickhouse:
    image: clickhouse/clickhouse-server:23.4.2.11-alpine
    container_name: clickhouse
    environment:
      - CLICKHOUSE_DATABASE=analytics
      - CLICKHOUSE_USER=default
      - CLICKHOUSE_PORT=8123
      - CLICKHOUSE_PASSWORD=
    # ports:
    #   - 8123:8123
    restart: always
    volumes:
      - swetrix-events-data:/var/lib/clickhouse
    ulimits:
      nofile:
        soft: 262144
        hard: 262144
volumes:
  swetrix-events-data:
    driver: local

3. Run Docker Compose Up.

After these steps, when I can access the site on http://analytics.example.com/, however if I try an login I get that 405 error. I have a feeling it has something to do with the api, but I am not sure what exactly. I feel like I am missing a step.

[Blaumaus]

I'm taking a look into this, but just to clarify: is http://analytics.example.com the domain of your Swetrix frontend or backend instance?

It might be sending these requests to the React server intead of the API, as according to the config frontend it exposed on port 80, while the API is on port 8080. Have you tried replacing the API_URL with http://analytics.example.com:8080?

[tcherokee]

http://analytics.example.com is the url for the swetrix frontend. Do I need to set up a backend for swetrix and if so where do i define the url for the backend?

I will try updating the API_URL to `http://analytics.example.com:8080 and get back to you. I am also open to giving you access to the server I am hosting swetrix on if it will help with the debugging.

[tcherokee]

Ok, if I update the API_URL to http://analytics.example.com:8080, I do not get the 405 error anymore, but when I try and login, I get the following error in the console tab POST http://analytics.example.com:8080/v1/auth/login net:: ERR_CONNECTION_TIMED_OUT

[Blaumaus]

http://analytics.example.com is the url for the swetrix frontend. Do I need to set up a backend for swetrix and if so where do i define the url for the backend?

I will try updating the API_URL to `http://analytics.example.com:8080 and get back to you. I am also open to giving you access to the server I am hosting swetrix on if it will help with the debugging.

API_URL is a URL of the server which will be used on the frontend.

API and Frontend run on the same docker-compose file, but on different ports. By default API is on port 8080, frontend is on port 80.

You can set up Nginx or just expose these ports directly for it to work (this is what I did on my test Digital Ocean set up).

And you open http://analytics.example.com:8080 directly in your browser and see it it returns something? By default it should return a JSON like {"message":"Cannot GET /","error":"Not Found","statusCode":404} which means that API is accessible on that port.

[Blaumaus]

I can take a look at this, you can contact me using email at https://swetrix.com/contact

Also one more question: if you run curl localhost:8080 on your server, do you get any response at all?

[tcherokee]

Sent an email,

The command curl localhost:80080 returns a 404. This is the full error

{"statusCode":404,"message":"Cannot GET /","error":"Not Found"}

[Blaumaus]

Sent an email,

The command curl localhost:80080 returns a 404. This is the full error

{"statusCode":404,"message":"Cannot GET /","error":"Not Found"}

It means that the API is running well on that port. If you tried adding this port to the API_URL and it returned an error, are you sure this port is exposed to internet? Do you have a reverse proxy installed like nginx, or a ufw or anything like that that might interfere?

[tcherokee]

Ok, so to get it to work I had to do a couple of things.

1. Set up nginx and use the nginx config from the repo.
2. Update my docker-compose and included to port the nginx will be listening to API request on. In my case it was 8081. so my API_URL became `https://analytics.example.com:8081/
3. Opened the 8081 port on the server. otherwise you will get a connection timed out error in the network tab.

many thanks to @Blaumaus for all his help in sorting this out.