How to connect argo tunnel to the WordPress website

What I want to achieve

I want to use cloudflared daemon so that I can use cloudflare argo tunnel and connect the argo tunnel to my wordpress website so that I can protect the origin and see if there is any performance difference

What I done and why I want you to help me

I have my AWS ec2 server with nginx and cloudflare argo tunnel configured that proxies my traffic to the WordPress website through CName.

From below steps I followed, could you please tell me if it’s the optimal steps or.
Something I can improve on or the step are perfect

Let’s start, things I did

  1. deployed the ubuntu server on AWS and configured security group to use port 22,80,443

  2. SSH into the server, did the update thing. Added new user with sudo privileges and added support for him to login using SSH key

  3. Logged in using new user, following these guide from digital ocean
    How To Install Nginx on Ubuntu 20.04 | DigitalOcean
    How to Install WordPress + LEMP on Ubuntu 20.04 | DigitalOcean
    To install WordPress, nginx, MySQL, other php modules.

  4. Connected domain to my server through cloudflare dns, SSL is set to full and installed orgin certificate Using this guide

  1. Now comes the part were I will configure argo tunnel.
  2. Install cloudflared daemon and install it and logined and cert was installed by cloudflared
  3. Created a tunnel
  4. Made a config.yml file
tunnel: tunnel id
credentials-file: /home/user/.cloudflared/tunnel id.json

ingress:
  - hostname: argo .example.com
  -     service: https:// localhost:443
  - service: http_status:404
  -
  1. Made a cname record for the tunnel in cloudflare account
  2. Installed cloudflared as service and run the tunnel
  3. I changed the url from http to https in WordPress general settings and faced the redirect loop so I put this code in wp config

$_SERVER['HTTPS'] = 'on'; (not sure if this is a optimal way)

And it worked. Not sure if this is a optimal and perfect steps so please guide me and I am also confused if it should be https:// localhost:443 or
http:// localhost:443. (Will it not consume time to redirect if it’s http)

Also should I install the cloudflare Orgin certificate as in step 4 because cloudflare argo installs a cert file.

All port are closed now!!

cloudflared tunnel login downloads a cert.pem file; that file is only used for cloudflared tunnel create/route/delete/list commands (i.e., to manage/admin a tunnel)

so the conclusion is that such cert.pem is not necessary to run the tunnel (nor for any proxying to your origin); see https://developers.cloudflare.com/cloudflare-one/tutorials/mongodb-tunnel#delete-the-certpem-file for an example

2 Likes

Do I need to use this when connecting to wordpress using argo tunnel. @nuno.diegues

I’m afraid I don’t know wordpress specifics to be able to help you with that.

From cloudflared perspective, it will do what you want:

  • if you configure your service origin with http://..., then we will reach out to it without HTTPS
  • if you configure your origin with https:// (which you seem to have done in the sample config above), then we will reach to it with HTTPS and expect it to present a valid certificate that cloudflared can check (based on the system configured root certs, or to the cert provided to the service config in cloudflared YAML)

Since you have cloudflared → nginx → origin, I suppose the question you are asking is more specific to nginx + your origin, and not so much cloudflared, since cloudflared can operate as you prefer.

2 Likes

Nope I didn’t for Wordpress from my Argo Tunnel setup guide at https://blog.centminmod.com/2021/02/09/2250/how-to-setup-cloudflare-argo-tunnel-on-centos-7/. I’m running CF Argo Tunnel for my Wordpress blog at https://blog.centminmod.com/ But I think it depends on how you configured your origin and CF SSL mode i.e. Flexible vs Full SSL mode.

Indeed. Though in my guide on step 3 at https://blog.centminmod.com/2021/02/09/2250/how-to-setup-cloudflare-argo-tunnel-on-centos-7/#step-2-create-argo-tunnel I make a copy of the cert.pem and reference that as CF support did say if I wanted to in future run more than one cloudflared daemon service on CentOS or systemd system, I’d need more than one service file and this way I can point each yaml config file to a different copied cert.pem. In theory that is - I didn’t end up trying multiple cloudflared service files as I then discovered to run multiple hostnames, I just need to use ingress rules :slight_smile:

@eva2000 my SSL is full strict. My wp admin was is redirect loop and put this code in wp config and it got solved. Did you put the code?

using FULL SSL, make sure origin server isn’t doing a non-https to https redirect as that is your problem.

@eva2000 my nginx server doesn’t have 301 redirect and WordPress is fresh installation so it doesn’t have a htaccess.

But I face this issue when I changed my site url in WordPress general from http to https. Because without https some content and cloudflare plugin was not working

