How to run code-server behind Cloudflare and Apache (same issue than the other issue with NGINX, but with apache)

[ghost]

Hi!
Currently I have a VPS proxied by Cloudflare, with a reverse-proxy under Apache to run my various servers.
The problem is that we can't proxy code-server with Apache and Cloudflare simultaneously.
We managed to run code-server without Cloudflare, with SSL and so on, but we need to run it with Cloudflare (for security reasons and to add css on top of it).
Need help?

[ghost]

A few precisions :

• I installed code-server without docker
• I use the latest version of apache
• my domain name is in .dev, which means that it must be in HTTPS and that it's useless to do an automatic redirection (it even causes problems)
• the domain name to use is code.tomaru.dev
• the server runs on port 8000

I think it's good
All my apache config for code-server is to be thrown away, I guess it's not worth sending it here!

[code-asher]

It might make sense to post your configuration in case someone is able to see any issues with it.

It could also help to try running something that's not code-server (for example if you have Python installed you could run a simple HTTP server with python -m http.server) just to make sure code-server isn't somehow causing an issue.

I don't have much experience with Apache and Cloudflare so I might not be any more help than this but hopefully someone with more experience can chime in.

[ghost]

Thank you for your answer!
first of all, I already have a web server running in NodeJS (https://tomaru.dev/), apache has no problem with it.
secondly, I managed to make code-server work with an old configuration but WITHOUT cloudflare (and I need it now).
Someone sent me an apache config that seemed to work but redirects me to my localhost to myself and not to the VPS localhost.
Thanks in advance!

[code-asher]

Ah, I see! On second thought it was silly of me to suggest trying another web server since the HTML/CSS/etc is being served fine, it's only the websocket portion of code-server that doesn't work, right?

I wonder if the configuration needs the connection header in addition to the upgrade header? Something like:

RewriteCond ${HTTP:Upgrade} websocket [NC]
RewriteCond ${HTTP:Connection} upgrade [NC]
RewriteRule .* "ws:/localhost:3000/$1" [P,L]
  
ProxyPass / https://localhost:3000/
ProxyPassReverse / https://localhost:3000/
ProxyRequests off

Or maybe there is something in Cloudflare related to websockets (or maybe the certificate for the code subdomain?) that needs to be configured. 🤔 Sorry I can't be of more help!

[ghost]

It seemed to work, however he redirects me to my localhost, not to the vps localhost :/

[ghost]

<VirtualHost *:80>
ServerName code.tomaru.dev
ServerAdmin webmaster@tomaru.dev

RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://localhost:8000/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://localhost:8000/$1 [P,L]

ProxyRequests off
ProxyPass / http://localhost:8000/ nocanon
ProxyPassReverse / http://localhost:8000/
</VirtualHost>

[ghost]

help ?

[ghost]

Good!
I'm determined to put ALL my virtualhosts on NGINX.
It's easier than it seems :)
So I used the solution for NGINX from the other issue, and everything works perfectly !
Thank you very much for your help :)

[code-asher]

I'm sorry we couldn't figure out Apache but I'm glad you've got it working with NGINX!!

[Dungeonseeker]

In case anyone still cannot get this working with Apache heres how I managed it.

Code Server Config

1. sudo systemctl stop code-server@root (change root to required user)
2. sudo nano ~/.config/code-server/config.yaml
3. Change bind-addr to your machines internal IP (192.168.x.x, 10,0,x,x etc) and if needed add a custom port (IP:PORT)
4. Set password
5. Save and quit
6. sudo systemctl start code-server@root (change root to required user)

Apache2 Config

1. cd /etc/apache2/sites-available/
2. sudo nano code.conf
3. Add the following

<VirtualHost *:80>
  ServerName code.domain.name.here
  RewriteEngine On
  RewriteCond %{HTTP:Upgrade} =websocket [NC]
  RewriteRule /(.*) ws://192.168.1.45:420/$1 [P,L]
  RewriteCond %{HTTP:Upgrade} !=websocket [NC]
  RewriteRule /(.*) http://192.168.1.45:420/$1 [P,L]
  ProxyRequests off
  ProxyPass / http://192.168.1.45:420/ nocanon
  ProxyPassReverse / http//192.168.1.45:420/
</VirtualHost>

4. Change ServerName to your own domain
5. Change both Rewrite rules and both ProxyPass addresses to the IP:PORT you set in code-servers config file
   *Note: edit all of these options to your required settings for the rest of this guide, I won't point it out again
6. Save and quit
7. sudo a2ensite code
8. sudo systemctl restart apache2

Now you should be able to access code from your specified sub domain.

SSL Config
Before proceeding make sure the above steps are all finished and you can access code server

