Non-docker hosting

[Lowxorx]

Description

Hello, and thanks for your amazing work!

I would like to host Viewtube on an LXC container, but I can't get the application to work because of a CORS issue. Maybe you can give me a valid configuration if you have an idea?

Here is what I have done so far:

On the host :

I have configured two subdomains, one for the application and the other for the api :

• api.domain.com
• viewtube.domain.com

My Nginx reverse proxy is configured to redirect requests on the container :

• API : api.domain.com -> proxy_pass http://10.10.10.110:8066/api/;
• Front : viewtube.domain.com - > proxy_pass http://10.10.10.110:8066

On the container :

I have installed all the dependencies required by Viewtube :

• Redis
• Mongo 4.4
• Node

I set the Viewtube environment variables like this:

• VIEWTUBE_CURRENT_DOMAIN=viewtube.domain.com
• VIEWTUBE_API_URL=https://api.domain.com
• VIEWTUBE_ALLOWED_DOMAIN=https?:\/\/([a-z0-9]+[.])domain[.]com

I also had to edit the server/main.ts file because I had problems with the CSP (added my domain to the defaultSrc array) :

await server.register(FastifyHelmet, { contentSecurityPolicy: { useDefaults: true, directives: { defaultSrc: ['self', 'https://*.domain.com',https://sponsor.ajay.app,https://*.googlevideo.com], scriptSrc: ['self',https: 'unsafe-eval',https: 'unsafe-inline'], scriptSrcAttr: null } } });

I've build the application in production mode, and launched it with these commands: export BUILD_ENV=production && yarn build export NODE_ENV=production && node -r module-alias/register dist/server/main.js

When i load Viewtube at https://viewtube.domain.com, i got an error :

In devtools, I don't see any error (neither in the console nor in the network tab)

However when I click on the list of Invidious instances, I get a CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.domain.com/proxy/text?url=https://raw.githubusercontent.com/iv-org/documentation/master/Invidious-Instances.md. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://api.domain.com’).

I see that there is a difference in scheme (http - https) but I can't explain why. I hope I have made myself clear, don't hesitate to ask me for more information if needed.

[moisout]

Hi, thank you for opening this issue!

This might be a mistake on my part, can you try commenting out the following line in main.ts?

server.setGlobalPrefix('api');

[Lowxorx]

Hi, thank you for opening this issue!

This might be a mistake on my part, can you try commenting out the following line in main.ts?

server.setGlobalPrefix('api');

Thanks for your fast reply. I've tried to do this but the problem still the same (after a new build).

[moisout]

Can you reach the api directly, through api.domain.com or api.domain.com/api (for the documentation)?

[Lowxorx]

Can you reach the api directly, through api.domain.com or api.domain.com/api (for the documentation)?

With api.domain.com, no. Got a 403 Forbidden when I reach api.domain.com/api

I tried to set a new location ( /api) on the viewtube.domain.com Nginx config file. I've set VIEWTUBE_API_URL value to https://viewtube.domain.com/api/ and now I can reach the Swagger on viewtube.domain.com/api, but I got a 504 error when I go to viewtube.domain.com (idk if it help you to understand the problem)

[moisout]

So viewtube doesn't seem to work with the api not on a url with /api, that's a separate issue i will have to fix.

And the other thing is the 504. Are there any errors in the log?

[Lowxorx]

So viewtube doesn't seem to work with the api not on a url with /api, that's a separate issue i will have to fix.

And the other thing is the 504. Are there any errors in the log?

Now I've decided to reset everything. I cloned the repo and reconfigured the application via the .env file, and everything works. I leave the configuration files here as an example:

Nginx

server {
  listen 80;
  server_name viewtube.domain.com; # REPLACE HERE 

  access_log off;
  error_log off;

  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name viewtube.domain.com; # REPLACE HERE 

  ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; 

  access_log /var/log/nginx/viewtube.access.log;
  error_log /var/log/nginx/viewtube.error.log;

  proxy_redirect off;

  location / {
    proxy_pass http://10.10.10.110:8066/; # REPLACE HERE
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
  }
  location /api {
    proxy_pass http://10.10.10.110:8066/api; # REPLACE HERE 
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
  }
}

Viewtube (relevant parts)

.env file :

VIEWTUBE_CURRENT_DOMAIN=viewtube.domain.com
VIEWTUBE_API_URL=https://viewtube.domain.com/api/ # The url must end with a slash
VIEWTUBE_ALLOWED_DOMAIN=https?://([a-z0-9]+[.])domain[.]com

systemd file (in case you want to run it as a daemon)

[Unit]
Description=ViewTube is an alternative YouTube frontend.
Documentation=https://github.com/ViewTube/viewtube-vue
After=network.target

[Service]
Environment=NODE_ENV=production
WorkingDirectory=/opt/viewtube-vue
ExecStart=/usr/bin/node -r module-alias/register dist/server/main.js
Restart=on-failure

[Install]
WantedBy=multi-user.target

Thank you very much @mauriceoegerli for your quick answers and your precious help, I hope this project will continue to grow!

[moisout]

Amazing! Thank you so much. Could i use your configuration files for the documentation? (With credit of course)

[Lowxorx]

course

Yes, no problem. Don't forget to specify that the Nginx configuration is for a reverse proxy.