make sure with FULL SSL strict, you have a valid origin HTTPS certificate first + Wordpress nginx set site URL to HTTPS version of your site. If you use non-HTTPS site URL in Wordpress, Wordpress itself can do the redirect from non-HTTPS to HTTPS - you’ll see in response headers redirect by Wordpress to that effect.

If your nginx HTTPS cert isn’t valid, try FULL SLL non-strict first + Wordpress nginx set site URL to HTTPS version

One reason for not valid SSL cert on Nginx origin HTTPS side is due to recent Letsencrypt DST Root CA X3 root expiry on September 30, 2021 https://blog.centminmod.com/2021/10/02/2425/centmin-mod-managing-letsencrypt-dst-root-ca-x3-certificate-expiration-on-centos-7/. So ensure your have Nginx origin HTTPS and SSL certificate configured correctly.

Though Ubuntu 20.04 should be using OpenSSL 1.1.1 so should be able to verify the correct Letsencrypt SSL certificate chain already.

Also Wordpress bundles it’s own CA trust bundle and that hasn’t been updated to for removal of Letsencrypt DST Root CA X3 expired root cert either https://blog.centminmod.com/2021/10/02/2425/centmin-mod-managing-letsencrypt-dst-root-ca-x3-certificate-expiration-on-centos-7/#wordpress

I configured nginx to use SSL of cloudflare Orgin certificate but I get this error

@eva2000

This my cloudflare config

tunnel: 796c6fde-bae0-476f-86d6-3dfd022d6143
credentials-file: /home/cloudcreatr/.cloudflared/796c6fde-bae0-476f-86d6-3dfd022d6143.json

ingress:
  - hostname: wp.cloudcreatr.com
    service: http://localhost:443
  - hostname: wpp.cloudcreatr.com
    service: http://localhost:80
  # Catch-all rule, which just responds with 404 if traffic doesn't match any of
  # the earlier rules
  - service: http_status:404
warp-routing:
  enabled: true

This is my nginx config

server {
    listen 80;
    server_name wp.cloudcreatr.com;
    root /var/www/wp;

    index index.html index.htm index.php;
    
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate         /etc/ssl/cert.pem;
    ssl_certificate_key     /etc/ssl/key.pem;
    
    location = /favicon.ico { log_not_found off; access_log off; }
    location = /robots.txt { log_not_found off; access_log off; allow all; }
    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
        expires max;
        log_not_found off;
    }

    location / {
        #try_files $uri $uri/ =404;
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
     }

    location ~ /\.ht {
        deny all;
    }

}

And wp config

<?php

/**
 * The base configuration for WordPress
 *
 * The wp-config.php creation script uses this file during the installation.
 * You don't have to use the web site, you can copy this file to "wp-config.php"
 * and fill in the values.
 *
 * This file contains the following configurations:
 *
 * * MySQL settings
 * * Secret keys
 * * Database table prefix
 * * ABSPATH
 *
 * @link https://wordpress.org/support/article/editing-wp-config-php/
 *
 * @package WordPress
 */

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'wordpress' );

/** MySQL database username */
define( 'DB_USER', 'wordpressuser' );

/** MySQL database password */
define( 'DB_PASSWORD', 'password' );

/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

/**#@+
 * Authentication unique keys and salts.
 *
 * Change these to different unique phrases! You can generate these using
 * the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}.
 *
 * You can change these at any point in time to invalidate all existing cookies.
 * This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define('AUTH_KEY',         '|`h8RNKnR55bfcl/1so`B`</,o;Av&I$-3f<[9>u/tU!>g6$}O}~h0O{MSk9Iq^*');
define('SECURE_AUTH_KEY',  '|`L|`>s8X/U%~*Oz .OZ6h`t7nbI~nuMZ0{^w<LuR7q2&v>OXd]2;]mP-O*U8}UN');
define('LOGGED_IN_KEY',    'QUD8mZ`84Kk}jLR|y29g+-6h~Gu2`GV-m|Cnc)_InE =M*b]Q%0TrL*Y?n0zZ;{;');
define('NONCE_KEY',        'dJ?Y<Df..8Qom*)K|<vN_jVz;,4K7qP);+}TW|VYHg3C{AGa(!wj>!A<7WI|_t%;');
define('AUTH_SALT',        '$VjX;:?wDdv)XWH6>[email protected];Mw>ct|8-xAzmH`:Q5[aXUj#>]Dp<V]7');
define('SECURE_AUTH_SALT', '371~E,,X:k;t!mUfvVb8-LiK|@bq[-_WQTJ/q7]Rb:Fw3$>b<XIlj4+UF!X(2^5e');
define('LOGGED_IN_SALT',   'H-TCa9^Y^r/@[IV9O-6#Bd,nVbvwv~l`& XiRUVrb})+<N^77Nx=_Ei;7~R$R~)+');
define('NONCE_SALT',       '47Nu}8-/l_1hlPY8UOb>AGu:?%!bfa:bNFD[;~Du+s^*rd8wK`T-Q${1r&R4:H5W');
/**#@-*/

