Having trouble configuring Your CDN for Discourse ?

I am going to configuring AWS cloudfront for Discourse without docker. Many of us facing problem with cloudfront that AWS CF doesn’t take Java-Script and CSS on fully Cache. Here, I’m at your service.

Step 1: Go to AWS Console and select Cloudfront. Click Create Distribution button and choose WEB click Get Started button. Type your discourse domain name on Origin Domain Name. select Match Viewer Option

AWS Cloudfront Match Viewer
  • Choose “Redirect HTTP to HTTPS“. Click Create Distribution button on bottom page.
redirect http to https
  • Wait for Deployment. After process completed, Copy the your CDN url from  Domain Name.
CDN url

Step 2: Go to Terminal on Discourse Server. ( I installed discourse app without docker used this article: https://www.linuxbabe.com/ubuntu/install-discourse-ubuntu-18-04-server-without-docker )

  • Go to discourse directory. Type this command for edit discourse.conf file. If you are using docker, You can find this section on /app.yml file, Uncomment DISCOURSE_CDN_URL and Paste your CDN url with “//”.
                    
nano config/discourse.conf                    
                
  • Uncomment the cdn_url and Paste Your CDN Url with “//“. Refer the image. Save the file.
CDN url Paste
  • Run this command for Compile the assets.
                    
RAILS_ENV=production bundle exec rake assets:precompile                    
                
  •  Then check your forum on browser output.  You would see bigger images, larger icon or collapse webpage. or You would see the output without Javascript or Blank Page. No Worries ! We can fix it.

Step 3: Go to Cloudfront on AWS Console. Select your CDN for Discourse. Click Edit Button.

CDN Edit
  • Don’t change anything. Click Yes,Edit button on bottom of the page.
  • After deployment completed, Go to Popular objects on left Navigation Panel. You can see all js, css file cached. If not there, may be content security policy issue in discourse. We can fix it.
CDN Deplyed with all JS, css

Step 4: Restart the Discourse using the following command. After restarted,  check the output of discourse on browser.  mine is forum.amarantos.org.

                    
sudo systemctl restart discourse                    
                
  • Now , You would see the blank page. Check the error’s on console of your browser. Press F12 for Firefox, Chrome.
  • You can see the Content Security Policy errors like this. Let see how to fix it.
CSP errors

Step 5: I am going to fix CSP errors in Firefox. Type “about:config” on address bar. Click Accept the Risk and Continue button.

  • Type security.csp.enable on search box.
  • Make it true to false. Refer the Image.
Security.csp.enable
  • Restart the browser and check the discourse website. Finally, it is showing CDN cache site with Discourse default Content Security Policy.
  • Now login to Admin account. Go to Settings –> Type in Search Box “content security policy”. Add your CDN url on content security policy script src. In this way our site is safe from XSS attack, When we make our CDN only as whitelist from Content Security Policy.
  • Then enable security.csp.enable option on Firefox “about:config”.
  • Restart the browser. Then type your forum address and go on. Finally, We fixed CDN with Discourse without Docker & with Docker.

Step 6: If you feel less files cache on while  step 3: or didnt see any file’s. Do it once again Step 3. Now, It would take all of JS,CSS,IMG files. Because of Content Security Policy, It may left some static files.

  • For Final touch,  Restart the Discourse. “sudo systemctl restart discourse
  • Now You would feel the real speed of AWS cloudfront with Discourse. 😎 😍
AI Subscribtion Image

Would you like to Keep in touch with us !