1. certbot --apache
2. Choose your virtual server from the list (or hit enter to add all sub domains)
3. Choose 1 for No HTTP forwarding
4. Certbot should have auto generated the sites SSL config and enabled it
5. cd /etc/apache2/sites-enabled/
6. sudo nano code.conf
7. Replace existing data with the following (or you can delete the file and recreate a new copy)

<VirtualHost *:80>
    ServerName code.your.domain.here
    ServerAdmin webmaster@localhost
   Redirect permanent / https://code.your.domain.here
</VirtualHost>

8. Save and quit
9. sudo nano code-le-ssl.conf
10. It should look like this

<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName code.your.domain.here
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*) ws://192.168.1.45:420/$1 [P,L]
    RewriteCond %{HTTP:Upgrade} !=websocket [NC]
    RewriteRule /(.*) http://192.168.1.45:420/$1 [P,L]
    ProxyRequests off
    ProxyPass / http://192.168.1.45:420/ nocanon
    ProxyPassReverse / http//192.168.1.45:420/
    SSLCertificateFile /etc/letsencrypt/live/your.domain.here/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/your.domain.here/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

11. Save and quit
12. sudo systemctl restart apache2

Now code server should be ready on https://your.domain.com and http://your.domain.com will forward users to https.

Hope this helps (maybe add this to the install guide?)

[LeoKlaus]

Thank you very much!
For all those still having issues like I did, make sure to enable proxy_wstunnel_module in Apache.

[muammar]

Thanks for this. I am just having an Internal Server Error. No idea why. If I find the reason, I will update this comment. Note that I run code-server with docker.

Edit: I solved my problem with:

https://stackoverflow.com/a/26045183/1995261

PS. Not all heroes wear capes.

[eugenetdr]

I followed the above but when i navigated to the domain, all i see is apache's starting page. Does anyone have any ideas why?

[LeoKlaus]

I followed the above but when i navigated to the domain, all i see is apache's starting page. Does anyone have any ideas why?