/**
 * WordPress database table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix = 'wp_';
define( 'FS_METHOD', 'direct' );

//$_SERVER['HTTPS'] = 'on';

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 *
 * For information on other constants that can be used for debugging,
 * visit the documentation.
 *
 * @link https://wordpress.org/support/article/debugging-in-wordpress/
 */
define( 'WP_DEBUG', false );

/* Add any custom values between this line and the "stop editing" line. */



/* That's all, stop editing! Happy publishing. */

/** Absolute path to the WordPress directory. */
if ( ! defined( 'ABSPATH' ) ) {
	define( 'ABSPATH', __DIR__ . '/' );
}

/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

Make sure you didn’t confuse CF Origin CA https://developers.cloudflare.com/ssl/origin-configuration/origin-ca which is what you want with CF Authenticated Origin Pull certificate configuration https://developers.cloudflare.com/ssl/origin-configuration/authenticated-origin-pull.

The Authenticated Origin Pull certificate configuration requires dashboard enabling + nginx verify CF client TLS cert setup otherwise you will get 400 bad requests. Authenticated origin pull nginx config would have

ssl_client_certificate /etc/nginx/certs/cloudflare.crt;
ssl_verify_client on;

This is not what you want as CF Authenticated Origin Pull is incompatible with Argo Tunnels - https://blog.centminmod.com/2021/02/09/2250/how-to-setup-cloudflare-argo-tunnel-on-centos-7/

Cloudflare Argo Tunnel is incompatible with Cloudflare Authenticated Origin Pull as they both do the same thing to prevent visitor access that bypasses Cloudflare proxy and tries HTTP access via the server’s real IP access – just done in different ways.

@eva2000 should I disable it from dashboard

If you haven’t configured Cloudflare Authenticated Origin Pull on Nginx origin side, then yes Cloudflare Authenticated Origin Pull should be disabled on your dashboard. Though I don’t have it disabled on dashboard and my Argo Tunnel works fine as long as your Nginx origin doesn’t have it configured.

But I disabled and getting same error

check my config at https://blog.centminmod.com/2021/02/09/2250/how-to-setup-cloudflare-argo-tunnel-on-centos-7/ you might need to set them to https version of localhost and have * noTLSVerify set

ingress:
  - hostname: tun2.domain.com
    service: https://localhost:443
    originRequest:
      connectTimeout: 10s
      noTLSVerify: true
  - hostname: hostname.domain.com
    service: https://localhost:443
    originRequest:
      connectTimeout: 10s
      noTLSVerify: true
  - hostname: host.example.com
    service: https://localhost:443
    originRequest:
      connectTimeout: 10s
      noTLSVerify: true
  - hostname: yourssh.domain.com
    service: ssh://localhost:22
  - service: http_status:404

Disables TLS verification of the certificate presented by your origin. Will allow any certificate from the origin to be accepted.

AFAIK, cloudflared will on verify against the certificate you authorised/selected at cloudflared login selection so if that isn’t the hostname you have in your ingress rule’s hostname, you might need to set noTLSVerify too.

@eva2000 I tried but still same issue

tunnel: 796c6fde-bae0-476f-86d6-3dfd022d6143
credentials-file: /home/cloudcreatr/.cloudflared/796c6fde-bae0-476f-86d6-3dfd022d6143.json

ingress:
  - hostname: wp.cloudcreatr.com
    service: http://localhost:443
  - hostname: wpp.cloudcreatr.com
    service: http://localhost:80
    originRequest:
      connectTimeout: 10s
      noTLSVerify: true
  # Catch-all rule, which just responds with 404 if traffic doesn't match any of
  # the earlier rules
  - service: http_status:404
warp-routing:
  enabled: true

Should I configure Authenticated Origin Pulls and check

services change to https:// on port 443 if wpp.cloudcreatr.com is HTTPS configured on origin side

also wp.cloudcreatr.com services needs https:// on port 443 if wpp.cloudcreatr.com is HTTPS configured on origin side also as non-HTTPS doesn’t run on port 443