Skip to content

Commit

Permalink
Added compression in production on heroku (#41)
Browse files Browse the repository at this point in the history
* Added compression in production on heroku

testing this out as the propshaft asset compiler is only minifying currently
and it looks like I would need cssbundler and jsbundler to handle this otherwise

* pulled in some updates to the heroku compress gem

* added exporter adapter and sprockets ... who knows??!?

* found a bug about returning 500 error for some assets .. this might fix it

https://fuzzyblog.io/blog/rails/2022/06/02/rails-7-madness-no-such-middleware-to-insert-before-actiondispatch-static.html

* removing the heroku asset exporter since it doesn't work

* revmoved the heroku stuff

* reverting to the original configuration

* sprockets  exporter

* added fork of heroku-deflater that is upgraded for rail 6.1 assets

* test that heroku deflator is no longer required

romanbsd/heroku-deflater#54 (comment)

* explicitly set when to use Rack:Deflator / Brotli

romanbsd/heroku-deflater#54 (comment)

* attempt to constrain the use of the compressors

* Updated bin/dev and bin/prod to switch back and forth between a prod and dev like experience.
Added details of ngrok to DevNotes for remote access to localhost
Added notes about setting the same ENV variables that are used in Heroku using the dotenv gem and  .env.production
Removed the interfont stylesheet link that was very large and not loading during  production  testing
Added a database config section to use the osx local Postgres.app but in production the DATABASE_URL will override this
The prod script 'builds' the app like in heroku and 'deploys' it to https://jitter.test with precompiled assets

* Update of Gemfile.lock
Added example of the heroku environment variables to copy to .env.production for bin/prod script

* added a script to make testing prod simpler with bin/puma-dev-prod
added clearer explanation about secrets to Devnotes
added the dotenv-rails gem to support setting env variables like heroku does
enabled access to ENV['HOST'] to support requests from https://jitter.prod or ngrok urls

* added and extra layer of security for the production enviroment to filter  requests passed from the ENV['host'] for example jitter.prod and from  x-feature.herokuapp.com
 fixed a typo that showed up in the preview environment

this kinda stinks but for heroku previewapps and ngrok apps we can't predict the subdomain to set ENV['HEROKU_APP_NAME']

* adjusted the config since production is blocked

* grrr.. this is still blocking requests in heroku

* added scripts to use https://jitter.test which is using rails development mode
added scripts to use https://jitter.prod which builds like heroku deployment and uses postgres and local bundle and cached classes etc
added some explanation in the DevNotes
upgraded a security fix that is actually pretter urgent from two days ago
pupulated the .env.production with the heroku configs with and explanation and heroku sample since this is git ignored to protect secrets
ngrok still needs a little debugging but for this PR i just needed the prod like build to work to examine the host.config problem in heroku

* ENV['Host'] is working for jitter.prod locally but the hosts 403 error is still happening on heroku .. so trying som things

* determined that the 403 error is coming from the default_url_options combined with config.hosts.   Added the HEROKU_APP_NAME to fix this

* ugghh fixed typo in herokuapp.com
  • Loading branch information
jcowhigjr committed Jul 17, 2022
1 parent 51bc4bd commit fbb50bd
Show file tree
Hide file tree
Showing 27 changed files with 583 additions and 110 deletions.
10 changes: 9 additions & 1 deletion .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,12 @@ DATABASE_URL=nil
THOR_MERGE=opendiff
WEB_CONCURRENCY=0
DB=sqlite3
NGROK_HOST=0fb1-108-77-85-43.ngrok.io
NGROK_HOST=0fb1-108-77-85-43.ngrok.io
HOST=jitter.test
RACK_ENV=development
RAILS_ENV=development
PUMA_DEV_HOST=jitter.test
FLIPPER_DECISION_WHEEL=true
FLIPPPER_EARLY_ACCESS_PREVIEW=true
BUNDLE_WITH='development:test'
BUNDLE_DEPLOYMENT=0
18 changes: 18 additions & 0 deletions .env.heroku.sample
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
DATABASE_URL=postgres://
LANG=en_US.UTF-8
RACK_ENV=production
RAILS_ENV=production
RAILS_LOG_TO_STDOUT=enabled
RAILS_MASTER_KEY=
RAILS_SERVE_STATIC_FILES=enabled
SECRET_KEY_BASE=
#heroku cedar buildpack build VARS
BUNDLE_WITHOUT='development:test'
BUNDLE_PATH=vendor/bundle
BUNDLE_BIN=vendor/bundle/bin
BUNDLE_DEPLOYMENT=1

#local host prod testing vars only
NGROK_HOST=fff8-136-55-249-77.ngrok.io
DATABASE_URL=postgresql://temp@localhost/jitter_production
PUMA_DEV_HOST=jitter.test
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,5 @@ nil

# don't commit brakeman info which might give hackers a hint about the app
brakeman.report
brakeman.ignore
brakeman.ignore
.env.production
62 changes: 47 additions & 15 deletions DevNotes.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ Edit and use credentials for yelp
https://www.yelp.com/developers/documentation/v3/authentication
bin/rails credentials:edit --environment development

NOTE: in non local environments use RAILS_MASTER_KEY and SECRET_KEY_BASE, locally don't set these and config/credentials/development.key will be used

# ENV variables are managed by dotenv-rails gem
NOTE: .env.production can be set to look like heroku and .env.test can be set to look like CI testing. beware .env can confuse things since it will be used in all environments if present

<!-- Rails.application.credentials.yelp[:api_key] -->

https://medium.com/scalereal/managing-encrypted-secrets-credentials-with-rails6-7bb31ca65e02
Expand Down Expand Up @@ -85,9 +90,19 @@ https://www.google.com/books/edition/_/mYFGEAAAQBAJ?hl=en&gbpv=1&pg=PT54&dq=html
`be guard` # run tests and linting, asset processing/live reload connection to browser while developing in the background
`bin/dev` # run dev server and css processor

cleaning up before a commit
#stage what you want to commit
`git add related files`
#note tests passing in `be guard`
#stash unrelated files and confirm tests still passing
`git stash push --keep-index`

commit
git commit
see lefthook.yml



open a PR
`gh pr create`

Expand Down Expand Up @@ -188,36 +203,38 @@ git co feature/xyz
git flow feature rebase
git stash apply


# ngrok and testing on your phone
i use edge devtools vscode extention and the iphone SE profile to test
The automated tests run with iPhone SE emulation because it is the smallest phone.

# test locally using https://jitter.test
# test locally using https://jitter.test or public internet ngrok urls
brew install puma/puma/puma-dev
sudo puma-dev -setup
puma-dev -install
ln -s /Users/temp/src/ruby/jitter ~/.puma-dev/.
uncomment Procfile.dev regarding puma-dev
the run bin/dev

addjust Procfile.dev
to start puma-dev
Local Prod like stack (postgresql, production.rb, built assets and vendored bundle)
config/env.production.heroku.sample to -> .env.production with SECRET_KEY_BASE= DISABLE_DATABASE_ENVIRONMENT_CHECK=1 RAILS_ENV=production PUMA_DEV_HOST=jitter.prod

start ngrok
ngrok http https://jitter.test --host-header=jitter.test
and note your random generated host
then run bin/puma-dev-prod
or
bin/ngrok-prod

edit config/development.rb or .env.development

NGROK_HOST=683e-108-77-85-43.ngrok.io
see ->
config.hosts << "683e-108-77-85-43.ngrok.io"
# test remotely over through internet tunnel
To create a public url and share local host over the internet
dotenv -f .env.production ngrok http https://jitter.test --host-header=jitter.test

# restart the rack server to allow the new config host access
touch tmp/restart.txt
# test remotely over and iternet tunnel
and note your random generated host ->

edit .env.development or .env.production
with NGROK_HOST

Your ngrok dashboard is at http://127.0.0.1:4040/
then restart the server
# restart the rack server to allow the new config host access
touch tmp/restart.txt

# Evaluation of a new feature

Expand Down Expand Up @@ -270,3 +287,18 @@ Your ngrok dashboard is at http://127.0.0.1:4040/
First Byte 14.26s Fully Loaded 14.76s
First Byte 0.25s Fully Loaded 1.36s
https://www.giftofspeed.com/report/dorkbob-feature-test-as-o7xwqc.herokuapp.com/ErXtbI/

# Assets

1) Ideally I would follow DHH lead mentioned in propshaft
1) no uglify, minify, compression in dev only fingerprinting and manifest (propshaft and importmaps)
2) no pre-compile because CDN's do this well on the fly but don't fingerprint well and can TTL based on that
Trade-offs: 12-factor prod/cd/cd parity .. for me assets in ci/cd should work like prod if possible.
a cdn seems to require 'publishing' the app and brings in more complexity than required at this time.. like DNS and caching exposes to webcrawlers etc etc.


rm -rvf public/assets && SECRET_KEY_BASE=1300b0d92cb1b9520e8590ae8b5db6a615d98c8654473328fef153b31625c504e57da9cbcf27ae977e3a7712aba958464946cf00498a7b9ee60d9f622f45d84d RAILS_ENV=production bin/rake assets:clobber tailwindcss:clobber assets:reveal tailwindcss:build assets:precompile assets:reveal && touch tmp/restart.txt


Other notes:
debugging revealed fort awesome was being pulled in from application.js but when the network fails the entire compile failed...
6 changes: 5 additions & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ gem 'hotwire-rails' # , '~> 0.1.3'

gem 'brotli'
gem 'rack-brotli'
gem 'sprockets-exporters_pack'
# gem 'smart_assets', group: :production
# gem 'heroku-deflater', git: 'https://github.com/pungerfreak/heroku-deflater.git'


group :development, :test do
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
Expand Down Expand Up @@ -125,4 +129,4 @@ gem 'tailwindcss-rails', '~> 2.0'
# gem 'flipper-active_record'
gem 'flipper', require: 'flipper/adapters/pstore'

gem 'dotenv-rails'
Loading

0 comments on commit fbb50bd

Please sign in to comment.