Sounds like there's something wrong with your Apache config. Most likely, the ServerName in your config differs from the domain you use to connect to the server so Apache falls back to the default config. The ServerName has to be the exact same you want to use to connect to the virtual host, like "code.example.com". Don't include the protocol (http:// or https://).

[carsten-engelke]

I still got the same problem: jsut getting the default apache starting page. This is a pain...

[itsnoman]

In local all configuration working fine but on server it's throwing Internal Server Error

Following are configuration on production Virtual Host file

     <IfModule mod_ssl.c>
        <VirtualHost *:443>
           # Set this to the project's URL such as project1.cygnussolutions.com
           ServerName  laravelWebSockets.ls.codesorbit.net
          ServerAlias laravelWebSockets.ls.codesorbit.net
          ServerAdmin webmaster@codesorbit.co
         # Change the paths below to the project document root such as /var/www/$

         DocumentRoot /mnt/disk/www/laravelWebSockets.ls.codesorbit.net/public
        <Directory /mnt/disk/www/laravelWebSockets.ls.codesorbit.net/public>
           Options -Indexes +FollowSymLinks
           AllowOverride All
           Require all granted
         </Directory>

          ProxyRequests Off
         <Proxy *>
           Require all granted
           Allow from all
         </Proxy>

         SSLEngine on
         SSLProxyEngine on
        SSLProxyVerify none
        SSLProxyCheckPeerCN off
        SSLProxyCheckPeerName off
        SSLProxyCheckPeerExpire off

        <FilesMatch \.php$>
          # For Apache version 2.4.10 and above, use SetHandler to run PHP as a fastCGI process server
          SetHandler "proxy:unix:/run/php/php8.0-fpm.sock|fcgi://localhost"
        </FilesMatch>

        # Set Default Log Paths
        ErrorLog ${APACHE_LOG_DIR}supplierkeys_error.log
        CustomLog ${APACHE_LOG_DIR}/supplierkeys_access.log combined

        RewriteEngine on
        RewriteCond %{HTTP:Upgrade} =websocket [NC]
        RewriteRule .* wss://127.0.0.1:6001%{REQUEST_URI} [P]
        ProxyPass / ws://127.0.0.1:6001
        ProxyPassReverse / ws://127.0.0.1:6001
        # Some rewrite rules in this file were disabled on your HTTPS site,
        # because they have the potential to create redirection loops.

        # RewriteCond %{SERVER_NAME} =laravelWebSockets.ls.codesorbit.net
        # RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

        SSLCertificateFile /etc/letsencrypt/live/laravelwebsockets.ls.codesorbit.net/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/laravelwebsockets.ls.codesorbit.net/privkey.pem
        Include /etc/letsencrypt/options-ssl-apache.conf
     </VirtualHost>
   </IfModule>

Here is the broadcasting.php
<?php

          return [
                 'default' => env('BROADCAST_DRIVER', 'null'),

                 'connections' => [

                     'pusher' => [
                         'driver' => 'pusher',
                         'key' => env('PUSHER_APP_KEY'),
                         'secret' => env('PUSHER_APP_SECRET'),
                         'app_id' => env('PUSHER_APP_ID'),
                         'options' => [
                             'cluster' => env('PUSHER_APP_CLUSTER'),
                             'host' => '127.0.0.1',
                             'encrypted' => true,
                             'port' => 6001,
                             'scheme' => 'https',
                             'curl_options' => [
                                 CURLOPT_SSL_VERIFYHOST => 0,
                                 CURLOPT_SSL_VERIFYPEER => 0,
                             ]
                         ],
                     ],



                 ],

                 ];

Here is websockets.php

                 <?php

                     use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;

                     return [

                       'dashboard' => [
                          'port' => env('LARAVEL_WEBSOCKETS_PORT', 443),
                       ],

                       'apps' => [
                         [
                                              'id' => env('PUSHER_APP_ID'),
                                              'name' => env('APP_NAME'),
                                              'key' => env('PUSHER_APP_KEY'),
                                              'secret' => env('PUSHER_APP_SECRET'),
                                              'enable_client_messages' => true,
                                              'enable_statistics' => true,
                                              'encrypted' => true,
                                              'host' => env('WEBSOCKETS_URL') // for dashboard
                     ],
                 ],


                 'allowed_origins' => [
                     parse_url(env('APP_URL'))['host']
                 ],


                 'statistics' => [
                     'perform_dns_lookup' => true,
                 ],

                 ];

Here is bootstrap.js

                  window.Echo = new Echo({
                       broadcaster: 'pusher',
                       key: window["MIX_PUSHER_APP_KEY"], // <- from .env
                       wsHost: window["WEBSOCKETS_URL"], // <- from .env
                       wsPort: 80,
                       wssPort: 443,
                       disableStats: true, 
                       enabledTransports: ['ws', 'wss']
                     });

This is all configured on a production but it's throwing Internal Server Error, the issue seems to be a
ProxyPass / ws://127.0.0.1:6001
ProxyPassReverse / ws://127.0.0.1:6001
I have also enabled the proxy but nothing works. Any help would be great

[paulchill]

Hi Guys,

Any one able to suggest how to set up ssl / best workflow for code-server with the EC2 under a load balancer?

Our workflow is:

Each dev has his own subdomain in route 53
This points to a load balancer which has the ssl certs (force 443)
Passes these requests to the ec2 under port 80
In apache I have dev.domain.com.conf file listing on port 80 which maps the load balancer request to the public folder of that vhost below:
<VirtualHost *:80>
ServerName dev.domain.com
ServerAlias ec2-x-x-x-x.us-west-1.compute.amazonaws.com
DocumentRoot /var/www/dev/project/public
<Directory /var/www/dev/project/public/>
Options -Indexes
AllowOverride All

Each dev works by remote ssh using outdated facebook nuclide directly to the server (not via load balancer) via ip / public hostname + write their code in the own local folder in /var/www/dev/project
I'm trying to change over to code-server and the server is working on via the ip:port - http://x.x.x.x:8080/login
and still showing my output of the project with https:dev.domain.com as i didn't need to create a vhost file for it work or anything.

But this traffic for code-server is not using https / encrypted

My issues are - with this workflow - as i use the load balancer for extra security and easy SSL

What's the best way to allow them to view their code output in apache which they are currently doing by https://dev.domain.com/

if i add in this to the vhost file above:

RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.) ws://x.x.x.x:8080/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.) http://x.x.x.x:8080/$1 [P,L]
ProxyRequests off
ProxyPass / http://x.x.x.x:8080/ nocanon
ProxyPassReverse / http//x.x.x.x:8080/

https://dev.domain.com/ changes from serving the project app to the code-server login and in the code-server but in the console it still shows "Not serving HTTPS"

I am trying to allow each dev using their own sub domain to do the below on the same subdomain:

1. Log on and write code using code server with encrypted traffic / ssl through the load balancer
2. View their Apache served folder.

Any ideas?

[code-asher]

https://github.com/coder/coder handles multiple users really well so you might want to try that out.

Not serving HTTPS means code-server itself is not handling HTTPS; since you are handling it through the load balancer that makes sense but I do see the confusion. Maybe we can change the wording here.

If you have multiple users on the same system it is possible they can snoop on each other's ports. You might want to listen on a socket instead of a port, for example code-server --socket /run/user/1000/code-server.sock. I believe Apache can proxy to sockets as well as it can to ports.

You mentioned your devs are using SSH, could they use native VS Code with the remote SSH plugin instead of code-server? You would not need to set up anything else. If you need browser access though code-server makes sense.

[tobycm]

One of the cons of the remote SSH plugin is not open-source and the license to use it, you know, only on Microsoft-licensed ones.

[theGrav1ty]

nice tutorial, thanks a lot!